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

It does not include the Safari setup object, which will be automatically generated on the dashboard depending on your configuration.

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 → Push settings → Website Push configuration).

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 = { // refer to the documentation to learn more https://batch.com/doc/web/ui-components.html
    native: {}
  }
    
  // Firefox and Safari specific configuration
  if ((navigator.userAgent.indexOf("Firefox") !== -1 || (navigator.userAgent.indexOf("Safari") !== -1) &&
navigator.userAgent.indexOf("Chrome") === -1))  {
    batchSDKUIConfig = {
      alert: {
        text: 'Subscribe to push notifications', //TODO 🔶 [1] Update to contextualize subscription request 
        positiveBtnStyle: {
          "backgroundColor":'[COLOR IN HEXADECIMAL]',// TODO 🔶 [2] update backgroundColor value
          "hoverBackgroundColor": '[COLOR IN HEXADECIMAL]'// TODO 🔶 [3] update hoverBackgroundColor value
          },
          positiveSubBtnLabel: 'I subscribe!',// TODO 🔶 [4] update positiveSubBtnLabel value
          negativeBtnLabel: 'No, thanks'// TODO 🔶 [5] update negativeBtnLabel value
          }  
      }
  }
  // end Firefox and Safari specific configuration
  
  batchSDK('setup', {
    apiKey: '',  // TODO 🔶: Use the SDK API Key of your website (see Settings section of your dashboard)
    subdomain: '', // TODO 🔶: Use the Subdomain name of your website (see Settings section of your dashboard, do not include the ".via.batch.com" part)
    authKey: '', // TODO 🔶: Use the SDK Auth Key of your app (see Settings section of your dashboard)
    dev: true, // remove this for prod
    vapidPublicKey: '', // TODO 🔶: Use the vapidPublicKey of your website (see Settings section of your dashboard)
    ui: batchSDKUIConfig,
    // Add the generated Safari object here if applicable
  });
</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