Skip to main content

For multiple reasons,  I need to place clients’ chatbot pop-up icons in the lower left corner. I was able to get 95% of the way there using ChatGPT to help me code it, but things are stuck in that the close window icon is locked to the right side of the chat window.  This looks odd when the open icon is positioned left.  Any help finishing the code is appreciated. (P.S. would be cooler if Zapier Chatbot team just gives us these options in the builder or provides the code for us to copy and paste.)

 

Here is the code: 

<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="cmc7o9xi80030w9spmv9bptbq"></zapier-interfaces-chatbot-embed>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const applyPosition = (bot) => {
    try {
      console.log(' ZapierBot] found embed:', bot);
      const root = bot.shadowRoot;
      console.log(' ZapierBot] shadowRoot children:', root?.children);

      // Finder for launcher
      const launcher = root.querySelector('hpart="launcher"], .launcher, iframe');
      console.log(';ZapierBot] launcher element:', launcher);

      if (launcher) {
        launcher.style.position = 'fixed';
        launcher.style.bottom = '20px';
        launcher.style.left = '20px';
        launcher.style.right = 'auto';
        launcher.style.zIndex = '9999';
        console.log('eZapierBot] launcher styled to bottom-left');
      } else {
        console.warn('-ZapierBot] Launcher not found yet');
      }
    } catch (e) {
      console.error('    }
  };

  const observer = new MutationObserver((mutationList) => {
    const bot = document.querySelector('zapier-interfaces-chatbot-embed');
    if (bot && bot.shadowRoot) applyPosition(bot);
  });
  observer.observe(document.body, { childList: true, subtree: true });

  // Initial try
  const bot = document.querySelector('zapier-interfaces-chatbot-embed');
  if (bot && bot.shadowRoot) applyPosition(bot);
});
</script>

Hi ​@Todd Lichtenwalter,

 

Welcome to the Community.

To customize the position of your chatbot pop-up and close icons, you can use custom CSS to adjust layout styles or JavaScript to position elements like the close button dynamically. Since Zapier's platform doesn't natively support injecting custom code into interface pages, these adjustments depend on whether your chatbot platform allows code customization. Exploring platform settings and themes or consulting documentation may offer alternative configuration options. If not, submitting a feature request to Zapier support is encouraged.

Feel free to reach out if you have any questions or need further assistance.