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

Environment variables