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.

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.

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.

• 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.

How do I switch from the esputnik.com 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.

2. In the same menu, select any of the three types of Double Opt-In display and save the changes.
3. 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.

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.

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.

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.

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

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.

7. Click Check website status:

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

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

How to Set Up Notifications

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

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

Double Opt-In:

Single Opt-In:

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

Single Opt-In

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

Standard Double Opt-In

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

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.

Web Push Sample

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

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

Permission Window with a Second (Default) Prompt

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

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.

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.

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

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.

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.

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,

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

For Chrome, you can optionally add a big image and one or 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.

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.

You can launch a campaign after creation, or while editing the notification by clicking 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.

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.

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

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

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

5. In Workflows, configure the trigger.

6. Click the start icon to 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.

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.