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

# Voice widget on your website

> Add a Call + Chat launcher to any website with one script tag — visitors talk or type, no phone number needed.

This guide adds a **Call + Chat** launcher to your website. Visitors can type to your assistant or start a live voice call in the browser — the same web agent behind the launcher on many Nixflex-powered sites. It installs with a single script tag.

## What you'll build

A floating launcher on your site that lets visitors:

* Chat by text with your assistant
* Start a live voice call in the browser — no phone number, no signup
* Have every conversation stored and viewable in your dashboard

<Note>
  One phone number equals one web agent — one brain, one knowledge base, one conversation inbox. The visual design lives in the embed snippet, so the same number can wear different designs on different sites.
</Note>

## Before you start

* A phone number set up with a web agent in your dashboard
* The agent ID for that number

## Steps

<Steps>
  <Step title="Add the launcher script to your site">
    Paste the snippet into your site's HTML. The script is served from Nixflex and updates automatically — you never need to re-copy it for improvements.

    ```html theme={null}
    <script
      src="https://nixflex.com/button.js"
      data-agent-id="agent_xxx"
      data-design="1"
      data-color="#7C6BEF"
      async>
    </script>
    ```

    Replace `agent_xxx` with your agent ID. `data-design` and `data-color` are optional — leave them off for the defaults.
  </Step>

  <Step title="Pick a launcher design">
    Eight launcher designs are available through `data-design`. The design is only the *clothing* — the number is the *brain*, so switching designs never changes what the assistant knows or where conversations go. Browse the design list in [Web agent](/web-assistant/overview) and set the number that fits your site.
  </Step>

  <Step title="Match your brand colour">
    Set `data-color` to your brand's hex colour. The launcher, chat panel, buttons, and the call screen all tint themselves from that one value.
  </Step>

  <Step title="Test chat and voice">
    Open your page and use the launcher:

    * Send a text message — the assistant should reply in chat.
    * Start a voice call — you should hear the assistant respond live in the browser.

    Then open your dashboard — the conversation should appear in your web agent's inbox.
  </Step>
</Steps>

## What's next

* See [Web agent](/web-assistant/overview) for the full attribute list, all eight designs, and quick-reply chips.
* Read [Web Calls](/concepts/web-calls) for how browser voice calls connect.
* Turn on [Post-call analysis](/advanced/post-call-analysis) to learn what visitors ask.

<CardGroup cols={2}>
  <Card title="Web agent" icon="comment" href="/web-assistant/overview">
    Every launcher attribute, design, and setting.
  </Card>

  <Card title="Web Calls" icon="globe" href="/concepts/web-calls">
    How in-browser voice calls work end to end.
  </Card>
</CardGroup>