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 a 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
Add script to 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.
Integrate an authorization request
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. 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 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" />
Step 5: Test
Although this step is not mandatory, we strongly recommend to perform 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 notifications for a specific site:
- Chrome: Turn notifications on or off
- Firefox: Web Push notifications in Firefox
- Opera: Manage desktop notifications