Embed web chat
Web chat adds a chat bubble to your business's website. Visitors can tap it, ask a question, and get a reply from Costello — without leaving your site or opening Instagram.
It's the only channel that doesn't require a Meta connection.
Before you start
You'll need edit access to your business's website HTML. If you use Squarespace, Wix, Webflow, or a similar builder, you'll add the snippet via a "Custom code" or "Header scripts" section. If you have a developer managing your site, send them the snippet.
WordPress users can skip the snippet entirely. Our official plugin connects your site with one click — see Connect your WordPress site (one-click). For other platforms, the install guides walk through Shopify, Wix, Squarespace, Webflow, and more.
Getting your embed snippet
In Costello, open Integrations in the top nav.
Find the Web chat card and click Set up.
Copy the snippet — it looks like:
<script>
(function(c,o,s,t,e,l,l,o){...})(window, document, 'costello-chat', '...');
</script>
Paste the snippet into the <head> or just before the </body> tag on every page of your website.
Save and publish your site changes. The chat bubble will appear in the bottom-right corner within a few minutes.
Once the snippet is installed, all appearance changes are made from the Costello dashboard. You never need to update the snippet itself.
Customising the bubble
From Integrations → Web chat, you can change:
- Primary colour — choose a preset swatch or paste your own brand hex code.
- Opening message — the first line visitors see when they open the chat (up to 280 characters).
- Bubble position — sit the bubble in the bottom-right or bottom-left corner.
- Allowed domains — the list of websites permitted to show your widget.
Changes take effect right away — no need to update the snippet on your site. For the full reference, see Web chat widget settings.
How it fits with your other channels
Web chat counts as one channel slot (the same as Instagram or Messenger). If you're on the Free plan, connecting web chat uses your one channel slot. See channel cap explained → for details.
Conversations from web chat appear in the Activity tab alongside Instagram and Messenger conversations.
GDPR and web chat
The web chat bubble does not set cookies by default. A short session token is stored in the visitor's browser to keep the conversation alive while they're on the site; it expires when they close the tab.
If your privacy policy mentions live chat or AI interactions, you may want to add a brief note about Costello. Most businesses add one sentence: "Our website chat is powered by Costello AI."
Troubleshooting
The bubble doesn't appear
- Check the snippet is in the
<head>or just before</body>on the page. Snippets placed inside a CMS widget container may be stripped. - Some ad blockers hide chat bubbles. Test in a private window with extensions disabled.
- If your site uses a Content Security Policy (CSP), you may need to allow the Costello script domain. Contact support for the exact domains to allow.
Messages from web chat don't arrive in Costello Activity
Confirm the Web chat card shows "Connected" in Integrations. If it shows "Disconnected", click Reconnect.