Webchat v2: Disable Quick Reply buttons after click

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 a 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") {

            // The user has entered something, either manually or by clicking on a postback button

            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";

                // quickReplyButton.style.opacity = '0.6'

              });

            });

            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";

                  // button.style.opacity = '0.6'

                });

            });

          }

        });

      });

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

 

Result


Comments

0 comments

Article is closed for comments.

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