How to Send Web Push Notifications from a Website

A web push notification is a pop-up message that shows up in the desktop and mobile browser. Web push notifications can be delivered anytime when users have their browsers open regardless of whether they are visiting the sender website at the moment.

Example of a web push

To send web pushes, you 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 takes a few minutes to set token collection. You can unify tokens with other contact data (email, phone number, app token) in a single contact profile. This way, you’ll be able to include web push notifications in multichannel workflows and reach the customer on the platform they prefer to use for communication.

Important!

Web push token collection is only available for websites that use the https:// protocol.

How to Add a Website

1. Go to your personal profile > Settings > Web Push and select Double Opt-In or Single Opt-In.

  • Double Opt-In is a two-step subscription process. It requires a user to allow your notifications in a request prompt and then to confirm subscription.
  • Single Opt-In is a one-step subscription process. It requires a user to only allow your notifications in a request prompt.

Subscription type selection

2. Fill in Website name and URL.

Adding a website

3. If you already have a Firebase Project for token collection, enter your keys in Integration with the token collection service. If you don't have a project, leave the fields empty. Keys will be generated automatically.

Integration with the external service

4. To set web pushes for Safari, unroll and configure the corresponding settings.

5. Click Generate script. It will be generated automatically and displayed below.

6. Download the installation file and insert it into your website's root directory. Copy the generated code and insert it into your website pages before the closing

tag.

Download the installation file

7. Click Check website status. If it’s Website not added, check whether you installed everything right. If it’s Website has been added, your site is ready for token collection.

Statuses of the website

8. Click Back to go back to the settings. You’ll see the added site in the general list.

How to Set Up Permission

Regardless of the subscription method, you can opt to remove tokens that have been inactive for the last 30, 60 or 90 days.

Important!

Tokens are removed based on the open rate and not on the last delivery date. For example, if you opt to remove tokens that have been inactive for 30 days and the last web push campaign was made 31 days ago, all tokens except those subscribed over the last 30 days will be removed.

Removing inactive tokens

1. Click Permission settings.

2. Select the permission request prompt. To see the sample of each prompt, click Show prompt sample.

Double Opt-In

  • Widget. A request prompt with an icon that shows up in the bottom right or bottom left of the browser. As an icon, you can use your logo or leave a default bell.

Widget request

  • Custom dialog. A customizable request prompt that shows up in the top left corner of the browser.

Custom dialog request

  • Panel. A request prompt in the full width of the browser screen. Can show up in the top or bottom.

Panel request

Single Opt-In

  • Default dialog. A standard request prompt that shows up in the top left corner of the browser.

Default dialog request

Appearance and Display Settings

Appearance settings for each type open upon clicking on the type.

Double Opt-In

Widget

A widget prompt is displayed on the screen until the user allows notifications. It lets users who ignored the original request return to it and enable notifications at any time.

You can set for a widget:

  • Icon (image, background color);
  • Prompt placement (alignment, positioning);
  • Animation;
  • Unblock reminder;
  • Prompt text (copy, color, background color);
  • Buttons (text, color);
  • Display conditions.

Custom dialog

You can set for a custom dialog:

  • Prompt text (copy, color, background color);
  • Buttons (text, color);
  • Display conditions.

Panel

You can set for a panel:

  • Prompt text (copy, color, background color);
  • Buttons (text, color);
  • Prompt placement (alignment, positioning);
  • Display conditions.

Single Opt-In

Default dialog

A default dialog has a standard text and buttons that can’t be changed.

You can set for a default dialog:

  • Display conditions.

Web Push Notification Sample

For any prompt type, you can configure settings for a web push notification that will be shown in a confirmation window (Double Opt-In) and in further push notifications.

  • Icon. It will be shown in notifications to Safari subscribers on macOS. For other browsers, set the image for each notification during creation.
  • Notification title and text (for Double Opt-In confirmation).

Web push notification sample setting

How to Migrate from the esputnik.com Subdomain to Your Domain

If you have used the esputnik.com subdomain to set a Double Opt-In subscription, it will be used as your push notification signature. To migrate to your domain and use it as a web push signature:

1. Go to your personal profile > Settings > Web Push and click Permission settings.

Permission settings in personal profile

2. Select Single Opt-In, click Save and go back to settings.

Single Opt-In type

3. Click Permission settings again. Select the necessary Double Opt-In type and click Save. Go back to settings.

4. Click your website.

Select website

5. Download the installation file and insert it into your website's root directory.

File download

Your token base will be saved after migration. Web push subscribers who have subscribed through the esputnik.com subdomain will continue to receive push notifications from you.

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