Enable web push notifications

  • Updated

You can use Optimizely Data Platform (ODP) to push real-time messaging to your web and mobile customers, even if they are not currently on your site.

Desktop example:

Web_Push_-_Desktop.png

Mobile example:

Web_Push_-_Mobile.png

Prerequisites

  • HTTPS – Web browsers require that your website uses HTTPS to let your customers subscribe to web push notifications.
  • ODP Integration – Your website must already use an ODP integration, like the Javascript Web SDK, Shopify, Magento, Google Tag Manager, or Tealium integration.
  • Installation – If your website is not a Shopify site, you need to install the zaius-notification-service.js file in the root of your website to enable web push. If your website is a Shopify site, you need to install an ODP app instead.

Create a web push integration

  1. Go to Account Settings > Integrations > Web Push.
  2. Click New Web Push Site and complete the following required fields:
    • Name – The display name for this integration. This name displays any time you select your integration for use in ODP.
    • Short Identifier – An identifier used primarily for internal reference and event generation. You cannot change this after you save it.
    • External Name – The website name displayed to customers, often displayed in notification settings depending on the browser and operating system. Matching the brand is more important than matching the URL.
    • Website URL – The base URL of the website. For example, if your website address is https://example.website/home/, your base URL is https://example.website.
    • Notification Icon URL – The URL of the default icon for all push notifications sent from this integration. You can upload and host the image on ODP, or manually specify the icon URL using the HTTPS of an existing image.
  3. Click Next Step to continue.
  4. Enable the browsers where you want this web push integration available.
  5. Click Save & Continue to validate your configuration and continue to the next step.
  6. Customize how the web push notification displays by adjusting the Card, Title, Subtitle, Button, and Cancel options. Customize the customer's opt-in experience by adjusting the following Settings:
    • Position – The location of the window on the page.
    • Show Delay – The amount of time to wait before showing the window.
    • Popup Frequency – The minimum time between automatic popups of the window. This is specific to the subscription window and controls how often to ask for permission to send notifications to the customer if they do not interact with it.
    • Minimize Delay – The amount of time to wait before automatically minimizing the window.
    • Cancel Duration – The minimum time to wait before showing the window after the user cancels it.
    You can return to this step at any time to customize the pop-up notification window.
  7. Click Save & Continue when you are finished.
  8. Make sure the JavaScript Tag is implemented on all pages of your website, preferably in the header section. Find this tag by going to Settings > Integrations > JavaScript Tag.
    • If you are configuring web push for your Shopify site, expand Shopify and follow the instructions to authorize the ODP Shopify app to set the required files on your site.
    • If your website does not use Shopify, download the zaius-notification-service.js file and upload it to the root of your website. For example, if your website is https://example.website/, then the file should be available at https://example.website/zaius-notification-service.js.
  9. After the files are in place on your website, or ODP is authorized in Shopify, click Verify & Continue. Optimizely checks for the file on your website to confirm it is installed correctly.
  10. If you are ready to enable web push now, toggle the Automatically initialize web push on this site to On and click Finish. If you are performing a manual web push integration or want to enable web push at a later time, you can finish without enabling the automatic integration. Return to this step at any time to change your website's behavior.
Any time you change your web push configuration, allow a few minutes for your changes to take effect.

Custom subscribe experience

To customize the web push subscription experience further, see the developer documentation on Web Push in the Web SDK.