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.

Permission prompt types

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

New website

Note that for Double Opt-In you also need to specify the domain name. It can only contain numbers, lowercase Latin letters, and hyphens. All other characters, dots, spaces, special symbols, etc., must be removed or replaced. For example, the domain https://bliss.com should be entered like https://blisscom:

Fill in information

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. For Single Opt-In, download the installation file and upload it to your website's top directory. Next, copy the generated script and install it into your website's code before </head>. For Double Opt-In, you only need to install the generated code.

Install code

7. Click Check website status:

  • Website not added means you need to check and verify the settings;
  • Your website has been added means you can start collecting tokens.

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:

  • Single Opt-In;
  • Standard Double Opt-In;
  • Full-width Double Opt-In.

Single Opt-In

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

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 (custom) permission prompt;

First permission prompt

  • Web push sample;
  • Permission window with a second (default) permission prompt: used to ask to allow notifications from your domain.

Permission window with a second permission prompt

  • Confirmation window: displayed after notifications have been allowed.

Confirmation window

  • Blocking window: displayed after a user has unsubscribed from your notifications. It also explains how to renew the subscription, if needed.

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

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.

TTL

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.

Segments

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

Preview

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.

FAQ

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.

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
Email
Contact the eSputnik support team
Send an Email