Set up website notifications

Ada supports push notifications for your website using FCM. Website notifications appear in the chatter's browser. For example:

Before you begin:

• Make sure your website is capable of pushing notifications using FCM
• Set up an FCM client for your website
• Learn how to access a device token

Browser support

The table below shows mobile and desktop browser support. The number in parentheses is the lowest version supported by the FCM client.

Register a chatter's device

For Ada to send web notifications to a chatter on your behalf, there must be a device token to identify the chatter. The device token behaves like an address to which FCM can deliver notifications.

This device token is not used by Ada until the chatter opts in to receive notifications on their device. After a chatter opts in, they will receive notifications on the registered device when any of the notification triggers occur.

To send the device token to Ada, update your FCM client with code similar to the example below.

import { getMessaging, getToken } from "firebase/messaging";

getToken(getMessaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (currentToken) {
    // add this code to send the device token to Ada
    adaEmbed.setDeviceToken(currentToken);
  }
})

Customize notifications

The FCM client will receive the data required to create the notification such as the title, body and icon. To learn more about customizing notifications, click here.

The snippet below shows the code that is executed in the FCM client when a notification from Ada is pushed to the registered chatter. The chatter's browser listens for the notification and will combine the notification title and body data from Ada with your customizations.

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  // Customize notification here
  const { notification, data } = payload;
  const notificationTitle = notification.title;

  const notificationOptions = {
    body: notification.body,
    icon: 'https://your-site.com/your-logo.png'
    data,
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

Source

Customize browser behavior

The FCM client provides the ability to customize what happens when a chatter interacts with a browser notification. The typical behaviour is for the browser to open the tab with the chat window embedded on it. This allows the chatter to pick up where they left off.

The example code below illustrates how you can customize this behavior, using a notificationclick event listener, and a couple of conditions to make sure that the notification received by the browser is from Ada.

Once it's confirmed that the notification is from Ada, the page with the bot embedded on it is notified using the postMessage function. This way, the bot opens immediately when the chatter clicks the notification.

// firebase-messaging-sw.js
self.addEventListener("notificationclick", (event) => {
  const { notification } = event;
  const { data } = notification;

  // check if the notification is from Ada
  const isNotificationFromAda = data["gcm.notification.source"].toLowerCase() === "ada";

  const handleNotificationClick = async () => {
    notification.close();

    if (isNotificationFromAda) {
      const [openedClientTab] = await clients.matchAll({
        includeUncontrolled: true,
        type: "window",
        url: data.initialUrl
      });

      if (openedClientTab) {
        // let the embedded bot know that the notification has been clicked
        openedClientTab.postMessage({ "type": "ada:web_notification:click" });

        // switch to the tab/window
        return openedClientTab.focus();
      } else {
        // returns the chatter to your site if the tab had been closed
        const newClientTab = await clients.openWindow(data.initialUrl);
        newClientTab.postMessage({ "type": "ada:web_notification:click" });
        return Promise.resolve();
      }
    }
  };

  event.waitUntil(handleNotificationClick());
});