Web widget

Paste a single script tag on your site to show a floating chat bubble, or share a direct chat link.

The web widget is the default channel for every chatbot. The Web Widget tab on the Channels page gives you two copy-paste outputs: an embed script for your site, and a shareable direct-chat URL.

The page

Heading: Web Widget Subheading: "Drop one script onto any page and your chatbot appears as a floating chat bubble. Share a direct link for anyone to chat without visiting your site."

A Customize widget button (top right) takes you to the widget settings form. Then two rows — each with a Copy button, and the shareable link also has an Open ↗ to jump into the live preview.

1. The embed script

Row label: "Embed script" Hint: "Paste before on every page where you want the widget to appear."

The snippet looks exactly like this:

(The URL's host matches the ChatbotGen deployment — in dev it's http://localhost:4000, in production it's https://www.chatbotgen.com.)

Paste it anywhere in your HTML, typically just before so it doesn't block first paint. No defer is needed.

Row label: "Shareable link" Hint: "Send this URL to anyone — they can chat with your bot in full-page mode."

The URL pattern:

https://www.chatbotgen.com/v2/chatbots/YOUR-SLUG/widget

Paste it into an email, a QR code, or a social post. Anyone clicking gets the full-page chat UI — no widget installation needed on their end.

What the loader script does

The script works on any domain (no CORS setup needed) and is cached by the browser for a few hours so it loads quickly on repeat page views.

When the page loads, the script:

  1. Injects the widget's styles
  2. Adds a floating circular button in the bottom-right corner
  3. Prepares a hidden chat iframe that opens when you click the button
  4. Optionally shows a small speech-bubble teaser with the chatbot's initial message after a short delay
  5. Closes the widget when the visitor clicks away or taps X inside the chat

The launcher button uses your uploaded widget icon when you've set one — otherwise it's a colored bubble with a chat-bubble symbol in your primary color.

Mobile behavior

On small screens (narrow phones), the chat fills the entire viewport when opened, so the conversation is easy to read. No configuration needed — it just adapts.

If the chatbot doesn't exist

If the slug in the script URL doesn't match any chatbot, the browser console shows:

ChatbotGen: chatbot "YOUR-SLUG" not found

Nothing is injected on the page. Check that you copied the script with the right slug for your chatbot.

Customizing appearance

Widget look-and-feel lives on the Widget sub-nav tab, not here. See:

Removing the widget

Delete the