How to implement Web Push with Batch?

Welcome to Batch!

Batch allows you to send push notifications directly to web browsers on desktop and mobile. They allow you to re-engage your users, even if your website is closed. After a 30-minute setup, you will be able to push them directly from your website without making them install your app. And just like native applications, web push notifications can include rich content.

A full integration is divided into five steps:

1. Account creation - Required

2. SDK integration - Required

3. Opt-in optimisation - Optional

4. Profile data collection - Optional

5. Test and release - Optional

6. APIs setup - Optional

1. Account Creation

You can create an account now on https://batch.com/register.

We recommend that you invite your team members from the account manager section, in the bottom left corner of your dashboard, under "My team" > "Add member".

Feel free to contact us at [email protected] if your account is not on the correct plan.

2. SDK integration

Once your account is created, add your website to the dashboard.

You will find all the technical details on the integration in the documentation:

1

JavaScript Tag

Get the tag: Batch automatically generates the JavaScript tag when you add your website to the dashboard. You will find it by clicking the "Integrate" button in the top right corner or in "Settings" → "Channels" → "Website" → "Get the code".

Add the JavaScript tag to the code of your web pages. This can be done manually or using a Tag Manager (e.g., Google Tag Manager).

2

Service Worker

Download and upload the Service Worker to the root of your website.

Alternative integrations:

• If you cannot upload the Service Worker at the root of your website, you need to declare its path (see documentation)

• If your website is already using a service worker, you will need to take the steps described here in the documentation.

Take these two extra steps to perform a full integration of Batch:

• Icons: Set up a default and a small icon to ensure notifications are displayed correctly (know more here).

• Opt-in optimisation: Customise the pre-permission prompt that will allow you to collect your users' tokens.

The integration may vary if you integrate Batch into a Progressive Web App.

3. Opt-in optimisation

To maximise the chances that your users subscribe to notifications, we built multiple ways of asking for permission (know more here).

You can choose between three different formats:

• An alert

• A banner

• A button.

In case you don't want to use Batch's formats, you can trigger the native prompt of each browser. That permission request can be shown 3 times a week.

4. Profile data collection

In addition to the data the SDK collects natively on your website, you can collect profile data to improve your segmentation.

Custom User ID

Batch lets you track a unique user ID (see documentation) that will uniquely identify user Profiles and centralize profile data from attached devices. This is a recommended step if your website has a login wall or if users can create an account on your website.

You can use the Custom user ID with:

• The Campaigns API, to send push notifications in mass to your users remotely (e.g., from a CMS, etc). ;

• The Profile API, sends custom data (attributes and events) to Batch on a user ID server-side.

User ID collection also allows your teams to:

• Target logged-in / logged-out users (see has custom user ID)

• Upload static segments exported from your userbase (e.g., top 500 buyers, etc) or created by third-party tools (see Audiences)

Custom Language/Region

Batch automatically detects the language and the country of your users’ browser. If your website is available in multiple languages and/or multiple countries, we recommend that you overwrite the values automatically detected by Batch (see documentation).

5. Test and release

You should see a push permission prompt the next time you visit your website. We recommend you try sending a test notification to your browser after accepting push notifications: How to test my web push integration?.

Once the integration is completed, the JavaScript tag can be released. Batch will start collecting your users’ tokens, and you will be able to send your first notifications from the dashboard.

6. APIs Setup

With Batch RESTful APIs, you can easily send profile data and trigger push notifications to leverage Batch’s engagement features:

• The Profile API allows you to create and enrich user profiles with profile data such as attributes, events, and arrays. This data can then be used to create segments or trigger messages.

• The Audience API allows you to send lists of user IDs. Your segmentation will then be available on the dashboard as an Audience.

• The Campaign API allows you to send one-shot push notification campaigns to your segments built based on chosen criteria.

• The Exports API allows you to retrieve your campaigns' performance data to feed your analytics or BI tools with more insights.

• The GDPR API requests a data report containing a specific user's data or triggers the removal of the user's data.

Depending on the use cases you plan to set up, we can help you through the use of these APIs.