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

<script async type='module' src='.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?

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?

• javascript
• jquery
• chatbot
• zapier

• 2 I can't find much documentation on this from zapier, except the example code for the embed. Can you show us a working live example? If the button itself is also part of the external iframe, then this might not be possible (if zapier doesn't provide any explicit way to do this.) – C3roe Commented Jan 20 at 8:29
• @C3roe Yes, the button is within the iframe.... – Momin IqbalAhmed Commented Jan 20 at 9:45
• Please do not upload images of code/data/errors. - Please edit and provide the code/data/errors as text. – DarkBee Commented Jan 22 at 9:16

2 Answers 2

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

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>