To be able to send web push notifications from the Dialog Insight application, you must first identify and configure the website for which you want to display notifications. You will then be able to create Web Push notifications.
Prerequisites
- Create a Firebase Cloud Messaging authorization
- Involve your IT team
- Have the URL for your website (must be HTTPS)
Step 1: Add the Website
First, go to Communications -> Push Notifications, then click Configurations (in the upper right under the 3 dots):
Click Add you website:
Add the URL of your website and indicate the languages of your website:
*Don't put the HTTPS at the beginning of the URL.
**It is essential to indicate the languages for which you plan to send notifications so that they will be available when creating notifications.
Step 2: Configure the Web Push Presentation
In the Presentation section, add your business' icon:
Step 3: Select a FCM Authorization
As mentioned at the beginning of this article, you must create a Firebase Cloud Messaging authorization that acts as a messenger between DI and your website.
Select the authorization and indicate the Sender ID:
Step 4: Integrate the Web Push on the Website
In the Code and file section, copy-paste the the entire code (script) on ALL the website pages where you want to display Web Push, inside the <head></head> tags, or just before the </body> tag. At the time of the update of this article, the most up-to-date version is 7.4.0. Click Download the file and copy-paste this file to the root of your website.
*If your website is on WordPress, install this WordPress plugin to insert the code on your website pages.
You must add an authorization request (a popup in the browser asking the website visitor to authorize the website to send notifications.
- 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.
//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"/>
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.
- Replace Valuewith the value to search for in contact profiles in your project.
//Example when the email is the primary key: DI.WebPush.Identify("f_EMail", "email@domain.com"); //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@domain.com", "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.
Function that checks if the browser supports web push and if it is supported by Dialog Insight.
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.
Function that checks if the visitor has authorized web push in his browser.
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.
Function that checks if the visitor has blocked web push on the website.
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.
Step 5: Test
Although this step is not mandatory, we strongly recommend performing it as it allows you to test the display of web push notifications on your website, but not on your own pages. The demo page is used to perform a test without affecting your own website's pages.
Here are some instructions for unsubscribing from notifications for a specific site:
- Chrome: Turn notifications on or off
- Firefox: Web Push notifications in Firefox
- Opera: Manage desktop notifications