Put the Bot on a Real Web Page

Why this matters

A bot living only inside its builder's preview window is a toy; a bot appearing as a chat bubble on an actual web page is a product. The step between them — copying one snippet of code onto a page — is the thing beginners fear most and that turns out to be the easiest part of the whole module. You do not need to write or understand the code; you copy it and paste it exactly, the same way you'd paste a YouTube embed into a blog. Learning to do this on a free test page today means that when a client says "can you put it on our site?" you already know the move and can say yes without flinching. Deployment is the demystified skill that lets you charge a setup fee.

Demo

Chatbase gives you the snippet under "Connect" or "Embed" — it's an HTML block that looks scary but you never edit it, you only copy it. It looks roughly like this (yours will have your bot's real ID):

Now you need a free page to paste it into. The fastest for testing is Carrd (carrd.co) — a free one-page site builder. Create a free Carrd site, add an "Embed" element to the page, choose the "Code" option, and paste the snippet in. Publish, open the public URL on your phone, and the chat bubble appears in the corner — tap it and you're talking to your live bot on a real, shareable web address. An even faster no-signup option: create a Google Sites page (sites.google.com), insert an Embed > Embed code block, paste the snippet, and publish. If you own any website already (a WordPress site, a Wix site), the same snippet drops into a custom-HTML block there too.

Here's the one thing beginners get wrong: they paste the snippet into the visible text area of the page instead of into an Embed/Code block, and see the raw code printed on screen instead of a chat bubble. The fix is always "use the Embed/Code element, not the text element." Once the bubble shows up on the published URL, you have crossed the line from preview to product — send that URL to a friend and watch them chat with your bot.

Try it yourself

1. Find and copy your bot's embed snippet from your tool's Connect/Embed section — don't edit a single character.
2. Create a free one-page site on Carrd or a Google Sites page.
3. Add an Embed / Code block (not a text block) and paste the snippet into it.
4. Publish the page and open its public URL on your phone to confirm the chat bubble appears.
5. Send the live URL to one friend and ask them to chat with the bot, confirming it works outside your own screen.

References

• Chatbase — Embedding your chatbot on a website
• Carrd — Adding embed / code elements
• Google Sites — Add content (embed code)