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 allow your customers to subscribe to web push notifications.
  • Optimizely Integration – Your website must already be using an Optimizely integration such as the Javascript Web SDK, Shopify Integration, Magento Integration, Google Tag Manager Integration, or Tealium Integration.
  • Google Developer Account for Firebase – Register for a free Google Developer Account to request the Sender ID and Server Key used to allow ODP to send notifications on your behalf for web push notifications in Google Chrome.
  • Installation – If your website is not a Shopify site, you need to install two files, required by Google Chrome, in the root of your website to enable web push. If your website is a Shopify site, you need to install an Optimizely App instead.

Configuration

Google Chrome authorization

Create a Firebase project in the Google Firebase console. Once the project is created, go to Settings > Cloud Messaging to get your Server Key and Sender ID for later.

Creating a web push integration

Use the following steps to start configuring your web push integration:

  1. Go to Account Settings > Integrations.
  2. Select Web Push to reveal its details.
  3. Select New Web Push Site and provide the requested information outlined in more detail below.

Step 1 - Website setup

All fields on this step are required.
  • Name – The display name for this integration. This name appears any time you are selecting your integration for use in ODP.
  • Short Identifier – An identifier used primarily for internal reference and event generation. It cannot be changed once saved.
  • External Name – The website name displayed to end-users, such as 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. Click the upload button to host the image on ODP, or manually specify the URL using HTTPS of an existing image.

Click Next Step to continue.

Step 2 - Configure Google Chrome

Click the switch to enable Google Chrome, then enter the Sender ID and Server Key from your Firebase Project. Navigate to Settings > Cloud Messaging in the Firebase Console to find both of these items.

  • Sender ID – The unique number assigned to your Firebase project.
  • Server Key – The server key that authorizes ODP to send Chrome push messages on your behalf.

Note: You can read more about the Sender ID and Server Key in the Firebase documentation.

Click Save & Continue to validate your configuration and continue to the next step.

Step 3 - Customize the experience

Customize the customer's opt-in experience by using the following options:

  • Position – The location of the window on the screen.
  • 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 it has been canceled.

You can return to this step at any time to customize the window.

Click Save & Continue when you are finished.

Step 4 - Install and verify

Make sure the JavaScript Tag is implemented on all pages of the 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, click Shopify and follow the instructions to authorize the Optimizely App to set the required files on your site.

If your website is not using Shopify, download the files and upload them to the Root of the website. For example, if your website is https://example.website/, then the manifest and notification service files should be available at https://example.website/manifest.json and https://example.website/zaius-notification-service.js respectively.

Once the files are in place on your website, or ODP is authorized in Shopify, click Verify & Continue. The Optimizely App will check for the files on your website and let you know if they are installed correctly.

Step 5 - Go Live

If you are ready to enable web push now, toggle the Automatically initialize web push on this site to the "on" position and click Finish. If you are performing a manual web push integration or wish 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.

Note: Any time you change your web push configuration, please allow a few minutes for your changes to take effect.

Custom subscribe experience

To customize the web push subscription experience further, check out the Web Push API integration resources.