> For the complete documentation index, see [llms.txt](https://doc.batch.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.batch.com/developer/sdk/web/getting-started/javascript-snippet.md).

# Adding the JavaScript snippet to your page

### Standard setup

The snippet below allows you to:

* Respect [best practices regarding collect on Mozilla Firefox](/developer/technical-guides/how-to-guides/web/how-to-trigger-the-native-notification-permission-prompt-on-firefox-and-safari.md) 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*).

<figure><img src="/files/HuNkoaLyFQvg8kzfd5Lq" alt="Batch dashboard showing: go to Settings (1) → Channels (2) → Push (3), then switch to Web in the Push configuration (4). Finally, click Get the code."><figcaption><p>Website Push configuration</p></figcaption></figure>

```html
<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](/files/ZUn8b2M9bMrSPJXk9KHv)

See more customization options [here](/developer/sdk/web/ui-components.md).

#### 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](/developer/sdk/web/advanced/manage-domains.md).

{% hint style="info" %}
Reach out to our team if you have any question regarding the best integration for your goals.
{% endhint %}

### Alternative integrations

* [I can't upload the service worker to the root of my website](/developer/sdk/web/advanced/declare-path-service-worker.md#uploading-the-service-worker-to-a-folder-of-your-website)
* [Integrating Batch with an existing Service Worker](/developer/sdk/web/advanced/integrating-batch-with-existing-service-worker.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://doc.batch.com/developer/sdk/web/getting-started/javascript-snippet.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.