Web Push Popup
Prerequisites
The minimum requirements to use Webex Connect JavaScript SDK are:
| Component | Requirement |
|---|---|
| Apple Push Notification | An APNS certificate, to enable Push Notification services. |
| Google Push Notification | A FCM certificate, to enable Push Notification services. |
| Account | A valid Google developer account A valid iOS developer account * An active account on Webex Connect platform |
Web Push Popup
To send web push notifications, the client website must be configured to show the popup. The pop-up appears when the customers navigate to the website. When the customers accept to receive web push notifications, a service worker is created in the browser's background. The service worker constantly listens to the push messaging server and shows the notification even when the website is closed.
Private Browsing Mode
Web push notifications are not supported in private browsing mode.
Note
At this time, Safari web push notifications are not supported. Our development team is aware of this issue and is actively working on a solution to enable push notifications in Safari. Please stay tuned for updates in the upcoming releases.
Sample Notifications
Option to download SDK initialization config file from web app asset configuration page
The JavaScript SDK will have a single file containing all configurations required to initialize the SDK.
Web push notifications are supported on the following OS and browsers:
| OS | Chrome | Firefox | Safari (Not Supported) |
|---|---|---|---|
| Windows Desktop (Version 7 ,8,10) | Yes | Yes | No |
| Mac OS X 10.11 (EI Captain) | Yes | Yes | No |
| Linux (Fedora 24) | Yes | Yes | No |
| iOS (9.x) | No | No | No |
| Android (5.x) | Yes | No | No |
For example, to request a Web Push permission, copy and paste the script from the code below into your .html file. This will register a user with an ID. Once the user is registered, the JS SDK will automatically request permission to send notifications. For Live Chat/In-App messages sample codes, please refer to the section Javascript SDK QuickStart Guide
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-messaging-compat.js"></script>
<script src="assets/js/aes.js"></script>
<script src="assets/js/imi-environments.js"></script>
<script src="assets/js/IMIClient.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/mqttws31.js"></script>
</head>
<body>
<script>
IMI.IMIconnect.startup();
function register(userID) {
console.log("register", userID);
var deviceID = new Date().getTime(); //any random no.
var deviceProfile = new IMI.ICDeviceProfile(deviceID, userID);
var registerCallback = {
onSuccess: (data) => {
console.log('success', data);
},
onFailure: (err) => {
console.log('Error:', err);
},
};
IMI.IMIconnect.register(deviceProfile, registerCallback);
}
register(1); //registers user with ID 1 and requests for push permission.
</script>
</body>
</html>
If you are upgrading from a previous version of JS SDK, please clear browser Application Data and Reset Permissions.
Now the web push configuration is complete to display a popup when the default web page is loaded.
- When the web page is loaded a popup appears. When a user clicks on Allow, unique ids are generated and stored in the profile manager. The ids generated are:
| Browser | IDs |
|---|---|
| Chrome | chrome_pushid |
| Firefox | firefox_pushid and key |
| Safari | safari_pushid |
- To send messages without a customerid, you must use browser-specific pushids.
Sending Push Messages to Customers
You can send push messages to customers in many methods. Below is one of them:
- When the customers click Allow button, the push details are stored in the profile manager.
- Get the profiles based on appid using getAppProfile API. You will get all the browser-specific push ids.
- Use Messaging API, to send push messages to the push ids.
Updated 9 months ago