Callable/Docs
Go to dashboard
Channels

Web chat widget

This page covers how to embed a chat agent on your website with the widget script, the public chat page every chat agent gets, and how chat agent teams work.

Callable chat agents run the same LLM pipeline as voice agents, but over text — grounded in your business info, knowledge base, and tools. Once you've built a chat agent, you can surface it in two ways: as an embedded widget on your own site, or as a hosted public chat page. This page walks through both, plus chat teams.

Before you start

You need a chat agent. When you create an agent, choose the Chat type (as opposed to a Voice agent). Then configure it in the agent builder — its identity and system prompt on the Agent tab, grounding content in the Knowledge Base tab, and any functions in the Tools tab. Your agent grounds its answers in your knowledge base whether it's answering on the widget, on its public chat page, or in the dashboard.

Tip: Set a clear greeting (first message) on the Agent tab. It's the opening line the widget shows when a visitor first opens the chat.

Embed the chat widget on your site

The chat widget is a small floating chat launcher you add to any website with a single script tag. It loads widget.js, which mounts the chat UI for the agent you specify.

To add it:

  1. Build and save your chat agent.
  2. Copy the embed snippet for that agent (found in the developer/embed section of the agent).
  3. Paste the snippet into your site's HTML, just before the closing </body> tag.
  4. Publish your site and open it — the chat launcher appears, and visitors can start chatting with your agent.

A sample embed snippet looks like this:

<!-- Callable chat widget -->
<script
  src="https://callableio.com/widget.js"
  data-agent-id="YOUR_AGENT_ID"
  async
></script>

Replace YOUR_AGENT_ID with your chat agent's ID. The script loads asynchronously so it won't block the rest of your page.

The widget serves the same agent as your public chat page and the dashboard test chat — they all share one configuration, so updates to the agent's prompt, knowledge base, or tools apply everywhere at once.

The public chat page

Every chat agent also has a public chat page hosted by Callable. It's a full-page version of the same chat experience — useful when you want to link directly to your agent rather than embed it, for example from an email, a social profile, a QR code, or a support link.

The page runs the identical LLM pipeline and grounding as the embedded widget, so visitors get the same answers whether they arrive through the widget or the link.

Chat teams

If one agent isn't enough, you can build an Agent Team — multiple agents that hand off to each other, assembled in a node-graph composer on a dark canvas. A team is single-channel, so a chat team is made entirely of chat agents (voice agents belong to voice teams).

On each turn, the platform routes the conversation to the best-suited member of the team, and members can hand off to one another using the Handoff tool. Chat agent teams have their own public chat page, so you can share a team the same way you'd share a single agent's chat page.

Next steps

  • Agent Teams — build a multi-agent chat team in the composer.
  • Knowledge base — ground your chat agent's answers in your content.
  • Tools — give your chat agent functions to call mid-conversation.
  • Developer — configure webhooks and dig into the widget script.
Previous
← Phone numbers
Next
WhatsApp →