Adding the JavaScript snippet to your page

Standard setup

The snippet below allows you to:

<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/v2/bootstrap.min.js');
    
  var batchSDKUIConfig = { // refer to the documentation to learn more https://batch.com/doc/web/ui-components.html
    native: {}
  }
    
  // Firefox specific configuration
  if(navigator.userAgent.indexOf("Firefox") !== -1) {
    batchSDKUIConfig = {
      alert: {
        icon: '',//TODO 🔶 [1] Update to use your own defaultIcon, see required format here https://doc.batch.com/web/sdk-integration/initial-setup#default-icon
        text: 'Subscribe to push notifications', //TODO 🔶 [2] Update to contextualize subscription request 
        positiveBtnStyle: {
          "backgroundColor":'[COLOR IN HEXADECIMAL]',// TODO 🔶 [3] update backgroundColor value
          "hoverBackgroundColor": '[COLOR IN HEXADECIMAL]'// TODO 🔶 [4] update hoverBackgroundColor value
          },
          positiveSubBtnLabel: 'I subscribe!',// TODO 🔶 [5] update positiveSubBtnLabel value
          negativeBtnLabel: 'No, thanks'// TODO 🔶 [6] update negativeBtnLabel value
          }  
      }
  }
  // end Firefox specific configuration
  
  batchSDK('setup', {
    apiKey: '',  // TODO 🔶: Use the API Key of your website (see Settings section of your dashboard)
    subdomain: '', // TODO 🔶: Use the subdomain of your website (see Settings section of your dashboard)
    authKey: '', // TODO 🔶: Use the authKey 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)
    defaultIcon: 'https://secure.url.to.your.icon.png', // TODO 🔶: Update to use your own defaultIcon, see required format here https://doc.batch.com/web/sdk-integration/initial-setup#default-icon
    smallIcon: 'https://secure.url.to.your.icon.png', // TODO 🔶: Update to use your own smallIcon, see required format here https://doc.batch.com/web/sdk-integration/initial-setup#default-icon
    ui: batchSDKUIConfig
  });
</script>

Custom alert setup details

Using the snippet above, the custom alert will only be displayed on Mozilla Firefox. 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.

Icons format

Default Icon

Configuration key: defaultIcon (optional).

Should be a square image (JPG or PNG), with an recommended size of 192x192 pixels. You can go as low as 80x80, but making it too big or too small will result in a pixellated display. It can contain color and be of any shape you want. If you don't specify it, Chrome users will see a white square instead of what could have been your logo.

Small Icon

Configuration key: smallIcon (optional).

This is the icon your users will see on their Android devices when they receive a push notification.

It has a recommended size of 96x96 pixels, and will act as a mask, meaning that it will only use the alpha channel of your image and will color the resulting shape. If you don't specify it, users will see the Chrome logo instead of your website logo. You can easily create one using the Android Assets Studio. As of writing, Firefox does not support this feature.

required small icon

Alternative integrations