Disable the message input field

In some cases, it could be helpful to disable the message input field of the webchat temporarily. For instance, the user must press a Quick Reply button instead of writing a text message.

The input field is disabled while the Quick Reply message is present.

Inside of Cognigy.AI

In a Flow, one can output the Text with Quick Replies output type in the Say Node and, afterward, use a typical Text type in order to configure the Webchat Widget. An example can be seen in the image below:

The only thing that needs to be sent is the so-called DATA_ONLY message consisting of any kind of defined boolean value. In this case, the value disableInput equals true (disable the input field) or false (display the input field). 

while the used data input could be defined as:

{
  "disableInput": true
}

Configuring the Webchat

On the Webchat end, this data message needs to be processed in order to manipulate the current Webchat design with CSS. Please find the example code in the block below:

<script>

  // Initialize the Webchat to be displayed on the website
  initWebchat("...").then((webchat) => {

    // Initialize the Analytics API
    webchat.registerAnalyticsService((event) => {

      if (event.type === "webchat/incoming-message") {
        const { payload } = event;
        const { text, data } = payload;

        // Check if the disableInput boolean was sent in the data of the Say Node
        if (data.disableInput) {

          // Hide the webchat-input field
          document.querySelector("[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input").style.display = "none";

        } else {
          // Display the webchat-input field
          document.querySelector("[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input").style.display = "initial";
        }
      }
    });
  });
</script>