Question 422234 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Open zapier chatbot on "Contact Us" button click also

I am using zapier chatbot and below is the embed code of the chatbot

<script async type='module' src='https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js'></script>
<zapier-interfaces-chatbot-embed is-popup='true' chatbot-id='*****************'></zapier-interfaces-chatbot-embed>

Using this code, I see the chat icon at the bottom right; it works fine when we click on it(having iframe structure).

Now I have a Contact Us button in the header and when I click on the Contact Us button, I want to open the chatbot automatically

How can I do this?

Tags:

2

Answers


  1. 0

    Try this one It worked on this page https://zapier.com/ai/chatbot (in the console)

    document.querySelector('.chatbot-icon-button').click();

    Example implementation (alternatively use a mutationobserver):

    window.addEventListener('load', () => { // when the page has loaded
  let chatButton;
  const contactButton = document.getElementById('ContactUs');
  contactButton.disabled = true;
  const getButton = () => chatButton = document.querySelector('.chatbot-icon-button');
  let tId = setInterval(() => {
    if (!chatButton) return;
    clearInterval(tId); // we are done
    contactButton.addEventListener('click', (e) => {
      e.preventDefault(); // if needed
      chatButton.click();
    });
  }, 1000);
});
    Login or Signup to reply.
  2. 0

    If jQuery exists:

    <a href="#" onclick="$('.chatbot-icon-button').click();return false;">Contact us</a>

    or pure js:

    <a href="#" onclick="document.querySelector('.chatbot-icon-button').click();return false">Contact us</a>

    Edition after receiving comment:

    if ChatBot is in an Iframe and the target website allows cross-origin then we have to go deep inside the iframe:

    <a href="#" onclick="openChatbot(); return false;">Contact us</a>

<script>
  function openChatbot() {
    const iframe = document.getElementById('chatbot-iframe');
    const iframeDocument = iframe.contentWindow.document;
    const chatbotButton = iframeDocument.querySelector('.chatbot-icon-button');
    
    if (chatbotButton) {
      chatbotButton.click();
    }else{
      console.log("can not interact with chat button");
    }
  }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search