Web Push Popup

Prerequisites

The minimum requirements to use Webex Connect JavaScript SDK are:

ComponentRequirement
Apple Push NotificationAn APNS certificate, to enable Push Notification services.
Google Push NotificationA 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.

599

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:

OSChromeFirefoxSafari (Not Supported)
Windows Desktop (Version 7 ,8,10)YesYesNo
Mac OS X 10.11 (EI Captain)YesYesNo
Linux (Fedora 24)YesYesNo
iOS (9.x)NoNoNo
Android (5.x)YesNoNo

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/9.17.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.17.2/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.

  1. 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:
BrowserIDs
Chromechrome_pushid
Firefoxfirefox_pushid and key
Safarisafari_pushid
  1. 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:

  1. When the customers click Allow button, the push details are stored in the profile manager.
  2. Get the profiles based on appid using getAppProfile API. You will get all the browser-specific push ids.
  3. Use Messaging API, to send push messages to the push ids.