Custom buttons and Deep linking

2min
﻿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:
JS
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(" "));
        }
      }
    }
  }
});
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>.
Updated 04 Apr 2023
Did this page help you?
Website Theming
Website Advanced
Docs powered by Archbee
TABLE OF CONTENTS
Deep Linking
Engati Product Docs

Custom buttons and Deep linking

﻿Deep Linking﻿

Deep Linking
