Skip to main content

Get Support
Have a question? Let's get you an answer!

How Do I...? Troubleshooting Code & Webhooks Developer Zone

Other Help Resources
Wait, there's more! Check out these Community sourced spaces for additional resources.

Zapier Help Center Hire an Expert

Learning Resources
All of our best learning resources can be found here.

Featured Articles Show & Tell Zapier's products AI Hub Zapier Tools Hub

Share your knowledge
Give back to the Community by sharing your automation wins and helping to answer questions.

Share your success See unanswered questions User Groups

Other Learning Resources
Some of our favorite additional ways to upskill your Zapier knowledge.

Zapier Learn Zapier Blog Zapier Webinars

Product Updates
Check out what is new and upcoming with Zapier with our regular product updates.

Product Updates

Early Access Program
Want to join Early Access? Learn more here.

Question

How to open Chatbot popup on custom button click?

  • February 24, 2025
  • 2 replies
  • 72 views
Y

I'm integrating a chatbot into my website, but I want to trigger the chatbot popup when a user clicks a custom button (chat with us) instead of it opening automatically. The chatbot is embedded via a script, but I can't find a clear way to control its behavior.

Has anyone successfully implemented this? Do I need to use JavaScript to target the chatbot? If so, how do I properly reference and trigger it?

Any help or code snippets would be appreciated! Thanks in advance. 😊

Did this topic help you find an answer to your question?

2 replies

Lionel_Selie
Forum|alt.badge.img+1
  • Lionel_SelieZapier Staff
  • Zapier Staff
  • 38 replies
  • February 24, 2025

Hi ​@yamzap 🖐

I had a quick peek at this and there is definitely a way to do this, but requires some custom coding. I used ChatGPT to help me write a script:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Zapier Chatbot Toggle</title>
  <style>
    /* Style the chatbot container (you can adjust positioning as needed) */
    #chatbot-container {
      display: none; /* initially hidden */
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      /* Optionally add a border or shadow for visual effect */
      border: 1px solid #ccc;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    /* Style the button */
    #open-chat-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 10000;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <!-- Chatbot container with embed code -->
  <div id="chatbot-container">
    <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="false" 
      chatbot-id="cm4qw3n6f002w2sqb6xjrz6s2" 
      height="600px" 
      width="400px">
    </zapier-interfaces-chatbot-embed>
  </div>

  <!-- Button to open the chat -->
  <button id="open-chat-btn">Open Chat</button>

  <script>
    // When the button is clicked, show the chatbot container
    document.getElementById('open-chat-btn').addEventListener('click', function() {
      var container = document.getElementById('chatbot-container');
      // Toggle the display state
      if (container.style.display === 'none' || container.style.display === '') {
        container.style.display = 'block';
      } else {
        container.style.display = 'none';
      }
    });
  </script>

</body>
</html>

On a test site, I added an HTML/code block and when publishing it, it looks like this:

https://cdn.zappy.app/e2accd8ad5587779309cf167fdb4cd74.gif

There is definitely a need to style this—but I believe this should get you going.

To note: I am not an engineer myself, so I’m unable to provide updates on the above code, but I hope this points you in the right direction.

To add:

  • I’ve shared this feedback with our product team—thanks for the idea!
  • Not sure if this is possible, but it could be you could embed the Chatbot (help docs here) and have it show upon a button click.

Hope this helps!

jameswood32

To open a chatbot popup on a custom button click, follow these steps:

  1. Add a Button in HTML

     

    html

    CopyEdit

    <button id="openChatbot">Chat with Us</button>

  2. Integrate Chatbot Script
    Ensure your chatbot widget (e.g., Drift, Intercom, Tidio) is embedded in your site.

  3. Trigger Chatbot Popup with JavaScript

     

    javascript

    CopyEdit

    document.getElementById("openChatbot").addEventListener("click", function() { // Example for Tidio Chatbot tidioChatApi.open(); });

  4. For Custom Chatbot
    If using a self-built chatbot, toggle a hidden chat window using CSS and JavaScript.

Reply


Terms & Conditions