Synerise Menu

How to enable displaying web-push messages on your site

Today’s consumers are more demanding than ever and to meet these expectations, we need to keep up to date with what consumers are interested in and what gets their attention. That’s why businesses are turning to push notifications – simple, short messages that display on screens and convey bits of information.

Benefits

Web-push messages give businesses the power to communicate with customers in real time, when their attention is most focused, so it helps to:

  • generate sales
  • drive traffic to online sites
  • educate potential customers

Synerise solution

Before you launch web push at your website you need to integrate with Firebase. This google account will be use for:

  • WebPush (more info about it you will find here)
  • MobilePush for Android
  1. Go to Firebase Console, create account for your organization and then log in to console
  2. Add new project and submit form
  3. Click project settings
  4. Go to Cloud Messaging tab and copy Server Key and Sender ID
  5. Set up Synerise Integration. Insert FCM – Server Key and Sender ID. Then, submit form by clicking Save button.

Choose display method

  • Default – One-click permission flow. Need code implementation and upload files on your server
  • Use Synerise addon – Permission use additional browser window to connect with Synerise website. Easy to configure but web users have to confirm their subscriptions

Default display method

Go to  Web Push settings download and unzip two zipped files.

 

  • manifest.json – after unpacking, put this file on your servers. This file is unique for your Business Profile. 
  • snr-sw.js – after unpacking, put this file on your server the way, that the url to the file has format example.com/snr-sw.js.
    IMPORTANT: if you already use other worker, you must add content of snr-sw.js file to it. What is more you must also change name of the worker into: snr-sw.js In other way, the mechanism will not work.

Later copy this HTML code: <link rel=”manifest” href=”/manifest.json”>, and paste it in <head> section at your webpage. Assure that file path, to your manifest.json file is correct.

Synerise addon

  1. You can create your own pop-up with agreement for a web-push notification. To create new one, click Add new button
  2. You’ll be redirected to dynamic content templates list. You need to duplicate one of default Web Push Agreement templates. Then you can edit it and add some suitable copy.

  3. Then go to Campaigns module and choose Dynamic content. Create new dynamic content using your previously prepared template. Set campaign as an active, define capping and save your campaign.

  4. Back to webpush configuration view. Here you can add different language versions of your templates. To do this, click add Add language. This text will be showed on pop-up.

  5. Set a default language and click Save

 

Running Web-push campaign

Run automation, where web-push message will be shown as an action.

  1. Go to Automation section, and create new customer journey
  2. Configure the journey, and select web-push as an action. Set Title of the message, (e.g. New collection available!), description (e.g.: Visit our site, and see our new products in special price for you.), and URL: put link to the site, you want to redirect your customer (e.g. example.com/new_collection)
  3. You can create personalized web push notifications
    All you have to do is enter one of the following parameters in the “Message” field:

    {{Client.firstname}} – selecting this parameter will show the customer’s firstname
    {{Client.lastname}} – here the customer’s lastname is displayed
    {{Client.attribute.attribute name}} – the parameter will cause the client to see the specified attribute – just enter the appropriate attribute name
  4. Save the automation as running one, and now your campaign is ready!

Remember:

  1. Your site must fully support HTTPS
  2. Your site must redirect all http:// requests to https:// requests
  3. Synerise web-pushes are available for Chrome and Firefox browser
  4. Implementation of Synerise SDK JS is necessary for Synerise web-push service (available here: https://github.com/Synerise/javascript-sdk)
  5. Web-pushes will be shown after first visit on the site (during the second and subsequent visits)

Related blog post:

  1. Effective web push notifications

Be the first who knows!