Chat Agents & the Web Chatbot Widget

Last updated By CloudaxChannels

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

Whether the visitor reaches your agent through the embedded widget, standalone chat URL, a provisioned SMS number or a connected WhatsApp Business channel, the conversation uses the same underlying conversation model. Calls, web chats, SMS and WhatsApp messages surface together in the Omnichannel Inbox for human follow-up. SMS and WhatsApp require channel setup before they can receive or send messages.

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

Web chat agents are available where the Web-chat agents entitlement is included. SMS additionally requires a Cloudax-managed SMS number, and WhatsApp requires a completed WhatsApp Business channel setup.

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.

  1. Open the Knowledge document in the chat agent editor.
  2. Turn on the knowledge base and select the datasets the agent may search.
  3. 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

Only add sites you control or trust. The agent will not browse the open web — only the pages and domains you list.

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.

  1. Open the Tools document and edit or create a tool.
  2. Turn on Ask visitor before running.
  3. 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.

  1. In the Embed tab, choose whether identity is optional or required.
  2. Rotate the identity secret when needed and keep it only on your server — never in the browser snippet.
  3. 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

Only your website can identify the signed-in visitor. Keep the identity secret on your server, not in the embed snippet.

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:

IconBest for
MessageCircleGeneral chat and customer support
BotAI-forward branding where you want to highlight automation
HeadphonesHelp desks and support centres
SparklesCreative or playful brands
ZapFast-response or sales-oriented agents
MessageSquareA 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

Match the panel background and header to your website's primary palette for a seamless, integrated look. If you're unsure, copy the hex values from your existing style guide; the live contrast meter will tell you immediately if they need adjusting for readability.

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

Auto-open works best on high-intent pages like pricing or contact pages. On general content pages, it can feel intrusive. Start with it disabled and enable it selectively where it drives the most value.

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:

index.html
<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

The standalone URL is a great way to let clients or stakeholders preview the chatbot before it goes live on their website. Send them the link and they can test the experience immediately.

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.