Engati Product Docs

⌘K
Engati - User Guide
Getting started with Engati
Registration
Login
Forgot Password
Navigation
Creating your first bot
Building your bot
Harnessing conversational intelligence
Deploying the bot
Simplified Broadcast
Tracking & Analytics
Activating Live Chat
Managing your account
Engati for Shopify - What’s in it for you?
Engati for WooCommerce - Onboarding and Deployment
Engati APIs
What's New?
Docs powered by archbee 

Custom buttons and Deep linking

3min

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:

Document image


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(" "));
        }
      }
    }
  }
});


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?
Yes
No
PREVIOUS
Website Theming
NEXT
Website Advanced
Docs powered by archbee 
TABLE OF CONTENTS
Deep Linking