Web push notifications

Web push notifications enable you to maintain communication with customers through a web browser, no matter if they are viewing your website or not. Apart from this, the unobtrusive character of web push notifications will keep your message away from spam folders or ad blocking software. The notifications will always be displayed to users who have agreed to receive them.


Business benefits

  • increase web traffic,
  • improve conversion rates,
  • build an integrated customer experience.

Before you start

To send web push notification messages you have to configure them in the system. Before you start sending web push notifications you have to set up the implementation if:


Configure Web Push

Synerise JS SDK

Before you start sending web push notifications, your website should be integrated with the Synerise Business profile.

In order to set up the implementation, go to Settings > Tracking Codes.

Screenshot showing tracking code in Synerise

If you haven’t implemented our code on your website before, find out more information about it on Synerise JS SDK.


Firebase account

Firebase is a Google tool that will be used in Synerise in order to send web push campaigns and mobile push campaigns for Android.

First, go to the Firebase Console and create a basic free account for your organization and log in.

A screenshot from the Firebase console presenting how to add a new project to an account

Click Add new project, add the details and click Create project, then click on the Settings icon in the menu on the left

Screenshot from the Firebase console presenting the location of Server Key and Server ID in the Cloud Messaging tab

  1. Go to the Cloud Messaging tab,
  2. Copy the Server Key and Sender ID.

Integrate with Synerise

To integrate the Firebase account with Synerise, open a new tab.

In order to integrate the Firebase account, go to Settings > Apps & Services.

Screenshot from the Synerise integration tab presenting how to enter the Server Key and Sender ID from Firebase

  1. Paste FCM - Server Key and Sender ID from Firebase,
  2. Submit the form by clicking Save.

Web Push worker

Before you start working with web push notifications, configure the Web Push worker.

In order to start the web push worker configuration, go here.

Screenshot presenting configuring Web Push Worker in Synerise

  1. Select the Enable web push option,
  2. Follow the instructions and download and unzip the two zipped files. Then, put the manifest.json and file the snr-sw.js file on your servers. This file is unique to your Business Profile.
  3. Copy the code fragment from Webpush settings and include it under the section of your website. Make sure that the path to manifest.json is correct.

Screenshot presenting configuring Web Push Worker in Synerise

In the Path to service worker section, enter the proper path to service worker script on your website

The file should be available under the site root with the same filename e.g. example.com/snr-sw.js, but if you want, you can put it in a subfolder like this: example.com/other/path/snr-sw.js. If you choose other directory than root, you must declare header Service-Worker-Allowed: / in order to properly use the service worker. In case you use a different worker, you can add snr-sw.js contents to your worker file and rename it to snr-sw.js.

Warning:
  • Your site must fully support HTTPS
  • Your site must redirect all http:// requests to https:// requests
  • Synerise web-pushes are available for Chrome and Firefox browsers
  • Implementation of Synerise SDK JS is necessary for Synerise web-push service
  • Web-pushes will be shown after first visit on the site (during the second and subsequent visits)
  • Web-push click event is sent instead of page.visit

Agreement form

Before you start working with web push notifications, configure the Web Push agreement.

With the default display method you will activate a native browser agreement form. The look of the form will depend on the client’s browser window. Here is a preview of an agreement form sent by Firefox:

Screenshot presenting a notification agreement for displayed with a default method

You can create a web push agreement forms by means of dynamic content.


Campaign dashboard

In the web push campaign dashboard you can control all campaigns and find a list of your campaigns and a summary for each of them. In order to see the campaigns dashboard go to Campaigns > Webpush.

Screenshot from the Synerise Campaign module presenting the web push campaigns dashboard

  1. In the Filters section you can filter campaigns based on their status and time when they were created. You can filter them based on a few conditions:

    • Recent - see the list of most recently sent campaigns,
    • Draft - see the list of SMS templates,
    • Scheduled - see the list of scheduled campaigns,
    • Active - see the list of all currently active campaigns,
    • Paused - see the list of all paused campaigns,
    • Inactive - see the list of all inactive (finished) campaigns,
  2. In the Templates section you can find templates that you can use in your campaign,

  3. The Folder section allows you to add folders to a group and organize campaigns. To add a specific campaign to a folder, click on it and choose the Move to option visible on the blue bar, and choose the folder you created earlier,

  4. If you want to create a campaign, find and click the blue button in the upper right corner.

Screenshot from the Synerise Campaign module presenting web push campaigns dashboard_2

  1. The Status campaign section shows how many campaigns are active/scheduled/paused and the number of clicks and shows campaigns from last 24h,
  2. In the All campaigns section you can see campaign statuses (how many of them are active/scheduled/paused), and on the right side you see statistics from the last 24 hours (number of SMS sent, OR and CTR),
  3. Choose and click a campaign to show details.

Web push template

To create a web push notification template you have to know the capabilities of the Synerise templates editor. In this part we will show you how to correctly make a reliable web push notification template.


Technical requirements

The options provided by Synerise include:

DESKTOP

  • Title - short, up to 50 characters, depending on the browser,
  • Message - a short description (up to 100 characters) of the message to be sent to the user, excess will be replaced with an ellipsis “…”,
  • URL - may or may not be displayed, address of the site,
  • Abandoned shopping cart link - on/off,
  • Large image - image that appears under the displayed message (Large images work only in Chrome on Windows and Android devices), should be at least 360x240, with a 1.5 aspect ratio, (720x480 recommended), smaller images will be upscaled to fit the space while preserving the aspect ratio; larger images will be downscaled,
  • Image - a small image you can show next to the title and body text, uploaded from your computer,
  • Icon image - from URL or uploaded from your computer,
  • TTL - The notification will expire if the device does not come back online within this time. The default is 7 days (Max 28 days). 0 value means “now or never”,
  • **Send without marketing agreement check **- on/off,
  • Test option.

A web push notification example with a large image for Windows

MOBILE

  • Title - a short description,
  • Visibility - visible: The client will see the message in the application / Silent: the message will be invisible to the client. The application must support it,
  • Message - max width for iOS app: 234 letters.
Warning: Available features and differences between browsers and operating systems are explained in more detail in the attached tables.

A web push notification example with a large image for Android


Template library  

To send web push notification messages you have to create a template in the system. In Synerise you can use a template library.

In order to create a folder in the Template library,go to Campaigns >  Web Push > Templates > From Template.

Screenshot presenting how to create a folder in a web push notification template library

  1. Use the Template library to organize existing templates, For example, you can create a group of templates prepared in different languages. If you have not created a folder before, you will see the default folders created by Synerise,
  2. You can use Display settings to select your preferred view: icons or list. A search engine is available on the right. You can sort results by the Name and Date parameters,
  3. If you click From template you may choose a template from the Default folders or create a new folder by clicking icon+ to open the editing settings,
  4. Rename the template and click Save as new template.
Warning: If you edit an existing template and want to save a modified as NEW (instead of overwriting the existing one).

New template

Create a template before you start to send web push notification messages. In this part we will show you how to do it in a few simple steps.

In order to create a new template, go to Campaigns >  Web Push > Templates > Create new.

Screenshot presenting how to create a template in a web push notification template library

Click Visual builder to create a new template in Synerise.

Screenshot presenting how to create a template in a web push notification template builder

  1. Set or edit Template name,
  2. Select the Folder where the template should be added,
  3. Use Preview to check changes and the final appearance of notifications,
  4. Use Save as new template if you want to save your work as a new template,
  5. Enter Web Push content. You can edit Title, Message, URL, Icon, Image, etc,
  6. Use in campaign to redirect to the campaign view.

From the campaign level, you can send one-time web push notifications to a specific group of users at a predetermined time.

Warning: If you use the template in the campaign without saving it first, it will not be saved automatically.

Send Web Push manually

If you want to send a campaign to a predefined group of contacts or the whole database you can do this from the Campaigns panel.Using this option will allow you to send a campaign out immediately or schedule it.

In order to using campaigns, go to Campaigns >  Web Push > Create campaign.

Screenshot presenting the steps necessary to create an email campaign manually

  1. At the beginning Set or edit the name of the campaign. You can also add a description of the campaign so that any other Synerise user within your account can quickly understand what the campaign is.

Create campaigns in 5 steps:

Screenshot presenting how to create a web push notifications campaign manually using the Synerise Campaigns mode

  1. Choose campaign recipients in Audience,
  2. In Content create and insert the text of your web push notification,
  3. Use the Schedule section to set the time when notifications should be sent,
  4. Optionally use UTM & URL parameters: generate tracking links,
  5. Save or run campaign.

Audience

In this section you can specify the recipient group.

Screenshot presenting how to create a web push notifications campaign manually using the Synerise Campaigns mode

  1. Using Everyone will prompt a bar containing all leads in the business profile, specifying the percentage of people with consents. The campaign will be launched only to people who have given permission,

  2. Select a segment from the list of existing ones, to choose specific one,

  3. Create a new segment for New audience,

  4. Advanced options let you add some additional settings:

    • Batch delivery - set whether campaigns are to be sent in batches (provides a campaign to a large number of recipients in stages, in order to avoid overloading internet and email service providers),
    • Enable a control group - create a control group (a control group is 30% of your group who will not receive this campaign, so you will better understand its effectiveness),
  5. Click Apply to save your changes.


Content

In this section you can edit and choose the message for your audience and use test A/BX test.

Screenshot presenting how to insert text into a web push notification using the Synerise Campaigns mode

  1. Choose how you want to send the notifications - By default, you can send one web push notification as part of a campaign. Adding more tabs with the “+” button allows you to run A / B / X tests. The maximum number of versions sent within one campaign is 3,
  2. Choose your email from the list,
  3. Use Customer allocation by selecting more than one variant within the A/B/X tests, you will be able to set the size of the groups to which a given variation should be displayed. The control group (if you previously marked the Audience view) is already removed from the recipients bar,
  4. Click Apply to save changes.

Schedule

In this section set the time of sending the message.

Screenshot presenting how to schedule a web push notification using the Synerise Campaigns mode

  1. Choose one of the two options:

    • To start your campaign right now, click Display immediately,
    • To plan a campaign to be sent at a future date, use the Scheduled option. Set the start time and the time zone.
      Additionally, the AI algorithm calculates the optimal time to send a campaign on the basis of the customer activities such as page.visit events. It estimates the best date for the following seven days.
      To set the Start date defined in the Optimal sendig time, click the AI optimizer icon.
  2. Time to live is the time during which the campaign can be delivered to the recipients when they open a browser. If they open it after the time specified, they won’t receive the campaign.

  3. To save the changes, click Apply.

Tip: You may be setting up web push notifications promoting a weekend promotion in an online store. The sending time is set for Friday 8 PM and the lifetime of the notification is two days. If the user activates their browser on Friday 8 PM, they will be notified immediately. Otherwise, there are two more days to display the web push notification after the browser is opened. However, if the browser is opened after the time indicated in Time to live, the notification will expire and the user will not see it.

UTM & URL parameters

An UTM, or Urchin Tracking Module, is a special parameter that can be added to a standard URL. It allows you to accurately track traffic from individual sources on a given website.

Screenshot presenting how to generate tracking links for a web push notification using the Synerise Campaigns mode

  1. UTM tags consist of the following elements:

    • Source - the source of incoming traffic, a specific page like Facebook, Instagram, Google, etc. This is the only mandatory parameter when specifying UTMs. The others are optional, but should be used,
    • Medium - the type of traffic generated. Mediums identify whether the traffic is paid, free, from newsletters, etc. The most popular tags are cpc, cpm, email, display, blog,
    • Term - used to mark keywords,
    • Campaign - with this element you can mark a specific campaign, e.g. summer-sale, black-friday, etc.,
  2. In advanced options, you can set parameters for links in the campaign,

  3. Click Apply to save changes.


Save campaign

At the last stage, you can decide to send the campaign immediately or finish it later.

Screenshot presenting how to ave and run web push campaign

  1. Use the relevant buttons to Finish your campaign later,
  2. If your campaign is ready, you can Send it immediately.

Send automatically

Automation of Web push campaigns, based on behavioral data about the client, saves the marketer’s time while increasing the efficiency of email delivery. Synerise allows you to send web push automatically using the Automation module.

In order to use automation for web push campaigns, go to Automation > Journeys > New Journey

You can create an email automation in just a few steps:

  • Set the automation,
  • Configure the shipping settings,
  • Save and/or run the campaign.

Analytics


Thanks to the analytics of web push campaigns you can check data collected about the user in the system and additionally personalize the individual content of the messages.

In order to check the analytics, go to Campaigns >  Web Push.

Screenshot presenting a module web push campaigns

In this panel you will find a list of all previously created campaigns.

  1. The Status campaign section shows the number of clicks and campaigns from the last 24h,
  2. In the All campaigns section you can see campaign statuses and statistics from the last 24 hours (number of SMS sent, OR and CTR),
  3. Click on the name of the campaign you are interested in.

Screenshot presenting the overview of a particular web push campaign

  1. In Overview you will find brief statistics about your campaigns,

    • Audience - shows total audience, estimated reach and selected segments,
    • Content - variants of your template (for example for A/B/X tests),
    • Schedule - information about time to live and on time parameters,
    • UTM&URL - a list of UTMs used in campaigns,
  2. Campaign details is in statistic section. You will find more information in campaign analytics.

Screenshot presenting the overview of a particular web push campaign

  1. Campaign Analytics shows the number of sends, displays and clicks in your campaigns,

  2. The second section shows campaign statistics like:

    • Webpushes sent,
    • Webpush displays (unique),
    • Webpush clicks (unique),
    • CTR (Click-through rate),
    • Subscribers,
    • Transactions counted after webpushes sent,
  3. On the chart you will find Displays and clicks in time.


Example of Use

Web push notifications are a great way to inform customers about:

  • current promotions,
  • upcoming conferences or conventions,
  • updates about new options available, events, products, etc.

When configuring a campaign, you can specify the group of recipients and the date and time of sending the message.

Here is an example of a simple web push notification:

An example of a simple web push notification


😕

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

😉

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.