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>