Adding the JavaScript snippet to your page

Standard setup

The snippet below allows you to:

• Respect best practices regarding collect on Mozilla Firefox and Chromium based browsers,
• Personalize custom alert message and buttons

To get a personalized tag, including your own setup information (as API keys or safari set-up object), click on the Get the code button (⚙️ Settings → Channels → Push → Push configuration Web).

Website Push configuration

<script type="text/javascript">

(function(b,a,t,c,h,e,r){h='batchSDK';b[h]=b[h]||function() {
    (b[h].q=b[h].q||[]).push(arguments)};e=a.createElement(t),r=a.getElementsByTagName(t)[0];
    e.async=1;e.src=c;r.parentNode.insertBefore(e,r);})(window,document,'script','https://via.batch.com/v4/bootstrap.min.js');

var batchSDKUIConfig = {
    native: {}
};

/* Use a specific configuration for Firefox and Safari browsers (custom prompt) */
if (navigator.userAgent.indexOf("Firefox") !== -1 || (navigator.userAgent.indexOf("Safari") !== -1 &&
navigator.userAgent.indexOf("Chrome") === -1)) {
    batchSDKUIConfig = {
        alert: {
            text: "Get notified about updates!", // TODO 🔶 Update to contextualize subscription request
            positiveSubBtnLabel: "Subscribe", // TODO 🔶 Update positiveSubBtnLabel value
            negativeBtnLabel: "No thanks", // TODO 🔶 Update negativeBtnLabel value
            positiveBtnStyle: {
                shadow: true,
                backgroundColor: "#3996bb", // TODO 🔶 Update button color
                hoverBackgroundColor: "#289e9c", // TODO 🔶 Update button hover color
                textColor: "black" // TODO 🔶 Update button text color
            }
        }
    }
}

/* Finalize the Batch SDK setup */
batchSDK('setup', {
    apiKey: 'A2F106415282499FACJE83M281F943F8',
    subdomain: 'batchtest',
    authKey: '2.kMo10GzeBVIgUDnlADeuIIbq0ud0+BaYLzjEZyK99Eo=',
    vapidPublicKey: 'BJ1gQdN6x2j0WjCQIqlLHyx00TrXM3LPoJugVoT6fGedCFyk0LOYX3Z0ki1OyKI/ajkouunydmSyM2mCX4dnuxQ=',
    ui: batchSDKUIConfig,
    safari: {"https://mywebsiteurl.com":""}
});

/* Optional: override user country/language */
/*
batchSDK(async api => {
    const profile = await api.profile();
    await profile.edit(editor => {
        editor
            .setLanguage("en") // TODO 🔶 set user language
            .setRegion("EN") // TODO 🔶 set user country
    })
});
*/

/* Optional: Log in */
/*
batchSDK(async api => {
    const profile = await api.profile();
    await profile.identify({customId: "custom_user_id"}); // TODO 🔶 set user Custom User ID
});
*/

/* Optional: Log out */
/* 
batchSDK(async api => {
    const profile = await api.profile();
    await profile.identify(null);
});
*/
</script>

Custom alert setup details

Using the snippet above, the custom alert will only be displayed on Mozilla Firefox and Safari on MacOS. The native opt-in request will be displayed on other browsers.

Custom alert setup

See more customization options here.

Where to implement the JavaScript snippet?

Optimize performance

The tag should be implemented at the end of the body, so it doesn't block any other script.

Note that browsers directly manage the download and installation of the service worker asynchronously so it doesn't affect performance.

Trigger the subscription request at the right moment

In most cases, the JavaScript tag should be implemented on every page of your website that belong to the same domain. It allows users to be exposed to the opt-in request regardless of the origin of the traffic (organic, newsletter...). Alternatively, you can also choose to scenarize the opt-in request, after users perform a specific action.

Domains and subdomains management

Usually, the JavaScript tag should only deployed on your main domain (no other domain or subdomain) to eliminate risks of duplicate notifications.

If you want to integrate Batch on several domains or subdomains, check the dedicated section of the documentation Domains and subdomains management.

Reach out to our team if you have any question regarding the best integration for your goals.

Alternative integrations

• I can't upload the service worker to the root of my website
• Integrating Batch with an existing Service Worker