Skip to main content

Push Notifications

These instructions describe how to setup Push Notifications

Updated over 3 months ago

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:

  1. 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 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.

Did this answer your question?