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

# Add the chat widget to your website

> Put the Lua chat widget on any page with one script tag and talk to your production agent from the browser

After this quickstart, end users on your site open a chat button and talk to your [agent](/concepts/agents) in production. You need an agent that is live in production (see [Release an agent](/ship/releasing)) and its agent ID, the `agentId` in `lua.skill.yaml` (see [Project structure](/get-started/project-structure)). The widget is a hosted script; there is no npm package to install.

<Steps>
  <Step title="Dashboard: allow your domain">
    In the [admin dashboard](https://admin.heylua.ai), open the agent, select the **Settings** gear at the right end of its tab bar, then **Chat widget**. Under **Allowed websites**, add each domain that loads the widget, for example `www.example.com`, then save with **Create channel** (**Update configuration** when the channel exists).

    The widget looks up admin dashboard settings by the hostname it loads on. A domain that isn't listed gets none, and development hosts (`localhost`, `127.0.0.1`, private IP addresses, and hosts ending in `.local`, `.localhost`, `.test`, `.example`, or `.invalid`) never do. Inline options work everywhere, including `localhost`, so this step only matters when the admin dashboard should control appearance: on a listed domain, `window.LuaPop.init()` with no arguments uses the admin dashboard settings alone, and anything you pass inline overrides them.

    <Frame caption="The Chat widget page: allowed websites, the install snippet, and the appearance settings">
      <img src="https://mintcdn.com/luaglobal/5airD3u2P6mv3Ovl/images/channels/admin-widget-customization.png?fit=max&auto=format&n=5airD3u2P6mv3Ovl&q=85&s=0946122dad269fc855e4256a9619a839" alt="Chat widget customization panel in the admin dashboard" width="950" height="493" data-path="images/channels/admin-widget-customization.png" />
    </Frame>
  </Step>

  <Step title="Code: add the script">
    Paste both tags before the closing `</body>` tag, with your agent ID.

    ```html theme={null}
    <script src="https://lua-ai-global.github.io/lua-pop/lua-pop.umd.js"></script>
    <script>
      window.LuaPop.init({
        agentId: "agent_abc123",
        environment: "production"
      });
    </script>
    ```

    Pass `environment: "production"` whenever you pass any option. The widget infers it only when admin dashboard settings are found for the domain; otherwise its built-in fallback points at an internal platform where your agent does not exist.
  </Step>

  <Step title="Browser: send a message">
    Load the page. A **Chat with us** button appears in the bottom-right corner; click it and send a message. The reply streams in from the production agent, with the same persona and skills that answer on every other [channel](/concepts/channels), and the conversation resumes on the next visit from the same browser. The widget has no sandbox mode: to try unreleased code, use `lua chat` (see [Test an agent before you release](/ship/testing)).
  </Step>
</Steps>

<Check>
  In the browser console, `window.LuaPop.config.agentId` prints your agent ID and `window.LuaPop.config.environment` prints `production`. If the button is missing, see [Troubleshoot the widget](/channels/web-widget/troubleshooting).
</Check>

## Next steps

<Columns cols={2}>
  <Card title="Widget configuration" href="/channels/web-widget/configuration">Every option, its default, and what `init()` returns.</Card>
  <Card title="Style the widget" href="/channels/web-widget/styling">Theme, colors, button, and CSS inside the shadow root.</Card>
  <Card title="Track widget events" href="/channels/web-widget/events-and-analytics">Forward opens and messages to your analytics.</Card>
  <Card title="Frameworks" href="/channels/web-widget/frameworks">Mount the widget once from a React, Vue, Angular, or Svelte component.</Card>
</Columns>

<Columns cols={2}>
  <Card title="Troubleshooting" href="/channels/web-widget/troubleshooting">A missing button, a chat that won't open, stale conversations, styling, and voice.</Card>
  <Card title="Channels" href="/concepts/channels">How the widget relates to WhatsApp, email, and the rest.</Card>
</Columns>