Open zapier chatbot on "Contact Us" button click also

Question

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

enter image description here How can I do this?

• C3roe: 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.)
• Momin IqbalAhmed: @C3roe Yes, the button is within the iframe....
• DarkBee: Please do not upload images of code/data/errors. - Please edit and provide the code/data/errors as text.

Answer 1

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

• Momin IqbalAhmed: It may work through console, but not working when we put in to actual code..due to rendering of data is delayed
• mplungjan: Try the updated code. It will wait - use inspect to check the selector for the button. If it is inside the iFrame then you will need another method - perhaps a webhook, but I do not know zapier
• Momin IqbalAhmed: Thanks, but this is not working... I tried to alert in click event, but click event is not working. it seems that chatbutton return and further code not getting executed I have updated original question with the structure of iframe of zapier. If that helps you modify the code

Answer 2

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>

• Momin IqbalAhmed: I have perform a test with both the solution, but none working...chatbot-icon-button class is within the iframe
• mplungjan: Using an a tag without a href is not useful. If you add the href, you also need to use preventDefault. jQuery is certainly not necessary
• Ali Sheikhpour: Ok. I added the code to manipulate iframe if they allow only @MominIqbalAhmed
• Momin IqbalAhmed: Not working, I have added the iframe structure of zapier, if that helps