Setup

Understand how to set up Web Push as a channel for your marketing campaigns.

Check that Web Push is set up before creating campaigns.

Browser & OS

From the CleverTap dashboard, navigate to Settings > Channels > Web push. You can toggle the Web push for every browser that is integrated correctly. All the details are displayed on this page.

  1. Chrome Browser
CT Dashboard settings for Chrome

CT Dashboard settings for Chrome

πŸ“˜

FCM Update: Migrate to HTTP v1 API

We only support VAPID based Web Push notifications. Customers that have FCM based tokens in their account, please note the following:

  • Firebase will deprecate its legacy APIs starting June 20, 2023, and discontinue them from June 2024.
  • To avoid disruptions in web push notifications, you must migrate to the new HTTP v1 API by June 20, 2024. For more information, refer to Integrate FCM and CleverTap.
  1. Firefox Browser
CT Dashboard settings for Firefox

CT Dashboard settings for Firefox

  1. Safari Browser
1080

CT Dashboard Settings for Safari

CT Dashboard Settings for Safari

CT Dashboard Settings for Safari

  1. Kai OS
CT Dashboard Settings for KaiOS

CT Dashboard Settings for KaiOS

Soft Prompt

The Soft Prompt feature improves the Web Push opt-in process by displaying a timely and contextual prompt before triggering the browser’s native opt-in prompt.

Instead of immediately giving control to the browser, which offers users an option to allow or deny requests, a soft prompt acts as the initial step to guide users. It allows marketers to prepare users by explaining the benefits of subscribing, thereby increasing the chances of a positive response. This strategic approach helps to prevent permanent opt-out decisions and improves overall opt-in rates.

This update allows you to fully customize the content, style, and placement of the Web Push Soft Prompt enhancing user experience and increasing opt-in rates. There are two types of Soft Prompt opt-ins:

  • Card Popup: A visually engaging prompt that appears on the website, encouraging users to subscribe immediately.
  • Bell Icon: A persistent opt-in option that ensures continuous visibility for the opt-in without disrupting the user experience. It allows users to subscribe to notifications at their convenience.

By using both the Card Popup and the Bell Icon, marketers can provide greater flexibility in how users opt-in. The Card Popup offers an immediate and engaging prompt, while the Bell Icon ensures that users who dismiss the initial prompt still have an option to subscribe later.

Card Popup

To use this feature, enable the Card Popup toggle from the CleverTap dashboard, in the Soft Prompt section of Web Push.

Soft Prompt

Soft Prompt

πŸ“˜

Note

You will see two options: New and Old designs. By default, the old designs are selected. We recommend selecting the new design as it allows complete customization of the Soft Prompt as per your branding guidelines.

To enable New Design Soft Prompt from your dashboard:

  1. From the CleverTap dashboard, go to Settings > Channels > Web push. Click Soft Prompt.
  2. Toggle the Card Popup feature.
  3. Select New Design and click Edit to modify the design details.
Edit the New Design

Edit the New Design

  1. Edit the content and style of the popup. This includes the title, body, background color, icons, buttons, and so on.
  2. Once done, click Preview to view the appearance of the customized Card Popup and finalize the design before deploying it. Click Save to save the changes.
Edit options for Card Popup

Edit options for Card Popup

Bell Icon

To enable the Bell Icon feature from the CleverTap dashboard:

  1. Enable the Bell Icon toggle in the Soft Prompt section of the Web Push page.
Bell Icon

Bell Icon - show ON

  1. Click Edit to modify the design details.
  2. Edit the content and style of the Bell Icon. This includes the icon image, position, background color, hover text, and so on.
  3. Once done, click Preview to view the appearance of the customized Bell Icon.
  4. Click Save to save the changes.
Edit options for Bell Icon

Edit options for Bell Icon

FAQ

Can users enable both the Card Popup and the Bell Icon at the same time?

Yes. Users can enable both features simultaneously.

What happens to the bell icon if the user accepts notifications via Card Popup?

If the user accepts notifications, the bell icon will no longer appear, as notifications have already been allowed.

What happens if the user blocks the native prompt?

If the user blocks the native prompt (the browser’s built-in opt-in request), the card popup will not be shown again. The bell icon will remain visible and when the user clicks on the bell icon, a GIF will be displayed to nudge users to opt-in notifications.

Native Prompt Blocked

Native Prompt Blocked