Documentation > Website/HTML

Configuring Web Push

Web push notifications are currently supported for Chrome version 50 for Desktop and Android and work only on HTTPS sites (and on localhost).

Integrate the JS code

First you need to integrate the CleverTap JS embed code from Settings Dashboard → Integration → Account IDs, SDKs. Then follow the instructions here

Integrating GCM and CleverTap

Website Configuration

Add the Service worker file

Push notifications on Chrome make use of a special script called a service worker that listens for web pushes. Since the execution of these scripts is managed by the browser in the background, users can receive push notifications from your website even when they’re not on your site. To get started, download the service worker file we have provided and copy it in your document root of your website, such that it’s publicly accessible.

Download the service worker file from here – As mentioned above, you’ll have to host this file in your document root.

Specify the GCM Sender ID

In order to register the service worker and subscribe for push notifications, you need to specify your GCM Sender ID inside a website manifest file.

If your website already has a manifest, simply add the following property to it:

  "gcm_sender_id": "YOUR_GCM_SENDER_ID"
copy Copied

Your GCM Sender ID is your GCM Project Number (12 digit number) and not your API Key

If you don’t have a manifest file yet, create a new file called manifest.json and add it in the document root of your website. Ensure that you specify the "name" and "gcm_sender_id" parameters, where "name" is the name of your brand (e.g. “Acme Fashion”).

Sample manifest.json file

  "name": "Acme Fashion | Latest in fashion world",
  "gcm_sender_id": "1234567890" // replace with actual value
copy Copied

Then, in all your HTML files, include the below snippet in the header

  <link rel="manifest" href="/manifest.json">
copy Copied

Requesting User Permissions

Now that you have a service worker and manifest set up, it’s time to start asking users if they want to subscribe to Web pushes. For flexibility, CleverTap provides you with the ability to ask for notifications based on context and user actions.

As a general rule, we highly recommend asking for permission from users only after they’ve spent some time on your website, and completed an action of significance. Do not ask new users to subscribe for notifications as soon as they land on your site.

For example, after a user has completed a transaction, you may call the function:

    "titleText":'Would you like to receive Push Notifications?',
    "bodyText":'We promise to only send you relevant content and give you updates on your transactions',
    "okButtonText":'Sign me up!',
    "rejectButtonText":'No thanks',
copy Copied

The general format for creating the popup is:

copy Copied

If a user blocks the native chrome permissions popup, the user is lost forever (unless the user clears their browser settings). However, if you are using the Clever popup, you get the advantage of asking the same user again for permission after a defined period.

Permission frequency

To ensure that users are not asked for permission too frequently, our API ensures that calling clevertap.notifications.push does nothing if the user has rejected the dialog less than one week ago. Once a week has passed by, calling the function will display the dialog as expected. This eliminates the need for you to implement a separate check before calling the function. To set a separate frequency, send "askAgainTimeInSeconds":time_in_seconds along with the above object.
To skip the Clever popup, send "skipDialog":true along with the above object.

Migrating from other services

If you are migrating from a different web push notifications provider, you may be concerned about asking subscribed users to enable notifications a second time.

Note that, if a user has already enabled notifications on your host domain, calling clevertap.notifications.push will not display the popup for that particular user, and the registration will automatically be migrated to our new implementation.