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.
- 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.
If you haven’t implemented our code on your website before, find out more information about it on Synerise JS SDK.
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.
Click Add new project, add the details and click Create project, then click on the Settings icon in the menu on the left
- Go to the Cloud Messaging tab,
- 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.
- Paste FCM - Server Key and Sender ID from Firebase,
- 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.
- Select the Enable web push option,
- 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.
- 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.
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.
- 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
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:
You can create a web push agreement forms by means of dynamic content.
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.
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,
In the Templates section you can find templates that you can use in your campaign,
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,
If you want to create a campaign, find and click the blue button in the upper right corner.
- The Status campaign section shows how many campaigns are active/scheduled/paused and the number of clicks and shows campaigns from last 24h,
- 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),
- 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.
The options provided by Synerise include:
- 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), smaller images will be upscaled to fit the space while preserving the aspect ratio; larger images will be downscaled:
|Chrome on Android||Chrome on Windows|
|Resolution||2:1 aspect ratio , minimum:
||2:1 aspect ratio, recommended:
- 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.
- 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.
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.
- 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,
- 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,
- 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,
- Rename the template and click Save as 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.
Click Visual builder to create a new template in Synerise.
- Set or edit Template name,
- Select the Folder where the template should be added,
- Use Preview to check changes and the final appearance of notifications,
- Use Save as new template if you want to save your work as a new template,
- Enter Web Push content. You can edit Title, Message, URL, Icon, Image, etc,
- 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.
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.
- 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:
- Choose campaign recipients in Audience,
- In Content create and insert the text of your web push notification,
- Use the Schedule section to set the time when notifications should be sent,
- Optionally use UTM & URL parameters: generate tracking links,
- Save or run campaign.
In this section you can specify the recipient group.
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,
Select a segment from the list of existing ones, to choose specific one,
Create a new segment for New audience,
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),
Click Apply to save your changes.
In this section you can edit and choose the message for your audience and use test A/BX test.
- 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,
- Choose your email from the list,
- 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,
- Click Apply to save changes.
In this section set the time of sending the message.
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.visitevents. It estimates the best date for the following seven days.
To set the Start date defined in the Optimal sendig time, click the icon.
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.
To save the changes, click Apply.
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.
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.,
In advanced options, you can set parameters for links in the campaign,
Click Apply to save changes.
At the last stage, you can decide to send the campaign immediately or finish it later.
- Use the relevant buttons to Finish your campaign later,
- If your campaign is ready, you can Send it immediately.
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.
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.
In this panel you will find a list of all previously created campaigns.
- The Status campaign section shows the number of clicks and campaigns from the last 24h,
- In the All campaigns section you can see campaign statuses and statistics from the last 24 hours (number of SMS sent, OR and CTR),
- Click on the name of the campaign you are interested in.
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,
Campaign details is in statistic section. You will find more information in campaign analytics.
Campaign Analytics shows the number of sends, displays and clicks in your campaigns,
The second section shows campaign statistics like:
- Webpushes sent,
- Webpush displays (unique),
- Webpush clicks (unique),
- CTR (Click-through rate),
- Transactions counted after webpushes sent,
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: