> ## Documentation Index > Fetch the complete documentation index at: https://docs.callivox.com/llms.txt > Use this file to discover all available pages before exploring further. # Website widget > Create a chat widget for your website, style it, embed it with one script tag, and set up proactive messages. The website widget is a chat bubble you embed on your own site. Visitors click it, type, and their message lands in your inbox like any other conversation — no account, no app, no phone number needed. It is the only channel available on every plan, though it still counts toward your plan's channel limit. ## Creating the widget Unlike the other channels, the widget is not configured in the connect dialog. Pick **Website** in the dialog and you get a hand-off card instead: > The website chat widget has its own setup page with a **live preview** — name it, pick colors and position, list allowed domains, and grab the embed snippet, all side by side. Click **Set up website widget →** to open **Set up website widget**: "Name the widget, list the domains it may load on, and style it — the preview shows exactly what visitors will see." The Set up website widget page showing name, domains and appearance fields beside a live widget preview Everything on this page updates the **Live preview** panel as you type. The preview is the real widget, not a mock-up, so what you see is what visitors get. ### Name and domains | Field | Notes | | ------------------- | ------------------------------------------------------------------------------------------ | | **Display name** | Required. How the channel appears in your inbox and settings — for example "Acme Website". | | **Allowed domains** | The sites this widget may load on. Add one row per site with **Add domain**. | Allowed domains are a security control: only sites on the list can load your widget, so nobody else can embed it and send messages into your inbox. An empty list blocks everything. As the page puts it: "No domains yet — with an empty list the widget won't load on any site. Add at least one origin (e.g. [https://acme.com](https://acme.com), or [http://localhost:3000](http://localhost:3000) for local testing) before embedding it." Enter a full origin — scheme and host, no path. `https://acme.com` is valid; `acme.com/support` is not, and returns "Not a valid domain. Use a full origin like [https://example.com](https://example.com) (no path)." Add your staging and local development origins too, otherwise the widget will not appear when you test it before going live. ### Appearance | Field | Default | What it does | | ------------------------------ | ------------ | ------------------------------------------------------------------------ | | **Accent color** | `#08704F` | The widget's main colour — header, buttons, your messages. | | **Bubble color** | `#08704F` | The colour of the launcher bubble itself. | | **Launcher position** | Bottom right | **Bottom right** or **Bottom left**. | | **Launcher style** | Circle | **Circle**, **Rounded** or **Bar**. | | **Logo** | — | Upload an image to show in the widget header. **Remove logo** clears it. | | **Show "Powered by Callivox"** | On | Uncheck to hide the attribution line. | Colours must be 6-digit hex values: "Accent color must be a 6-digit hex value, e.g. #08704F." ### Wording | Field | Default | | ------------------- | ---------------------------------------------------------- | | **Title** | `Chat with us` | | **Subtitle** | `We typically reply in a few minutes` | | **Welcome message** | `Hi! How can we help?` | | **Away message** | `We're away — leave your email and we'll get back to you.` | The away message is "Shown when no agent is online and AI auto-reply is off." Set the subtitle to something you can honestly deliver — it is a promise on every visitor's screen. Click **Create widget**. You will see "Website channel connected". ## Embedding it on your site After creating the widget you land on a panel headed **Website widget connected**, with the embed snippet ready to copy. The widget settings page showing the embed script snippet, the site key and a Rotate key button The snippet is a single script tag: ```html theme={null} ``` Paste it into your site's HTML immediately before the closing `` tag, on every page where the widget should appear. In most content management systems there is a "custom code", "footer scripts" or "before body end" box for exactly this. Then load a page on one of your allowed domains. The launcher should appear in the corner you chose. If the widget does not appear, the domain is almost always the reason. The widget refuses to load on any origin that is not in the **Allowed domains** list — including staging sites and `localhost`. ### The site key The `data-site-key` value in the snippet identifies your widget. It looks like `wgt_live_` followed by a long string. **Rotate key** generates a new one. Do this if the key has been exposed somewhere it should not be — a public repository, a screenshot, a shared document. "Rotating invalidates the old snippet — update your site after rotating." The widget stops working everywhere until you paste the new snippet onto your site. ### Changing settings later Open the channel row in **Settings → Channels** and click **Widget settings** — "Embed snippet, allowed domains, branding and proactive messages for this widget." Domains and branding save separately, with **Save domains** and **Save branding**. Changes take effect on your site without re-pasting the snippet, as long as the site key has not changed. ## Proactive messages A proactive message reaches out to a visitor first, based on what they are doing on your site — someone who has been reading your pricing page for half a minute, someone about to leave, someone coming back for a second visit. Find them under **Proactive messages** on the widget settings page: "Reach out first based on visitor behaviour." Click **Add message** to create one. Before you have any, the section reads "No proactive messages yet." ### Triggers Every rule starts with one **Trigger**: | Trigger | Fires when | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | **Time on page** | The visitor has been on the page for a set number of seconds. **Seconds on page** defaults to 20. | | **URL match** | The page address matches a **URL pattern** — for example `/pricing`. Match mode is **exact**, **contains** (the default) or **regex**. | | **Exit intent** | The visitor moves to leave the page. | | **Returning visitor** | The visitor has been on your site before. | ### Targeting conditions Under **Targeting (ALL must match)** you can narrow further with **+ Add condition**. With none set, the note reads "No conditions — shows to everyone." Conditions can test: * **Page URL** * **Referrer** — where the visitor came from * **Locale** — their browser language * **Visitor status** — new or returning * **Custom attribute…** — any value your site passes to the widget Each uses one operator: equals, not equals, contains, in, matches regex, or exists. Every condition on a rule must match, so adding more makes the rule fire less often, never more. You can put up to 20 conditions on a rule. ### The message Write the message in the **Message** box. Insert chips add variables that are filled in for each visitor: | Variable | Value | | ----------------- | -------------------------------------- | | `{{name}}` | The visitor's name, if known | | `{{locale}}` | Their language | | `{{custom.plan}}` | A custom attribute your site passes in | The placeholder shows the tone that works: "Still comparing plans, `{{name}}`? Happy to help." ### Frequency **Frequency** controls repeat showings: * **Once per session** — the visitor sees it once per browsing session. * **Cooldown (seconds)** — wait this long before showing it again. Defaults to 3600, which is one hour. The **Enabled** checkbox turns a rule on and off without deleting it. Each rule's row shows a status pill reading **On** or **Off**. Click **Save message** to save. You will see "Message saved". ### Priority Rules are evaluated in list order and **the first matching rule wins** — lower in the numbering means higher priority. Use the up and down chevrons on each row to reorder them. Put your narrow, specific rules at the top and your broad catch-all rules at the bottom. A "been here 20 seconds" rule sitting at position 1 will fire before your carefully targeted pricing-page rule ever gets a chance. You can have up to **20 proactive rules** per widget. The section header shows how many you have used. Messages are capped at 2000 characters and the shorter fields at 200. ## Next steps Have an agent answer website chats automatically. Rename, inspect and delete channels.