Widget Embed Guide

Embed the WebChatAgent chatbot widget on any website. The widget is a Web Component (<web-chat-agent>) that loads asynchronously and works on any site — no framework required.

Embed Code

Add the following code before the closing </body> tag of your website:

<script src="https://app.webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent
  chatbot-id="YOUR_CHATBOT_ID"
></web-chat-agent>

Replace YOUR_CHATBOT_ID with your actual Chatbot ID. You can find it in Dashboard → Chatbot → Widget Customization at the bottom of the page, where the embed code is pre-filled with your ID.

Tip: You can also copy the ready-to-use embed code directly from the Widget Customization page in your dashboard.

How It Works

The script loads your widget asynchronously (does not block page rendering)
The <web-chat-agent> custom element renders a floating chat button on your page
All widget settings (colors, texts, tools) configured in the dashboard are automatically applied — no extra attributes needed
Visitors click the button to open the chat window and interact with your AI chatbot

HTML Attributes

All visual settings from the Widget Customization page in the dashboard are applied automatically. However, you can override them via HTML attributes on the <web-chat-agent> element:

Basic Settings

Attribute	Type	Default	Description
`chatbot-id`	string	—	Required. Your Chatbot ID
`theme`	string	`default`	Widget theme: `default` or `modern`
`title`	string	—	Custom title displayed in the chat header
`initially-open`	boolean	`false`	Open the chat window automatically on page load
`width`	number	`440`	Chat window width in pixels (300–600)
`height`	number	`700`	Chat window height in pixels (300–700)
`font-family`	string	—	Google Font name (e.g. `Roboto`, `Open Sans`). Loaded automatically

Colors

All color attributes accept hex values (e.g. #2563eb).

Attribute	Default	Description
`theme-color`	`#ffffff`	Header background color
`theme-text-color`	`#000000`	Header text color
`bot-message-color`	`#f3f4f6`	Bot message bubble background
`bot-message-text-color`	`#424242`	Bot message text color
`user-message-color`	`#2563eb`	User message bubble background
`user-message-text-color`	`#ffffff`	User message text color
`bubble-color`	`#424242`	Floating chat button background
`bubble-text-color`	`#ffffff`	Floating chat button icon color

Images

Attribute	Description
`avatar-src`	URL to an avatar image displayed in the chat header
`chat-bubble-image`	URL to a custom image for the floating chat button (replaces the default icon)

Positioning

Attribute	Type	Default	Description
`offset-x`	number	`20`	Horizontal offset from right edge (desktop), in pixels
`offset-y`	number	`20`	Vertical offset from bottom edge (desktop), in pixels
`mobile-offset-x`	number	`20`	Horizontal offset from right edge (mobile), in pixels
`mobile-offset-y`	number	`20`	Vertical offset from bottom edge (mobile), in pixels

Content & Behavior

Attribute	Type	Description
`welcome-message`	string	HTML welcome message shown when the chat opens
`speech-bubble-text`	string	HTML text for the speech bubble next to the chat button
`privacy-policy-html`	string	HTML block for a privacy policy notice inside the widget
`disable-voice-input`	boolean	Disable the microphone/voice input button
`hide-branding`	boolean	Hide "Powered by WebChatAgent" branding (paid plans only)
`lang-detection-source`	string	Language detection: `browser` (default) or `html` (reads `<html lang="...">`)

Prompt Buttons

Attribute	Type	Description
`prompt-buttons`	JSON	Array of quick-action buttons: `[{"title":"Help","action":"I need help"}]`

Example: Full Customization

<script src="https://app.webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent
  chatbot-id="abc-123-def"
  theme="modern"
  title="Support Chat"
  theme-color="#4f46e5"
  theme-text-color="#ffffff"
  user-message-color="#4f46e5"
  bubble-color="#4f46e5"
  font-family="Inter"
  initially-open="false"
  offset-x="30"
  offset-y="30"
></web-chat-agent>