Webchat v2: Disable Quick Reply buttons after click – Cognigy.AI Help Center
Webchat v2: Disable Quick Reply buttons after click
Cognigy Support
July 19, 2024
This article is intended for Webchat v2 users only. The feature Disable Quick Reply buttons after a click is already included in Webchat v3.
By design, users can click any Quick Reply button displayed in the current chat conversation to revisit the same topic. However, in certain cases, it may be necessary to disable these buttons to prevent this behavior. To do this, an event listener can be implemented in Webchat v2, disabling the buttons immediately after the user clicks on them. Additionally, if the endpoint only contains buttons and no text input, the text input should also be hidden when the buttons are triggered for a better user experience.
Add the Event Listener to the Webchat
Given that the Text with Quick Replies message uses multiple CSS classes, you can check if the user clicked on an element with any of these classes. The styling class is used to identify the specific DOM element.
<!DOCTYPE html>
<html>
<head>
<title>Disable postbacks after input</title>
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="/favicon.png" />
<style>
html {
background-color: #bbb;
}
</style>
</head>
<body>
<script src="https://github.com/Cognigy/WebchatWidget/releases/download/v2.42.0/webchat.js"></script>
<script>
const url =
"https://<your-cognigy-endpoint.tld>/<your-url-token>";
const settings = {
// userId: 'test',
// sessionId: 'test',
settings: {
disableBranding: true,
headerLogoUrl: "./favicon.png",
messageLogoUrl: "./message-icon.png"
}
};
initWebchat(url, settings).then((webchat) => {
window.cognigyWebchat = webchat; // Make the webchat object global, so it can be accessed from the console
webchat.open(); // Automatically open the webchat
webchat.registerAnalyticsService((event) => {
if (event?.type === "webchat/outgoing-message") {
const panel = document.getElementById(
"webchatChatHistoryWrapperLiveLogPanel"
); // Panel with the messages history
const activeQuickReplies = panel.querySelectorAll(
".webchat-quick-reply-template-root:not(.disabled)"
); // Quick reply messages, which have not been disabled yet
Array.from(activeQuickReplies).forEach((quickReply) => {
quickReply.classList.add("disabled"); // Add the disabled class, so that this quick reply is avoided the next time
quickReply.style.pointerEvents = "none"; // Remove all click handlers from the quick reply and its children, i.e. quick reply buttons
Array.from(
quickReply.querySelectorAll(
".webchat-quick-reply-template-reply"
)
).forEach((quickReplyButton) => {
quickReplyButton.style.color = "LightGrey"; // Change the quick reply styling, so the user knows it is disabled
quickReplyButton.style["border-color"] = "LightGrey";
quickReplyButton.tabIndex = "-1";
});
});
const activeTextWithButtons = panel.querySelectorAll(
".webchat-buttons-template-root:not(.disabled)"
); // Text with Buttons messages, which have not been disabled yet
Array.from(activeTextWithButtons).forEach((textWithButtons) => {
textWithButtons.classList.add("disabled"); // Add the disabled class, so that this quick reply is avoided the next time
Array.from(
textWithButtons.querySelectorAll(
".webchat-buttons-template-button"
)
)
.filter((button) => button?.role !== "link") // Only disable buttons which are NOT links, i.e. postbacks. Leave the link buttons active because they don't trigger the flow
.forEach((button) => {
button.style.pointerEvents = "none"; // Remove the click handlers from the button, so it does nothing when clicked
button.style.color = "LightGrey"; // Change the quick reply styling, so the user knows it is disabled
button.style["border-color"] = "LightGrey";
button.tabIndex = "-1";
});
});
}
});
});
// Hide the Open Sandbox button added by Code Sandbox
setTimeout(() => {
Array.from(document.body.querySelectorAll("iframe") )
.filter((iframe) => iframe.id.startsWith("sb__open-sandbox"))
.forEach((iframe) => {
iframe.remove();
const div = document.createElement("div");
div.id = iframe.id;
div.style.setProperty("display", "none", "important");
document.body.appendChild(div);
});
}, 300);
</script>
</body>
</html>