Website

Please get in touch with [email protected] to get an access token

Installing push notifications on your website is very simple. It only takes two steps:

Please add the following script to all pages of your website.
We’ll provide the accessToken and projectId from the InTarget team:

<script type="module">
  import { InTargetMessaging } from 'https://api.intarget.app/intarget-messaging.js';
  
  const projectConfig = {
    projectId: '',
    playerId: ''
  };
  const accessToken = '';
  
  try {
    const messaging = new InTargetMessaging();
    await messaging.init(projectConfig, accessToken);
  } catch (error) {
    console.error("Failed to initialize InTarget Messaging:", error);
  }
</script>

Replace 'accessToken' and 'projectId' with the values we’ll send you.

If you send an empty player ID, we will save the token as an unregistered user. As soon as the ID appears, the token will be transferred to the registered user, and the guest will be deleted.

2. Please create a file named firebase-messaging-sw.js in the root directory of your project with the following content:

importScripts('https://api.intarget.app/intarget-messaging-sw.js');

Inside InTarget, you can send push notifications to all unregistered users without the possibility of segmentation (except for the platform).

How to Customize the Texts of the Push Modal

The subscription modal and the helper hint come with default English text. If you want to translate them, match your brand voice, or rephrase the call to action, you can override any of them by passing a texts object as the third argument to messaging.init().

<script type="module">
  import { InTargetMessaging } from 'https://api.intarget.app/intarget-messaging.js';

  const projectConfig = {
    projectId: '',
    playerId: ''
  };
  const accessToken = '';

  try {
    const messaging = new InTargetMessaging();
    await messaging.init(projectConfig, accessToken, {
      texts: {
        'subscribe.message': 'Subscribe to our notifications to get all latest updates',
        'subscribe.allow':   'Allow',
        'subscribe.decline': 'No thanks',
        'helper.title':      'Get latest news from us!',
        'helper.body':       'Press the icon to allow notifications',
      },
    });
  } catch (error) {
    console.error("Failed to initialize InTarget Messaging:", error);
  }
</script>

Available keys

Key	Default value	Where it appears
`subscribe.message`	`Subscribe to our notifications to get all latest updates`	Main message inside the InTarget subscription modal
`subscribe.allow`	`Allow`	Confirm button in the subscription modal
`subscribe.decline`	`No thanks`	Decline button in the subscription modal
`helper.title`	`Get latest news from us!`	Title of the helper hint shown next to the browser's native permission prompt
`helper.body`	`Press the icon to allow notifications`	Body of the helper hint that guides the user to click Allow on the native browser prompt

Things to know

The subscription modal is the InTarget UI shown to a visitor first. The helper hint appears afterwards, alongside the browser's native permission dialog (the one with the system-level Allow / Block buttons), to nudge the user toward enabling notifications.
You can override any subset of these keys — anything you don't include keeps its default value.

How to Customize the Style of the Push Script Modal

If you want to customize its appearance to better match your website design, you can easily override the default styles using CSS.

Below is an example of how to style the push modal using custom CSS:

/* Main container styling */
#pushSubscribeContainer {
    background: #715DE3 !important;
    border: 1px solid #715DE3 !important;
    color: #fff !important;
}

/* Change SVG icon color */
#pushSubscribeContainer svg {
    fill: #fff !important;
}

/* "No" button styling */
#pushSubscribeButtonNo {
    background-color: #715DE3 !important;
    color: #fff !important;
}

/* "Yes" button styling */
#pushSubscribeButtonYes {
    background-color: #fff !important;
    color: #715DE3 !important;
}

Notes:

The !important rule is used to ensure that your custom styles override the default ones provided by the push script.
You can replace the colors (#715DE3, #fff) with any values that fit your brand.

Where to Add This Code:

Place this CSS in your website’s stylesheet or in a <style> tag in your site’s <head> section.

Push Notifications