Developer Hub

Welcome to the Synerise developer hub. Add extraordinary value to Your business with a Synerise integration, webhooks, API or customize Synerise for Your organization.

Get Started

Web push notifications are short messages sent directly to a user on desktop or mobile devices. They allow your users to opt-in to timely update. It is a communication channel to effectively engage and re-engage site visitors without knowing their email or other contact details with customized content at a right time. Before displaying the notification, permission needs to be acquired from the user by clicking an allow button on appearing dialogue window in the browser.

A good practice is to keep web push notifications short and pertinent, use accurate title with an engaging headline, complement the heading with additional crucial information in the body part plus fitting and noteworthy image (images) or other features provided that would fit in your campaign. They can be displayed in a default style with text message which might include images, emojis and other features that gain user’s attention, or they can also be interactive where the user can directly respond to the message.

Types of content:

  • utility: reminder to complete a task or a process or a timer
  • updates: about new options available/ events/ any other sort of information
  • promotions: special offers for customers (make sure not to overuse this feature, and that you address specific offers that are segmented and personalized and also remember about tracking the progress of specific campaigns)

Available options

Notifications have many features that differ across operating systems and browsers. The features/ options provided by Synerise include:

On the desktop:

  • Title (short, up to 50 characters, depending on the browser)
  • Message (short description (up to 100 characters) of the message that we want to send to the user, displayed as certain amount of words, excess will be replaced with dots "…")
  • URL (might or might not be displayed, address of the site)
  • Abandoned shopping cart link (on/off)
  • Large image (bigger picture, that appear 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 container 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 be expired 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

On the mobile:

  • Title (short description)
  • Visibility (visible: The client will see the message in the application / Silent: he message will be invisible to the client. The application must support it.)
  • Message (Max width for iOS app: 234 letters)

Available features and differences between browsers and operating systems are explained in more details in the attached tables: Available features

Good practices

Notifications can be a useful tool to inform and update as well as connect with the users and engage them but when used in a bad way they can be annoying and harmful from marketing perspective. That is why it is important to remember about mixed feelings and reactions connected with that tool and use it properly.

UX notifications tips and good practices:

  • Specify the content displayed in the notification, the text needs to be short and convey the most important information, so that the user is sure what is it about and what action can/should be done with that.
  • The value the users get needs to be larger than interruption they experience
  • Customize the information – adjust the displayed notification to specific users. This can be connected to time/ frequency of users' activity or their preferences and habits. This will help to alert and inform them with relevant contents and updates to engage more effectively.
  • Time of displaying the message can be based on users habits as well as common behaviors. According to research, it’s better to send push notifications between 6-8pm when engagement is at its highest (remember to adjust the time to user's time zones)
  • Use as much space as available but not overuse it. Small notifications are less distractful but can be informative and serve its purpose.
  • A/B testing: to see what works best try different designs and test them. See which option engages users most effectively and does not make them unsubscribe.

Avoid:

  • Putting your website in the title or the body. It will be included by browsers in the notification so avoid duplicating it.
  • Sending multiple notifications in a short period of time. Do not overuse the notifications, they can be too distracting to the users and make them cancel the subscription. It should be designed to let them know about something important or beneficial from their perspective.

Integration with FCM

Before you launch web push at your website you need to integrate with Firebase Cloud Messaging

Default method

  1. In Synerise go to Settings > Web-push
  2. Download two zip archives
  3. Put manifest.json on your webserver
  4. Put worker file snr-sw.json your webserver. Note that file must be reachable under site root with exact same filename e.g. example.com/snr-sw.js otherwise this mechanism won't work.
    In case you're using another worker you can add snr-sw.js contents to your worker file and rename it to snr-sw.js
  5. Copy code fragment from Settings > Web-push and include it under <HEAD> section of your website. Make sure that path to manifest.json is correct.
<head>
   <!-- Add the line below into your head section, make sure path is correct -->
   <link rel="manifest" href="/manifest.json">
</head>

Important

  • 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 browser
  • 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"

Using Synerise addon

Permission use additional browser window to connect with Synerise website. Easy to configure (you don't need to add anything to your code) but web users have to confirm their subscriptions.

WebPush