Web Push Notifications are clickable messages that are sent to a user's desktop, mobile, or tablet through a website or web app, even when they're inactive your the site.

To Configure Web Push Notifications,

  • Click 'Enable'

  • Download the Swan SDK Service Worker

Configuring SDK

Use with existing Serviceworker.js

If you have an existing serviceworker.js file, then update the serviceworker.js file by adding the following code to the top of your file.

Copy // Add this line to the top of the file
 importScripts("https://swan-web-sdk.azureedge.net/serviceworker?app_id=swan-test_96929");
 //...
CODE

Web Push Subscription

To subscribe user with email or mobile number to push web notification subscription details to swan

Copy _swan.login("xxxxx@gmail.com" or "91xxxxxxxx")
 // pass email or mobile number to push web notification subscription details to swan
 //...
CODE

Rename Service worker custom filename

If you wish to change the serviceworker.js file name depending on the browser or environment, use the following initialization block:

Copy <!-- Include script -->
<script type="text/javascript">
	(function (window, document, url) {
		_swan = window._swan || {};
		const d = document;
		const g = d.createElement('script');
		const s = d.getElementsByTagName('script')[0];
		g.type = 'text/javascript';
		g.async = true;
		g.src = url;
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			_swan.init({
				app_id: 'swan-test_96929',
				swPath: './serviceworker.js',
			});
		};
	})(
		window,
		document,
		'https://swan-web-sdk.azureedge.net/trackingjs'
	);
</script>
CODE

Web Push Notification Template

To design a template

  • Click '+' icon

  • You can choose from Pre-built templates or start from scratch to design a new one as per your needs.

Basic Details

Enter the and also personalize your notification as per your needs. You can also include an icon for your notification.

Actions

Enter the URL that the customer will be redirected to upon clicking the notification.

Add Buttons

You can include buttons in your web push notifications. Enter the name of your button under the label name and enter the URL that the customer will be redirected to upon clicking the notification.