How to Create a Web Push Notification

A web or browser push notification is a pop-up message that shows up in the browser window on desktop and mobile. It can be delivered when the browser is open regardless of whether the user is visiting the sender website at the moment.

Browser push example

To send web pushes from your website, you need to install a web push code in it.

Since web push is a permission-based channel, you need to ask users to subscribe to your web notifications. You can select two types of a subscription request (Single Opt-In or Double Opt-In) and customize request prompts for the Double Opt-In subscription.

See a step-by-step guideline on how to start sending web pushes from your website.

1. To create a web push notification, go to Messages > Messages, select Web Push and click Create Web Push.

Web Push selection

2. Enter the name. It will be used for search within the system and won’t be visible to users.

3. Enter the title. Stick to no more than 30 characters.

4. Enter the text. Stick to 45 to 60 characters. More characters may distort the web push display in the browser.

You can personalize the title and text by adding dynamic variables through Velocity. They will be substituted by personal contact data at the moment of the message launch. You can add as a variable any personal data available in the contact profile. It’s especially useful for transactional messages like an order confirmation, account report, reactivation, etc.

Personalization for web push

5. Enter the site link.

6. Optionally add tags. They help filter messages and statistics and manage sending frequency.

7. Add a logo. Upload a JPEG or PNG, up to 128KB or add a dynamic variable. Uploaded logos are saved in Uploaded and you can switch to them in a click.

8. Optionally select subscription categories.

Basic settings for web push

9. For Chrome, add a banner and one or two CTAs.

10. You can set Time to Live (TTL). This is the time during which the web push is stored at the provider’s server if the recipient isn’t available for delivery.

11. Enable UTM tags and they will be automatically added to your URL.

Extra settings

In eSputnik, you can create a multilingual version of any message. Click the globe icon in the top panel, specify the default language and add language versions. Fill each version with the content in the corresponding language. You can switch between versions within one template in one click.

Creating a multilingual notification

Read more on how to create and launch multilingual campaigns.

To test a web push notification, click Test in the top panel.

Testing a notification

Important!

To test web pushes, you need to be subscribed to notifications from esputnik.com. If you aren’t subscribed, click the lock icon on the left of the URL line and select Allow in Notifications.

Subscribing to push notifications

After all settings are done, click Save and exit to save the notification or Create campaign to go to campaign launching.

How to Launch a Web Push Campaign

1. In Messages > Messages > Web Push, click Create campaign or open the message and click Create campaign inside.

Creating campaign

2. Optionally, enable Hide notifications automatically. The notification will remain on the screen for 8 to 20 seconds depending on the browser. With the disabled option, it will remain on the screen until the user clicks it to open or close.

3. Select segments.

Important!

Segmentation for web push is only available under Advanced pricing plans.

4. Check the notification details and preview it in different browsers.

Notification details and preview

5. In Send options, schedule the message or start it immediately.

Sending options

How to Send a Triggered Campaign

You can create a triggered campaign and notifications will be sent to users in response to their activity. Any activity (subscription, registration, order, password reset) can trigger a notification.

As an example, let’s see how to send a campaign triggered by a subscription confirmation.

1. Go to Automation > Workflows and click New workflow.

Creating a new workflow

2. Create a workflow with a required Web Push block. In settings on the right, select a message to be sent. Click Save.

Workflow example

3. In Automation > Workflows, click Trigger configuration.

Trigger configuration

4. In On event, select the event type and how often to process unique events. You can create a new event in Automation > Event types.

5. Click Apply.

Workflow launch conditions

6. In the general workflow list, click Start. The workflow status will change to active. The workflow will now be automatically sending messages to all subscribers after subscription confirmation.

Launch the workflow

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