Display a welcome message above the Start Button

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

webchat-start-button-welcome-message-example.PNG

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:

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

webchat-configuration-start-behvior-button.PNG

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 <script></script> 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) => {

// 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
}
});
});

Comments

0 comments

Article is closed for comments.

Was this article helpful?
1 out of 1 found this helpful