Creating web push templates

After implementing a tracking code into your website, integrating Firebase with Synerise, enabling web push notifications in Synerise and preparing an agreement form, you can create web push templates which you will later use while creating web push notifications.

Image requirements


Chrome on Android Chrome on Windows
Resolution 2:1 aspect ratio , minimum: 512x256, balanced:1024x512, maximum: 2048x1024 2:1 aspect ratio, recommended: 360x180
File type jpg, png, gif, webp, ico, cur, bmp; not supported: svg or animated gifs (will show the first gif frame only) jpg, png, gif, webp, ico, cur, bmp; not supported: svg or animated gifs (shows the first gif frame only)

Create a template


  1. Go to Communication icon Communication > Web Push.

  2. Click Template icon

  3. Select the Visual builder.

  4. Enter the name of the web push template.

  5. Select the folder to save your template in.

  6. In the Title field, enter the headline of the notification. It’s recommended to not exceed 50 characters, however, the displayed number of characters depends on the browser.

  7. In the Message field, enter the main text of the notification.
    Recommended: Up to 100 characters. If the message is too long, the rest of it is replaced with ellipsis (...).

    How to personalize title and content of the web push

    1. Click the Insert icon Inserts button.
    2. Select the insert type.
    3. Find an insert and click it to get the code.
    4. Copy the code.
    5. Paste it into the text field (Title or Message).

    Examples

    1. Use of customer’s first name
      Requirements: You must have customer names filled in on their profiles in CRM.
      Example: Hey {% customer name %}. How are you?
      Effect: A customer sees their name in the web push notification.
    2. Displaying the product added to the cart
      Requirements: You must prepare an aggregate that returns the last product added to the cart.
      Example: Do you want to finish the purchase of this item? {% aggregate 43b9385d-1a70-3e8d-ae2c-27b1ae0083be %} {% endaggregate %}
      Effect: A customer sees in the notification an image of the product left in the cart.
    3. Displaying the number of loyalty points
      Requirements: You must create the expression that calculates the number of loyalty points.
      Example: You have {% expression %} 04d2eeb6-d677-4e3e-913c-3e3633adf906 {% endexpression %} loyalty points! Thank you for being with us!
      Effect: A customer sees the number of loyalty point they gathered.

  8. In the URL field, enter the address to which a customer is redirected after clicking the notification.

  9. In the Icon field, enter the URL of the icon you uploaded previously to the Files section in the Data Management module. The selected icon is shown on the right side of the notification.

    1. To get the URL of the icon, go to Data Management icon Data Management > Files.
    2. Find the icon on the list.
    3. Hover the mouse cursor over the icon on the list.
    4. Click Copy URL.
    5. Paste the URL in the Icon field.
  10. In the Image field, enter the URL of the image you uploaded previously to the Files section in the Data Management module. The selected image is shown on the bottom of the notification. Image requirements are listed at the top of the article.

    1. To get the URL of the image, go to Data Management icon Data Management > Files.
    2. Find the image on the list.
    3. Hover the mouse cursor over the image on the list.
    4. Click Copy URL.
    5. Paste the URL in the Image field.

Preview the template


WARNING:
  • In the preview, images don’t display in notifications on desktop Chrome and Firefox on iOS.
  • In the preview, the URL redirecting is not used.
  1. Click Preview icon.
    Result: You get a browser request to receive notifications.
  2. Agree to receive notifications.
    Result: A web push notification is displayed.
Example web push notification displayed on Chrome desktop
Example web push notification displayed on desktop Chrome

Save the template


  • If Service approval is not configured:

    • To go directly to launching a web push notification, click Use in communication and follow the instructions here.
    • To save the template:
      1. Enter the name of the template.
      2. Select the folder where the template will be saved.
      3. Click Save this template.
        Result: A dropdown appears.
      4. Click Save as.
        Result: The template is saved in the selected folder.
  • If Service approval is enabled for the Communication module, to complete the work over the template:

    • If you are a regular user, to send the template to reviewers and a final approver, click Send to approval.
    • If you are a reviewer, to send the template to reviewers (including yourself), click Send to approval.
      Result: Approve and Unapprove button appears.
    • If you are a final approver, to let yourself approve the template, click Send to approval.
      Result: Approve and Unapprove button appears.
      Important: If you make changes to the approved template and don’t send it to get another approval, the web push notification will use the latest approved version.
😕

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.