How to Create and Manage Web Push Notifications

A web push notification is a pop-up window that shows up in the browser and can be used as a channel for online communication with customers.

Web push

To send web pushes, you first need to collect tokens. A push token is a unique set of parameters that allows to send messages to the identified device. For web pushes, tokens have the same function as email addresses for emails. In the eSputnik system, it only takes a few minutes to set up token collection.

How to Set Up Token Collection

1. Go to your account > Settings.

Go to your account

2. Go to Web Push. In this tab, you can learn the general information on the types, and choose the permission prompt type. Click Single Opt-In or Double Opt-In to go to the corresponding settings.

Web push settings: choose the prompt type

  • Single Opt-In – a one-step process that consists of one default permission prompt and doesn’t require additional confirmation. By clicking Allow, a user automatically subscribes to your push notifications.
  • Double Opt-In – a two-step process that consists of two elements: a custom permission window with a prompt and a subsequent default prompt. A user needs to click Allow on both prompts to confirm subscription. Double Opt-In also allows you to use your domain in push notification signatures, previously binding was through a subdomain.

Permission prompt types

How do I switch from the subdomain to my domain?

If you have active Double Opt-In, which you configured through a subdomain, then there will be no changes. However, you can switch to using your domain in three steps:

  1. Go to the Permission settings, select the default dialog (Single Opt-In) and save the changes.

Permission settings

  1. In the same menu, select any of the three types of Double Opt-In display and save the changes.
  2. Go to the integration settings, for this you need to click on the name of your site. Download the installation file. Upload it to your site's top-level directory.

Integration settings for the site

How to download the installation file

The subscriber base remains after the transition that is those who subscribed through the subdomain continue to receive notifications.

3. Next, you'll be forwarded to New website adding. Fill every field with valid information.

New website


Collection of subscribers for Web Push notifications is available only for sites with the https: // protocol


4. If you already have a contact base, and you want to continue working with it in the eSputnik system, enter your keys in Integration with the token collection service.

Enter keys

If you don't have a contact base, leave the fields empty, and we will provide the keys.

For Safari, you can configure individual settings in the drop-down menu.

Web pushes for Safari

5. Click Generate script, and the system will automatically generate the script that will be displayed below.

Generate script

6. Download the setup file and upload it to the top directory of your website. Then copy the generated script and install it into your site code before that.

Install code

7. Click Check website status:

Website status

8. Click Back to go back to Web push settings.

Go back to web push settings

In this window, all your added websites would be enlisted, with the indicated subscription type and website statistics.

Added websites

How to Set Up Notifications

1. Click Permission settings to configure the design and appearance time of the permission prompts.

Permission settings

2. Choose the notification type and click it for further configuration:

Double Opt-In:

Single Opt-In:

Types of displaying Web push notifications

Enable Show prompt sample to see how each notification would be displayed in the browser:

Enable Show prompt sample

Single Opt-In

Specify the appearance trigger (page load/click) and the delay after entering the website before prompt appearance.

Single Opt-In

Standard Double Opt-In

For standard Double Opt-In, you need to configure a series of the following notifications:

First permission prompt

Permission window with a second permission prompt

Confirmation window

Blocking window

First (Custom) Permission Prompt

Choose the necessary settings. You can change the prompt text, background color, and buttons text and color. Also, specify the appearance trigger (page load/click) and the delay after entering the website before prompt appearance and before repeat prompt appearance.

First (Custom) Permission Prompt

Web Push Sample

Enter the notification title and text, and upload the icon.

Web Push Sample

Web push sample preview is available in the below section with the window settings:

Samle display

Permission Window with a Second (Default) Prompt

For the permission window, specify the background color and text color, and edit the text, if needed.

Permission windows

Confirmation and Blocking Windows

For the confirmation and blocking windows, set the background color and text color, edit the text, if needed, and set the time for display duration.

Full-Width Double Opt-In

Its configuration procedure is identical to that for standard Double Opt-In. You only need to additionally specify the permission prompt placement.

Full-Width Double Opt-In

Widget Double Opt-In

Two items are added in the widget settings: set the positioning of the widget on the screen in pixels and add animation to it.

Widget Settings

You can also set up a reminder to unlock the widget:

Widget notification settings

The advantage of the widget is that users can independently enable notifications if they have been disabled, or return a subscription request if it was ignored.

Once you’ve completed all the settings, click Save and then go back to Web push settings.

Now you can send bulk web push notifications and create token-based workflows.

How to Create a Web Push Notification

1. Go to Messages > Messages > Web Push, and click Create Web Push.

Messages > Messages > Web Push

2. Enter a web push title and text. On the right, you’ll be able to see how the notification would be displayed in different browsers.

Note. The title should contain no more than 30 characters, the text – 45 to 60. Otherwise, the web push display in the browser may be distorted. When you add a big image, don’t type more than 30 characters, as it would cut off part of the text.

Main settings

3. Enter the link, add tags, and specify the subscription categories.

Note. You can personalize triggered web pushes (for example, order confirmation and abandoned carts) and promo web pushes by inserting the relevant personal info,

Personalize web pushes

or by adding dynamic content: any element - text, image or link - can be dynamic.

Add dynamic content

For Chrome, you can optionally add a big image and one or two CTAs.

One image and two CTAs

4. Specify message time to live (TTL). This is the period of time during which the web push can be delivered to the user. If the user remains offline for a longer period, the TTL expires, and the web push becomes unavailable.


Note. UTM tags are enabled for each notification by default; you can disable them, if needed.

4. To proceed with the campaign launch, click Create campaign; to save the web push notification, click Save and exit.

Click Save and exit

How to Launch a Web Push Campaign

Bulk Web Push Campaign

1. Go to Messages > Messages > Web Push, choose the campaign and click the start icon.

Messages > Messages > Web Push

You can launch a campaign after creation, or while editing the notification by clicking Create campaign.

Click Create campaign

2. Enable Hide notification automatically so that the web push could disappear from the screen after a certain period (8-20 seconds depending on browser). With the disabled option, the web push would remain on the screen until the user clicks it or closes it.

Hide notification automatically

Note. By default, web pushes are sent to all domain subscribers. To send to segments, enable the corresponding pricing plan.


3. Double-check all the information, and start the campaign. You can send a test, schedule the campaign, or start immediately.


Automated Web Push Campaign

You can create a workflow with any event that would trigger a web push sending. For the illustrative purposes, in this instruction, we’ll create a subscription confirmation event.

1. Go to Automation > Workflows, and click Add new workflow.

Automation > Workflows

2. Drag a web push block to the workflow, configure the settings, and save.

Drag a web push block to the workflow

3. To set the trigger event, go to Automation > Event types, and click Create New Event.

Automation > Event types > Create New Event

4. Fill all the necessary fields, and click Add.

New event

5. In Workflows, configure the trigger.

Trigger configuration

6. Click the start icon to launch the campaign.

 Launch the campaign

Now every user who has allowed web pushes from your website, would receive a notification after subscription confirmation.


How to use personalization in web pushes, if customer data (name, phone number, email address) isn’t collected during subscription?

In the eSputnik system, contacts get automatically binded to tokens after going to your website from the email sent via eSputnik. Collect tokens through eSputnik, and you'll be able to use any data from the client’s profile and send personalized web pushes to those customers who did not receive your email. More than 20% of all tokens in our system are bound to email addresses or phone numbers.

  1. Go to the subscription request settings, select the default dialog (Single Opt-In) and save the changes.
  2. In the same menu, select any of the three types of Double Opt-In display and save the changes.
  • Website not added means you need to check and verify the settings;
  • Your website has been added means you can start collecting tokens.
  • Widget;
  • Custom dialog;
  • Panel;
  • Default dialog;
  • Double Opt-In Viewer (Widget).

  • Double Opt-In Viewer (Custom dialog).

  • Double Opt-In Viewer (Panel).

  • Single Opt-In Viewer (Default dialog).

  • First (custom) permission prompt;
  • Web push sample;
  • Permission window with a second (default) permission prompt: used to ask to allow notifications from your domain.
  • Confirmation window: displayed after notifications have been allowed.
  • Blocking window: displayed after a user has unsubscribed from your notifications. It also explains how to renew the subscription, if needed.
Any Questions?
We’re always happy to help!
Request a Callback
Fill in the form, and our specialists will call you back as soon as possible.
Request a Callback
Chat Support
We’re waiting for your questions!
Send a Chat Message
Contact the eSputnik support team
Send an Email