Chatbot Widget

How to embed on Webflow

Add this to your Webflow site (Site Settings → Custom Code → Footer Code):

<script src="https://chatbot-demo.accounts-69d.workers.dev/embed.js"></script>

Opening the chat from a button

Add an HTML Embed element in Webflow:

<button onclick="window.openChatbot()">Chat with us</button>

Styling the button based on open/closed state

When the chat is open the worker adds chatbot-open to <body> (and chatbot-closed when closed). Use it in CSS:

body.chatbot-open .my-chat-button { background: #222; }
body.chatbot-closed .my-chat-button { background: #0066ff; }

Or listen for events in JS:

window.addEventListener('chatbot-opened', function() { /* ... */ });
window.addEventListener('chatbot-closed', function() { /* ... */ });
window.addEventListener('chatbot-state-change', function(e) { console.log(e.detail.open); });

// Imperative helpers:
window.openChatbot();   // toggle
window.closeChatbot();  // force close
window.isChatbotOpen(); // boolean

Testing the v2 wiring

Append ?chat=v2 to any page URL to enable the dropdown action / send-message event hooks. Without the parameter, the chatbot behaves exactly as before.

https://yoursite.com/page?chat=v2

With v2 enabled, open devtools and look for [chatbot v2] log entries to confirm events are firing.

Environment variables