Getting Started with Web Push

  • 1 minute(s) read
Prev Next

Introduction

Web Push lets you reach website visitors directly in their browsers, improving reach and engagement with timely, permission-based notifications. It works with or without Mapp Intelligence, and can be implemented via Tag Integration or JavaScript.

Prerequisites

  • Web Push is enabled on your website

  • Firebase account for push message delivery

  • Website JavaScript integration, including a Service Worker

  • Authorized SSL certificate for secure communication

  • (Optional) Mapp Intelligence account if you want to track engagement

  • Web Push is activated in your Mapp Engage account. Contact your Customer Success Manager or Account Manager to enable this feature.

  • Customer opt-in is required for displaying notifications.

  • Device registration with the Firebase Push service is necessary before receiving Web Push messages.

Please note you will need to speak with your Account Manager about setting up Web Push in your account. 

High-level Workflow

1 Technical Setup

1.1 With Intelligence

Use this setup if your website has Mapp Intelligence so that engagement with Web Push is tracked.

Documentation

Description

Step 1: Configuration Firebase and Service Worker

Configure Firebase and the Service Worker, which are the base for messaging.

Step 2: Configuring and Activating the Web Push Plugin

Configure and activate the Web Push plugin.

Step 3: Set up in Mapp Engage

Set up the channel in Mapp Engage.

1.2 Without Intelligence

Use this setup if you are not using Mapp Intelligence.

Documentation

Description

Step 1: Configuration Firebase and Service Worker

Configure Firebase and the Service Worker.

Step 2: Configuring and Activating the Web Push Script

Configure and activate the Web Push script on your page.

Step 3: Login of the user

Implement the user login call when a visitor lands on your site.

Step 4: Set up in Mapp Engage

Set up the channel and prepare a message in Mapp Engage.

2 Create a Web Push Notification

After the technical setup, create your notification in Mapp Engage. Use cases provided in the documentation include:

3 Monitor performance

Use Web Push channel statistics to view all notifications and see metrics for each send.

Documentation

Description

Web Push Channel Statistics

Provides an overview of all web push notifications, allowing you to see the statistics for each.

Related articles