With the latest versions of Chrome supporting push notifications, you can use Zaius to push real-time messaging to your customers, even if they are not currently on your site.

Prerequisites

  1. HTTPS: Our Web Push integration requires your website uses https. Without https in the URL your users cannot subscribe for web push notifications. This is a limitation imposed by web browsers.
  2. Zaius Integration: Your website must already be using a Zaius integration such as the manual Javascript Integration, Shopify Integration, Magento Integration, Google Tag Manager Integration, or Tealium Integration.

For Google Chrome Web Push

  1. Google Developer Account for Firebase: For Google Chrome web push, you must register for a free Google Developer Account in order to request a web push Sender ID and Server Key used to allow Zaius to send notifications on your behalf. You can register from the Google Firebase console here
  2. Installation: If your website is not a Shopify site, you will need to be able to install two files in the root of your website in order to enable web push. These files are required by Google Chrome. If your website is a Shopify site, you will need permission to install a Zaius App instead.

Getting Started

The configuration for Web Push can be found by navigating to the Integrations page within the Zaius Platform.

Click to expand the Web Push integration panel

Creating a Web Push Integration

Create your first web push integration by clicking New Web Push Site and fill in the requested information.

Step 1 - Configure your integration

All fields on this step are required:

  • Name - Display name for this integration as it appears within Zaius. You will see this name any time you are selecting your integration for use.
  • Short Identifier - Identifier used primarily for internal reference and event generation. Cannot be changed once saved.
  • External Name - Website name as it should be displayed to end users. This may be shown in notification settings, etc, depending on the browser and operating system.
  • Website URL - Base URL of the website (must be https). For example, if your website address is https://example.website/home/, your base URL is https://example.website
  • Notification Icon URL - URL of the default icon for all push notifications sent from this integration. Either click the upload button to have Zaius host the image for you or manually specify the URL of an existing image (must be https).

Click Next Step to continue.

Google Chrome Authorization

If you have not already, create your Firebase project in the Google Firebase console. Once the project is created, go straight to the Settings > Cloud Messaging tab to get your Server Key and Sender ID required for this step.

Google Firebase Console

Configure Google Chrome

Step 2 - Setup Browsers

On step 2 of the Zaius Web Push Integration, click the switch to enable Google Chrome, then enter the Sender ID and Server Key from your Firebase Project:

  • Sender ID - The unique number assigned to your Firebase project. This can be found in the Cloud Messaging tab of the Firebase console Settings pane.
  • Server Key - The server key that authorizes Zaius to send Chrome push messages on your behalf. This can be found in the Cloud Messaging tab of the Firebase console Settings pane.

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.

Customize the Experience

Step 3 - Customize the experience

On step 3, customize your customer's opt-in experience. Click through the tabs to configure the panel that will be displayed on your website for users that have not yet subscribed for web push notifications.

Under the gear tab, you have the following options:

  • Position - Whether the subscription UI should attach to the bottom-left or bottom-right of the screen.
  • Show Delay - The amount of time to wait after the page loads before showing the subscription UI.
  • Popup Frequency - The minimum time to wait between automatic popups of the subscription UI (only occurs on page load). This is is specific to the subscribe UI and it controls how often it will pop back up and ask for permission to send notifications to the user if they don't interact with it at all.
  • Minimize Delay - The amount of time to wait after popup of the subscription UI before automatically minimizing.
  • Cancel Duration - The minimum time to wait before showing the subscription UI again after the cancel link has been clicked (only occurs on page load).

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

Click Save & Continue when you are finished.

Install & Verify

Step 4 - Install

If you are configuring Web Push for your Shopify site, click Shopify and follow the instructions to authorize the Zaius App to server the required files on your site.

If your website is not using Shopify, you will need to download the files and upload them to the ROOT of your 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.

You will also need to make sure the JavaScript Tag is implemented on all pages of your website, preferably in the header section. You can find this by going to Settings > Integrations > JavaScript Tag.

Once you have uploaded the files to your website or authorized Zaius in Shopify, click Verify & Continue. The Zaius App will check for the files on your website and let you know if they are not installed correctly.

Go Live

Step 5 - Go Live

If you are ready to enable web push now, toggle the "Automatically initialize web push on this site" and click Finish. If you are performing a manual web push integration or wish to enable web push at a later time, you can click finish without enabling the automatic integration. You can return to this step at any time to change your website's behavior.

Success

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

Verify

Custom Subscribe Experience

To have a fully customized subscribe experience, you can check out the Web Push API integration docs.

Did this answer your question?