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:


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


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!
This message is shown without starting a new conversation on the back end ✅
The conversation only starts when you press the Get Started button.

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(
const introElement = document.getElementById("webchatIntro");
const chatStarted = document.getElementsByClassName(

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



Article is closed for comments.

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