Skip to main content
All CollectionsGetting startedWeb Push implementation
How can I integrate web push into my website?
How can I integrate web push into my website?

Here is a simple step-by-step guide on how to integrate Batch into your website in less than 30 minutes.

Baptiste avatar
Written by Baptiste
Updated over 10 months ago

Integrating Batch into your website is simple. 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, you can send push notifications with images, and more!

1. Account Creation

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

We recommend you to invite your team members from the account manager section.  In the bottom left corner of your dashboard, in "Manage Team" → "Invite user".

2. Basic Setup

Step 1. Upload the service worker

If all your content is served via the same HTTPS domain, then you must upload Batch's Service Worker to the root of your website (e.g. https://mywebsite.com/batchsdk-worker-loader.js):

🚧 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.

Step 2. Add the JavaScript tag 

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

Batch automatically generates that 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" → "Push Settings" → "Get the code":

Note:

If you want web push integration to include Safari, you will need to follow a few additional configuration steps before generating the Javascript tag.

Step 3. Test your integration

That's it!

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.

3. Optional Optimizations

Custom User ID

Batch can collect a unique user ID (see documentation) that will be attached to your user installation. 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 that Custom user ID with:

  • The Transactional API, to send 1-to-1 push notifications to one or several user IDs (e.g. package delivery notification, etc) ;

  • The Custom Data API, sends custom data (attributes or tags) 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 custom audiences)

Custom Language/Region

Batch automatically detects the language and the country of your user’s browser. If users can select a region or a language from your website, we recommend you overwrite the values automatically detected by Batch (see documentation).

Opt-in Scenario

You can determine when the permission prompt should be triggered. On Chrome, you can show that permission prompt 3 times a week (more information here).

You can also use one of Batch pre-permission prompts if you don't want to show the native prompt the first time users visit your website (know more here).

You can choose between three different formats:

  • An alert (default)

  • A banner

  • A button

4. Optional APIs Setup

With Batch RESTful APIs you can easily send custom data and push notifications to take advantage of Batch’s advanced features from your own systems.

There are several APIs you can use in your app to cover all your marketing needs:

  • The Custom Data API sends custom data on specific custom user IDs and improves your campaign targetings.

  • The Custom Audience API sends Batch lists of user IDs for your push and In-App campaign targeting. Your own segmentation will then be available on the dashboard as a Custom Audience.

  • The Transactional API allows you to send notifications to a specific token or custom user ID based on events in your back-end (e.g. "You have a new friend request").

  • The Push Campaigns API or the In-App Campaigns API sends push notifications in mass to your users or schedules In-App campaigns remotely (e.g. from a CMS, etc).

  • 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.

Need Assistance?

Our technical team is reachable via the “live chat” in the bottom right corner of every page of the dashboard (median response time lower than 3 minutes from 9 am to 7 pm on working days).


This article belongs to Batch's FAQ. Need more help? Find insightful articles, documentation, case & market studies, guides, and even more in our website's Resources section on batch.com and our blog.

Did this answer your question?