Custom buttons and Deep linking

Deep Linking

We have exposed a few functions that customers can use directly on their websites to stimulate some actions.

• window.EngtChat.open() → Open the bot
• window.EngtChat.close() → Minimize the bot
• window.EngtChat.sendQuery('any string here') → Open the chat widget and trigger a path when a user clicks a specific button on the website.

To enable the deep linking feature without needing to call the above functions, we need to add a custom script for the customer’s bot from MA under display settings:



The custom script:

window.addEventListener("hashchange", (event) => {
  const locationHash = location.hash;
  if (locationHash) {
    const query = location.hash.substring(1);
    const prefix = query.split("-");
    if (prefix[0] === "engt") {
      if (locationHash === "#engt-chat-open") {
        window.EngtChat.open();
      } else if (locationHash === "#engt-chat-close") {
        window.EngtChat.close();
      } else {
        const [, ...message] = prefix;
        const elements = Array.from(
          document.querySelectorAll(`[href="${locationHash}"]`)
        );
        if (elements?.length) {
          if (elements[0]?.getAttribute("data-engtHashListener") !== "true") {
            elements.map((el, i) => {
              if (i === 0) el.setAttribute("data-engtHashListener", "true");
              el.addEventListener("click", () => {
                window.EngtChat.sendQuery(message.join(" "));
              });
            });
            window.EngtChat.sendQuery(message.join(" "));
          }
        } else {
          window.EngtChat.sendQuery(message.join(" "));
        }
      }
    }
  }
});

Now, customers can simply have anchor tags on their page with an href equal to one of the following to trigger certain things. Shopify customers can just add these href values to any element from their shopify portal itself:

#engt-chat-open : : clicking on an element with this href will open the bot.

#engt-chat-close : : clicking on an element with this href will close the bot.

#engt-<any faq here> :: clicking on an element with this href will trigger an faq on the bot.

For example, if the href is #engt-about-us, the message “about us” will be sent to the bot and it will execute any faq matching this query, so now customers can directly trigger any path in the bot by clicking on buttons/elements on their website by simply setting up an FAQ for the path and attaching the same faq to the href of any element on their website in this format #engt-<faq>.