> ## Documentation Index
> Fetch the complete documentation index at: https://developers.mihu.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Chat Widget

> Put your AI agent on your website with one script tag

## Web Chat on your website

The **Web Chat Widget** puts your Mihu AI agent on your own website. Visitors open a chat bubble, write in their own words, and the same agent that answers your calls and WhatsApp messages answers them — with the same knowledge, the same working hours and the same handover to your team.

Web Chat is a full channel in Mihu, not a separate tool:

* Conversations land in the same inbox as calls, WhatsApp and e-mail, under the **Web Chat** channel.
* They follow your queues, so the right team sees them, and a team member can take over from the AI agent at any moment.
* Every conversation belongs to a contact in **Contacts**. With [Chat Identification](/guides/chat-identification) your signed-in customers are recognised and get answers with their own details.

## What visitors can do

| Feature          | Details                                                                                                                                |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| Text chat        | Replies from your AI agent, or from your team when they take over                                                                      |
| Images and files | Up to 5 files per message, 20 MB each: images, PDF, Word, Excel, PowerPoint, CSV, text, audio, video. The AI agent reads what is sent  |
| Voice messages   | Recorded in the browser, up to 2 minutes, transcribed for the AI agent                                                                 |
| Emoji            | Built-in picker                                                                                                                        |
| Quick options    | Buttons on the first screen: start a chat, book an appointment, fill a form, open a link, continue on WhatsApp, reveal a discount code |
| Languages        | 16 built-in interface languages; the widget follows the page language when you allow it                                                |
| End chat         | The visitor can end the chat; coming back later starts a clean thread on the same contact                                              |

A chat survives page changes and refreshes: the visitor keeps their thread while they browse your site.

## Create a widget

<Steps>
  <Step title="Open Web Widgets">
    In Mihu, open **Web Widgets** and click **Create**. Enter your website address and pick the **AI agent** that will answer. Every widget is bound to one agent.
  </Step>

  <Step title="Answer the brief">
    Choose how proactive the widget should be, which Mihu modules it may use (appointments, tables, knowledge, contacts and more) and the goals it should pursue. Mihu reads your site and suggests goals that fit your business.
  </Step>

  <Step title="Design it">
    Pick a style and adjust it in the designer: launcher, position, colours, font, greeting, first-screen options, languages and texts. The preview shows the widget on top of your real website, on desktop and mobile.
  </Step>

  <Step title="Publish">
    Click **Publish**. Each publish creates a version you can roll back to. The website always shows the last published version, so you can keep editing a draft without touching the live widget.
  </Step>
</Steps>

## Add it to your website

Copy the snippet from **Embed snippet** in your widget and paste it before the closing `</body>` tag of every page where the chat should appear:

```html theme={null}
<script src="https://YOUR-WORKSPACE-HOST/v1/widget.js" data-key="pk_live_..." async></script>
```

That is the whole installation. Design changes you publish in Mihu reach your website without touching this snippet again.

| Attribute   | Required | Notes                                                                                                       |
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------- |
| `src`       | Yes      | Your workspace host, exactly as shown in **Embed snippet**                                                  |
| `data-key`  | Yes      | The widget's public key. It is safe to expose: it only works on your allowed websites and only opens a chat |
| `data-lang` | No       | Force an interface language, for example `en` or `de`. Without it the widget uses the page language         |

### Allowed websites

The widget only loads on the website you entered and on the domains you add under **Allowed domains** in the designer. Wildcards cover subdomains: `*.example.com` allows `shop.example.com` and `example.com`. On any other website the widget does not appear.

### Content Security Policy

If your website sends a Content-Security-Policy header, allow your workspace host for scripts and frames:

```text theme={null}
script-src https://YOUR-WORKSPACE-HOST;
frame-src  https://YOUR-WORKSPACE-HOST;
```

## Control the widget from your page

The snippet exposes a small `mihu` object:

| Call                                    | What it does                                                                                            |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `mihu.open()`                           | Opens the widget                                                                                        |
| `mihu.close()`                          | Collapses it to the launcher                                                                            |
| `mihu.say("I need help with my order")` | Sends a message as the visitor and opens the chat                                                       |
| `mihu.identify(user)`                   | Tells the widget who the signed-in customer is — see [Chat Identification](/guides/chat-identification) |

Calls made before the widget has loaded are delivered once it is ready when you add this line before them:

```html theme={null}
<script>
  window.mihu = window.mihu || { q: [], open: function () { this.q.push(['open']); }, identify: function (u) { this.q.push(['identify', u]); } };
</script>
```

A typical use is a "Chat with us" button of your own:

```html theme={null}
<button onclick="mihu.open()">Chat with us</button>
```

## Recognise your customers

By default every visitor is an anonymous **Web visitor**. When your website has its own sign-in, [Chat Identification](/guides/chat-identification) links the chat to the customer's record in **Contacts** by e-mail or phone number, signed by your server. The AI agent then answers with the customer's own name, appointments and history, and your team sees one continuous record.

Without it, the widget works fully; visitors simply stay anonymous, and the AI agent can still collect a name or an e-mail as part of the conversation.

## How the AI agent answers

Web Chat uses the agent's existing setup. Nothing has to be configured twice:

* **Knowledge, guidelines and intents** of the agent apply to web chat exactly as they do to WhatsApp.
* **Working hours, human-first mode and daily limits** from the agent's text settings are respected.
* **Appointments** can be offered and booked in the chat when the Appointments module is on.
* **Handover:** when the AI agent hands over, or a team member takes over in the inbox, the visitor keeps writing in the same thread and sees the team member's name.
* Several messages sent in a row are answered together, in one reply.

## Pause, update, roll back

| Action                | Effect on your website                                      |
| --------------------- | ----------------------------------------------------------- |
| **Publish**           | The new version is live within moments                      |
| **Roll back**         | A previous version becomes live again                       |
| **Unpublish / pause** | The widget disappears from your website; running chats stop |
| **Resume**            | The widget is back, with the last published version         |

## Privacy

* Add your privacy policy link in the designer; it is shown under the message box.
* The chat does not rely on cookies. The widget keeps the visitor's chat in the browser's local storage for up to 7 days so the thread survives page changes.
* The online team row shows first names and photos of available team members only when you add that block to the widget.

## Troubleshooting

| Symptom                                           | Check                                                                                                                                                                         |
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| The widget does not appear                        | The widget is published and not paused; the page's domain is the widget's website or one of its **Allowed domains**; the snippet uses the host and key from **Embed snippet** |
| It appears on the live site but not on staging    | Add the staging domain to **Allowed domains**                                                                                                                                 |
| Blocked by the browser console with a CSP message | Add your workspace host to `script-src` and `frame-src`                                                                                                                       |
| The AI agent does not reply                       | The agent's working hours and human-first settings; your plan's usage balance                                                                                                 |
| Changes are not visible                           | You edited a draft: click **Publish**                                                                                                                                         |
| A signed-in customer is not recognised            | See the troubleshooting table in [Chat Identification](/guides/chat-identification)                                                                                           |

## Next steps

<CardGroup cols={2}>
  <Card title="Chat Identification" icon="user-check" href="/guides/chat-identification">
    Match signed-in customers to their contact by e-mail or phone number
  </Card>

  <Card title="Contact Management" icon="address-book" href="/guides/services/contacts">
    The contacts your web chat conversations belong to
  </Card>
</CardGroup>