Sometimes websites contain a lot of different information so that the user could easily overlook the Webchat Toggle Button. However, to draw the user's attention to the virtual agent, a proactive welcome message or a preview of the chat can be shown:

In the example shown above, the Cognigy Webchat presents a so-called Engagement Message after a delay of two seconds. As soon as the user reacts to this action, and opens the webchat, the conversation could start.

In addition to that first "Call to Action" (Engagement Message), the Webchat could display a badge with the number of unread messages as well:

With this second information, the user can see how many, possible interesting, messages are in the closed chat. However, the user does not see this preview and badge when their are in another opened browser tab.

In order to display the information about unread messages in the other tab, the window's title can be changed with another setting:

Last but not least, a notification sound could be enabled, sot that the user gets the visual and audible information.

How to

In the Webchat Widget documentation, one can find the Endpoint Settings, that need to be used in order to enable the above features. Finally, the embedded code in the HTML file could look such as the following:

 <script>

   initWebchat("...",{
     settings: {

       // Show a teaser message after 2 seconds
       engagementMessageText: "Hey, may I help you?",
       engagementMessageDelay: 2000,
       enableUnreadMessagePreview: true,

       // Show a red badge with the number of unread messages
       enableUnreadMessageBadge: true,

       // Show a notification in the browser title
       enableUnreadMessageTitleIndicator: true,

       // Play a notification sound
       enableUnreadMessageSound: true
     }
   });
 </script>

React to the teaser (Engagement) message

In some scenarios, it could be of interest to trigger another function or render another web component as soon as the engagement message is displayed on the screen. For this behavior, the Analytics API can be used in the callback of the initWebchat() method.

<script>
  initWebchat(...).then((webchat) => {
    // Register the Analytics Service for the Analytics API
    webchat.registerAnalyticsService((event) => {
      if (
        event.type === "webchat/incoming-message" &&
        event.payload.source === "engagement"
      ) {
        // TODO: React to the displayed engagement message
        document.body.append("engagement message was triggered");
      }
    });
 });
</script>