By design, the user is always able to click on any Quick Reply button that is displayed in the current chat conversation in order to talk about the same topic again -- for example. However, in some cases these buttons shouldn't be visible anymore to actually avoid this behavior. In this case, an event listener can be added to the Webchat that hides the buttons as soon as the user clicked them.
Add the Event Listener to the Webchat
Since the "Text with Quick Replies" message uses multiple CSS classes, one can check if the user clicked on an element with one of these classes. We use the styling class in order to identify the DOM element.
// Register the event listener for 'click' events
document.addEventListener("click", (event) => {
// Loop through the clicked DOM pathes
for (let eventPathIndex in event?.path) {
// Check if the clicked DOM element has one of the Quick Reply classes
if (
[
"webchat-quick-reply-template-reply",
"webchat-quick-reply-template-replies-container"
].some((className) => event?.path[eventPathIndex]?.className?.includes(className))
) {
// Make the Quick Reply buttons invisible
event.target.parentNode.parentNode.style.display = "none";
}
}
});
The code could be easily added above the Webchat Embedding initWebchat() function.
Result
Comments
0 comments