# Website Widget

The website widget puts your agent on your own site as a chat and voice bubble. Visitors type or talk to the same agent that answers your phone, with the same instructions, knowledge, tools and workflows. You also get a **test link**: a hosted page where anyone can talk to the agent, before the widget is on your site.

You can do all of it from the app, or from Claude or ChatGPT without opening the app.

  <ShotPlaceholder
    src="/assets/agent-configuration/website-widget.png"
    name="website-widget"
    alt="Agent editor, Channels, Website Widget with Embed & share and Live preview"
    capture="Agent → Channels → Website Widget, widget switched on, Embed & share card visible."
  />

## First setup

1. **Turn the widget on**

   Open the agent → **Channels** → **Website Widget** and switch it on. Until it is on, the test link shows *This assistant isn't available right now* and the embedded widget does not load.

2. **Try the test link**

   **Embed & share** → **Shareable page link** → **Open**. The link is `https://app.voicelogica.ai/w/<agent id>`. Ask the agent what callers usually ask. You can also send this link to customers by email, SMS or Viber.

3. **Add it to your website**

   **Embed & share** → **Add to your website** → **Copy**. The code is two lines:

   ```html
   <voice-logica-agent agent-id="<agent id>"></voice-logica-agent>
   <script src="https://api.voicelogica.ai/widget/embed.js" async type="text/javascript"></script>
   ```

   Paste it before `</body>` on every page. On WordPress, use a header and footer plugin and paste it in the footer field. On Wix, Shopify or Joomla, use the site's custom code or footer scripts setting.

4. **Lock it to your domain**

   **Allowed domains**: add your site's hostname, for example `example.com`. Keep **Also allow www. variant** on if your site also answers on `www.`. An empty list lets any website embed your agent and use your chat sessions.

   The test link always works, whatever this list says.

5. **Make it look like your site**

   **Appearance** sets the size, the corner of the screen, the colours and the avatar. **Live preview** shows the result before you save.

6. **Prove it**

   Open your website in a private window, open the bubble and ask a real question. The conversation shows in **Calls** with its transcript and call results.

## Links in the agent's replies

For safety, a link in a reply is clickable only if its domain is on the **Clickable link domains** list (**Website Widget** → **Interface**). Any other link shows struck through and cannot be clicked. When the list is empty, which is the default, no link is clickable.

- Add each domain the agent may link to, for example `example.com` and `hihello.com`. A domain matches exactly: `example.com` does not cover `shop.example.com`, so add that too.
- **Also allow www. for these domains** (on by default) lets `example.com` also cover `www.example.com`.
- **Allow plain http:// links** only matters for sites without https. It does not make a link clickable by itself: the domain must still be on the list.

From Claude: `update_agent_settings`, section `widget`, `{ "interface": { "markdownAllowedDomains": ["example.com", "hihello.com"] } }`.

## From Claude or ChatGPT

With [Voice Logica connected](https://docs.voicelogica.ai/integrations/claude-chatgpt/), ask in plain words: *"Turn on the website chat for my agent and give me the code for my site."*

- `update_agent_settings` with section `widget` and `{ "enabled": true }` switches it on. If you give no domains, it is locked to the website on your company profile. The answer carries the **test link** and the **embed code**.
- `get_agent_settings` with section `widget` returns the same link and code, and the current settings.
- `test_in_browser` returns the test link and the embed code, and switches the widget on if it was off.

Domains, colours, placement and pre-chat fields change the same way, for example `{ "allowedDomains": ["example.com"] }` or `{ "styling": { "placement": "bottom-left" } }`.

## Asking visitors who they are

**Caller verification** asks for an email or mobile before the chat starts and can confirm it with a code (SMS codes work for Greek and Cypriot numbers). Turn on **Actions need a verified visitor** when the agent can create orders, bookings or tickets: visitors who did not verify can only ask questions.

The values reach the agent as variables, so a returning customer is recognised the same way as on the phone.

## Phone and chat on one agent

One agent can answer the phone and the website chat and still behave differently on each. The agent already knows when a conversation is typed: it does not get the speech-recognition and spoken-style rules there. For your own rules, use the **`{{serviceType}}`** variable in the prompt:

| Conversation | `{{serviceType}}` |
|---|---|
| Website chat (typing), WhatsApp, Viber, Messenger, Instagram | `message` |
| Website voice (talking in the bubble) | `websocket` |
| Phone call | empty |

Write the rule in plain words, for example:

> The conversation type is "`{{serviceType}}`". If it is "message", the customer is typing: do not ask them to spell or repeat an email, name or number they wrote, and send links and details in the chat instead of by SMS. Otherwise they are speaking: confirm an email by reading it back, or offer to send an SMS so they can write it.

On WhatsApp, Viber, Messenger and Instagram each connection also has its own **channel instructions** that the agent reads only on that channel.

## A person takes over

When a visitor asks for a person, the agent can hand the same chat to a teammate. That needs **Transfer** on the agent and **Provide chat support** on the teammate. See [Live Support](https://docs.voicelogica.ai/telephony/live-support/).

## Billing

One **chat session** covers one visitor for 24 hours, however many messages, including a handover to a teammate. When none are left, new conversations are refused until you buy a chat-sessions pack. See [How charges work](https://docs.voicelogica.ai/getting-started/how-charges-work/).

**The test link says the assistant isn't available**
The widget is off. Switch it on in **Website Widget**, or ask Claude to turn it on.

**The bubble does not show on my site**
Check that the site's hostname is in **Allowed domains** (or the list is empty), that the code is on the page you are looking at, and that a cache plugin is not serving an old copy of the page.

**Can I put the same agent on two websites?**
Yes. Add both hostnames to **Allowed domains** and paste the same code on both sites.

**Can the chat show a form when the visitor asks for a person and nobody is available?**
There is no form inside the chat. When the visitor asks for a person, [Live Support](https://docs.voicelogica.ai/telephony/live-support/) offers the chat to a teammate who is online. If nobody takes it, the AI says so and takes the message in the same chat: it asks for the name, an email or phone, and what it is about, one question at a time. There is no new session and no pre-chat form.

To have every such message reach your team as a task, turn on **Auto-create tasks** in [Call results](https://docs.voicelogica.ai/agent-configuration/call-results/). The task carries the details the visitor gave.

**A link in the chat is struck through and cannot be clicked**
Its domain is not on **Clickable link domains**. Add it there, for example `hihello.com`, and save. Turning on **Allow plain http:// links** alone does not help. See [Links in the agent's replies](#links-in-the-agents-replies).