Chat Agents & the Web Chatbot Widget
Cloudax Connect runs two kinds of agents on the same prompt engine: voice agents for phone calls and chat agents for text channels. Chat agents use system prompts, custom REST tools and linked knowledge bases. Voice-only controls are omitted, and MCP servers, event webhooks and connected-app integrations do not currently have feature parity with the web-chat runtime.
One conversation model, many channels
Creating a Chat Agent
Open Chat Agents from the sidebar and click Create chat agent. You can start from a blank canvas or convert an existing voice agent (the voice-only options are stripped out automatically: STT, TTS, voice picker and telephony settings are all hidden from the chat editor).
The chat agent editor mirrors the voice agent editor, minus voice:
- System prompt: the instructions that define the agent's behaviour.
- Opening message: the first message the agent posts when a visitor opens the chat.
- LLM model & temperature: the language model and creativity dial.
- Custom tools and knowledge bases: a chat agent can call active custom REST tools (optionally after visitor approval) and search linked uploaded documents.
- Comments tab: collaborative inline notes so your team can review and iterate on the agent together.
- Allowed website pages: optionally let the agent fetch live pages from domains you allowlist under Knowledge.
- Signed-in visitors: optionally require your website to pass the logged-in visitor so tools can help with their account.
Availability
Testing the Chat Agent
Preview and Embed stay on the right while you edit. Settings (branding, colours, size, appearance, uploads and starter suggestions) sit in the middle so changes show immediately in the live preview. With unsaved edits, choose Preview changes to open the floating chat popup; otherwise use Test chatbot. Deploy before visitors see prompt or model changes on your site.
Knowledge and website pages
Chat agents can answer from uploaded knowledge bases and, when you choose, from live pages on websites you allow.
- Open the Knowledge document in the chat agent editor.
- Turn on the knowledge base and select the datasets the agent may search.
- Under Allowed site pages, add domains or HTTPS page addresses the agent may fetch (for example your help centre).
When the agent uses knowledge or an allowed page, visitors can see those sources on the reply. Leave the allowlist empty if the agent should only use uploaded knowledge.
Keep the allowlist tight
Tool approval in chat
For tools that change something for the visitor (bookings, account updates, refunds), you can ask for approval in the chat window before the tool runs.
- Open the Tools document and edit or create a tool.
- Turn on Ask visitor before running.
- Deploy the agent.
When that tool is about to run, the visitor sees Approve and Deny. The tool only runs if they approve.
Signed-in visitors
If your website already knows who is logged in, you can pass that visitor to the chat widget so the agent and its tools can help with their account.
- In the Embed tab, choose whether identity is optional or required.
- Rotate the identity secret when needed and keep it only on your server — never in the browser snippet.
- On your website, after the visitor signs in, pass their details to the widget using the identify helper from the Embed tab.
When identity is required, chat stays blocked until your site has identified the visitor. Tools can then help with that visitor's account.
Your website stays in control
The Embed Centre
Open the Embed tab next to Preview on the right to copy the website snippet, set allowed origins, and configure signed-in visitors. Design the look under Settings in the middle — the Preview tab updates as you change it.
Customisation Options
Chatbot Name
Set the display name shown in the chatbot header bar. This is the first thing visitors see when the widget opens; choose something friendly and recognisable, such as your brand name or a descriptive label like "Support Assistant".
Icon
Choose an icon for the floating chat button and the header. The available options are:
| Icon | Best for |
|---|---|
MessageCircle | General chat and customer support |
Bot | AI-forward branding where you want to highlight automation |
Headphones | Help desks and support centres |
Sparkles | Creative or playful brands |
Zap | Fast-response or sales-oriented agents |
MessageSquare | A subtle, professional alternative to MessageCircle |
Colours
The colour picker lets you override the widget's default look on a per-element basis: chat panel background, user message bubbles, bot message bubbles, header background, header text, input field background and text. Each swatch starts in “inherit” mode (rendered as a hatched square) so you only override the things you actually want to change; leave the rest on defaults to keep the standard glassmorphic look.
Settings also runs a live contrast check on every colour pairing and warns you when the chosen palette fails WCAG AA contrast against the background. Click Reset on any swatch to drop back to the default.
Match your brand
Appearance
Choose Light, Dark, or System so the chat panel follows a fixed theme or the visitor's device. The Preview pane and floating preview popup update as you change this setting.
Open chat automatically
Turn on Open chat automatically on desktop and/or Open chat automatically on mobile so the chat panel opens by itself when the page loads. When both are off (the default), visitors click the floating button to start a conversation.
Use automatic open sparingly
Powered-by badge
A small “Powered by Cloudax Connect” badge is shown in the widget footer by default. Toggle it off if you have the White Label add-on enabled and want the widget to look fully first-party. Without White Label the toggle is disabled.
Embedding on Your Website
Once you are happy with the preview, the Embed Centre generates a ready-to-use script tag. Copy the snippet and paste it into the <body> of any page where you want the chatbot to appear:
<script> window.CloudaxWidgetConfig = { assistantId: "your-assistant-id", name: "Support Bot", color: "#6366f1", icon: "MessageCircle" };</script><script src="https://your-domain.com/api/chatbot-widget" async></script>The widget renders as a floating button in the bottom-right corner of the page. When a visitor clicks the button (or the page loads with auto-open enabled), the chat window expands and the conversation begins.
You can embed the same widget on multiple pages; the configuration object controls which agent is used and how the widget looks.
If your site has signed-in users, follow Signed-in visitors above so the widget can recognise them after the script loads.
Standalone URL
Every chat agent also has a dedicated standalone URL at /chatbot/[assistantId]. You can share this link directly via email, social media, or QR codes (no website embedding required).
The standalone page displays a full-screen version of the chatbot with the same customisation options applied (name, icon, colour). This is especially useful for quick demos, internal testing, or situations where you want to direct someone straight to a conversation.
Share with clients
Conversations & Handoff to Humans
Every chat conversation lands in the Omnichannel Inbox alongside voice calls. From there a human teammate can read the thread live, jump in to reply, or take the conversation off AI entirely with a single click. The visitor sees a smooth handover: the agent says it's connecting them to a teammate and the human takes over the same chat window.
In the chat window, visitors can copy a reply, leave thumbs feedback, and expand sources when the agent used knowledge or an allowed website page.