You can use the JavaScript functions below to effectively manage the display of the subscription and action confirmation options (example: "You are a subscriber!") on your website.
* You will need the technical person responsible for your site to perform some of the steps in this article.
 Prerequisite | Have access to the code of your site. |
How to
Display the subscription request
Function that allows you to trigger the authorization request in your browser. Previously identified visitors who have allowed notifications in their browser will be eligible for web push.
- Integrate the subscription request on your website on a clickable element such as a button, an image, a link, etc.
We recommend that you let the visitor perform the action of requesting, instead of displaying the request automatically upon visit. - Add the following function:
DI.WebPush.RequestPermission("language code");The language code must be the 2 character code corresponding to the subscription language. This code is shown next to each language you have selected in the Configuration section (see Configuring the use of web push notifications).
Examples//Example after the webpage has been loaded : //This example is not supported by Firefox, you can use one of the two examples below. <body onload="DI.WebPush.RequestPermission('fr');"> //Example on a text link: <a href="#" onclick="DI.WebPush.RequestPermission('en');">I wish to receive notifications</a> //Example on an image: <img src="image.jpg" onclick="DI.WebPush.RequestPermission('en');" alt="I wish to receive notifications" />
Identify a contact
Function that lets you identify subscribers, if you already have data on them. For example, if your website allows visitors to connect to it, then you already have some information on them like their email, first name and last name.
It is also possible to identify subscribers to your project contacts by sending an email (via the injection rules) (see Identifying anonymous subscribers).
- Use the right information to call the following function:
DI.WebPush.Identify("f_FieldCode", "Value"); - Replace f_FieldCode by the code of the field primary key. You can find this information in the article about configuring fields in your project.
- Replace Value by the value to search for in contact profiles in your project.
Examples//Example when the email is the primary key: DI.WebPush.Identify("f_EMail", "[email protected]"); //f_EMail is just an example; check what the right code is in the configuration of your project fields. //Example when the client number is the primary key: DI.WebPush.Identify("f_NoClient", "123456789"); //f_NoClient is just an example; check what the right code is in the configuration of your project fields. //Example with two primary keys: DI.WebPush.Identify("f_EMail", "[email protected]", "f_NoClient", "123456789"); //f_EMail and f_NoClient is just an example; check what the right code is in the configuration of your project fields.
Check if a browser is supported
Function that checks if the browser supports web push and if it is supported by Dialog Insight.
Simply add:
if(DI.WebPush.isSupported()){
//This function will return boolean value true if the browser supports them and false if it does not support them.
}Tip: Display the subscription request on your website only if the browser supports web push.
Check if the visitor has authorized notifications
Function that checks if the visitor has authorized web push in his browser.
Simply add:
if(DI.WebPush.isSubscribed()){
//This function will return boolean value true if the visitor is a subscriber and false if he is not a subscriber.
}Tip: Do not display the subscription request if the visitor is already a subscriber.
Check if the visitor has blocked notifications
Function that checks if the visitor has blocked web push on the website.
Simply add:
if(DI.WebPush.isBlocked()){
//This function will return boolean value true if the visitor has blocked them and false if he has authorized them.
}Tip: Do not offer web push if the visitor has blocked them.