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

# Website Widget

> Add an AI chat bubble or voice call button to your website. Visitors can ask questions, get answers, and book appointments without leaving your site.

The Website Widget is a small embeddable component that sits in the corner of your website. Visitors can open it to chat with your AI assistant via text, or click to start a voice call — all without leaving the page.

It works on any website platform and takes about two minutes to install.

## Two modes

**Chat bubble** — visitors type questions and receive text responses. The AI answers FAQs, qualifies leads, collects contact information, and can book appointments directly in the chat window.

**Voice call button** — visitors click to start a live voice conversation with your AI receptionist. Works like a phone call, but through the browser.

You can enable one or both modes, depending on your preference.

## Key benefits

<CardGroup cols={2}>
  <Card title="Capture leads 24/7" icon="user-plus" href="/features/website-widget">
    Engage every visitor, even when you are offline. Leads are captured and saved automatically.
  </Card>

  <Card title="Instant answers" icon="bolt" href="/features/website-widget">
    Reduce bounce rate by answering visitor questions before they leave your site.
  </Card>

  <Card title="Direct booking" icon="calendar-check" href="/features/website-widget">
    Visitors can book appointments from the chat window — no phone call or form required.
  </Card>

  <Card title="Works everywhere" icon="globe" href="/features/website-widget">
    One embed snippet works on WordPress, Squarespace, Wix, Webflow, and custom HTML sites.
  </Card>
</CardGroup>

## Installation

<Steps>
  <Step title="Go to Website Widget">
    In your dashboard, navigate to **Website Widget** (Chat Bubble) in the sidebar.
  </Step>

  <Step title="Configure your widget">
    Set up the widget appearance and behavior:

    * **Greeting message** — the first thing visitors see when they open the chat (e.g., "Hi! How can I help you today?")
    * **Color** — pick a primary color to match your brand
    * **Position** — bottom-right or bottom-left corner
    * **Mode** — chat, voice, or both
  </Step>

  <Step title="Copy the embed code">
    Click **Copy embed code**. Your unique snippet will look like this:

    ```html theme={null}
    <script
      src="https://cdn.boltcall.com/widget.js"
      data-token="YOUR_EMBED_TOKEN"
      async
    ></script>
    ```
  </Step>

  <Step title="Paste into your website">
    Add the snippet to your website just before the closing `</body>` tag. Instructions by platform:

    **WordPress** — use a plugin like *Insert Headers and Footers*, or paste directly into your theme's `footer.php`.

    **Squarespace** — go to Settings → Advanced → Code Injection → Footer.

    **Wix** — go to Settings → Custom Code → Body (End of body tag).

    **Webflow** — go to Project Settings → Custom Code → Footer Code.

    **Custom HTML** — paste before `</body>` in your HTML file.
  </Step>

  <Step title="Verify the widget loads">
    Visit your website in a browser. The chat bubble should appear in the corner within a few seconds of the page loading. Click it to confirm the greeting message appears correctly.
  </Step>
</Steps>

## Chat widget features

When a visitor opens the chat bubble, your AI assistant can:

* Answer questions using your [knowledge base](/dashboard/knowledge-base)
* Collect the visitor's name, phone number, and email naturally through conversation
* Qualify the lead by asking about their needs, timeline, or budget
* Book an appointment directly (requires [calendar integration](/integrations/calendar))
* Hand off to a human if the visitor asks to speak with someone

All conversations are logged in your dashboard with full transcripts.

## Voice call button

When voice mode is enabled, visitors see a call button alongside (or instead of) the chat bubble. Clicking it starts a browser-based voice call with your AI receptionist. No phone number dialing required — it works like a phone call but through the browser.

<Note>
  Voice mode requires your AI Receptionist to be configured and active. See [AI Receptionist](/features/ai-receptionist) for setup instructions.
</Note>

## Customization

You can configure the following from the [dashboard](/dashboard/overview):

| Setting          | Options                              |
| ---------------- | ------------------------------------ |
| Widget color     | Any hex value                        |
| Position         | Bottom-right, bottom-left            |
| Greeting message | Custom text                          |
| Chat mode        | Chat only, voice only, or both       |
| Pages to show on | All pages (default) or specific URLs |

## Performance

The widget script is asynchronous and lightweight. It loads after your page content and does not affect page speed or Core Web Vitals scores. It is also fully responsive and works on mobile, tablet, and desktop.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Will the widget slow down my website?">
    No. The script loads asynchronously, meaning it does not block your page from rendering. Your page speed scores are not affected.
  </Accordion>

  <Accordion title="Does it work on mobile devices?">
    Yes. The widget is fully responsive and adapts to any screen size.
  </Accordion>

  <Accordion title="Can I see what visitors asked?">
    Yes. All chat conversations are saved and accessible from your dashboard. You can review transcripts, see which questions come up most often, and use that to improve your knowledge base.
  </Accordion>

  <Accordion title="Can visitors still contact me through other methods?">
    Yes. The widget adds a new contact option but does not replace your existing phone number, email, or contact form. Visitors choose how they want to reach you.
  </Accordion>

  <Accordion title="What if my embed token changes?">
    If you need to regenerate your embed token, update the `data-token` value in your website's embed snippet. Old tokens stop working immediately after regeneration.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="AI Receptionist" icon="phone" href="/features/ai-receptionist">
    Power the voice call button with your AI receptionist.
  </Card>

  <Card title="Knowledge base" icon="book" href="/dashboard/knowledge-base">
    Add content your AI uses to answer visitor questions.
  </Card>

  <Card title="Instant Lead Reply" icon="bolt" href="/features/instant-lead-reply">
    Follow up with leads from missed calls and forms.
  </Card>

  <Card title="Dashboard overview" icon="gauge" href="/dashboard/overview">
    View widget conversations and captured leads.
  </Card>
</CardGroup>