Display a welcome message above the Start Button – Cognigy.AI Help Center

Display a welcome message above the Start Button

Cognigy Support
July 7, 2022

In order to display a disclaimer on the Webchat, next to the Teaser Message, a custom content could be displayed above the Start button:

With this additional configuration in place, the user will be informed about the potential chat with the virtual agent without starting a new conversation.

Enable the "Start with a Button" Behavior

The first thing one has to configure in Cognigy.AI is the so-called Start-Behavior:

Inside of Cognigy.AI, navigate to Deploy -> Endpoints -> Webchat
Scroll down and open the Additional Settings section
Search for the dropdown called "Start Behavior"
Select "Start with a Button"
Click Save

Now the Webchat should display the above screen, without the custom content, as soon as one opens the Webchat by clicking on the toggle button on a website.

Add the custom content

The last required configuration is done on the client-side, namely on the website. Within the embedding code (between the two tags) of the Webchat Widget, one has to add the following:

Intro Text

The text/content that should be displayed above the Start button while it could be of format HTML:

const introText = `<p style='padding: 10px'>
   Welcome to the web chat intro message demo!
   <br/><br/>
   This message is shown without starting a new conversation on the back end ✅
   <br/><br/>
   The conversation only starts when you press the Get Started button.
   </p>`;

Display & Remove Function

For a more flexible implementation, it should be possible to either display and hide the content:

// Set to true after the intro text is removed when the conversation starts
let introRemoved = false;

const showIntro = () => {
  const canvasElement = document.getElementsByClassName(
    "webchat-chat-history"
  )[0];
  const introElement = document.getElementById("webchatIntro");
  const chatStarted = document.getElementsByClassName(
    "webchat-input-message-input"
  )[0];

// Add the intro element if the chat has not started yet, but do it only once
  if (canvasElement && !introElement && !chatStarted) {
    const helper = document.createElement("div");
    helper.setAttribute("id", "webchatIntro");
    helper.innerHTML = introText;
    canvasElement.parentNode.insertBefore(helper, canvasElement);
  }
};

const removeIntro = () => {
  const introElement = document.getElementById("webchatIntro");
  if (introElement) {
    introElement.remove();
    introRemoved = true;
  }
};

Initialize the Webchat and display content

Finally, the initWebchat() function has to make use of the above-created functions:

initWebchat("configUrl").then((webchat) => {
window.cognigyWebchat = webchat;
  // Use the Analytics API for better performance
  window.cognigyWebchat.registerAnalyticsService((event) => {
    if (!introRemoved && event.type === "webchat/open") {
      setTimeout(() => showIntro(), 100);
    } else if (event.type === "webchat/outgoing-message") {
      removeIntro(); // Hide the intro text on the first message from the user
    }
  });
});