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

# Website Widget

> Drop one script tag into your clinic website. Robyn appears as a chat widget — answers questions, books, captures leads.

<Info>
  **Why this matters.** Most clinic websites have a "Contact us" form
  that captures maybe 5% of visitors. The website widget is in-line,
  always available, and converts visitors who would have bounced. Robyn
  can answer their question and book the appointment in the same chat
  before they leave the page.
</Info>

## How it works

You add a single `<script>` tag to your website. The widget loads as a chat bubble in the bottom corner — open by default on mobile, closed on desktop (configurable). Robyn handles the conversation:

* Answers questions from your knowledge base
* Suggests appointment times and books straight into your PMS
* Captures patient details if they're not ready to book
* Escalates to your team via email if a human is needed

Conversations sync to the same dashboard as calls and SMS — same transcripts, same outcome filters.

## How Robyn handles website chat

<CardGroup cols={2}>
  <Card title="Visitor lands on your site" icon="globe">
    Widget loads silently. A subtle prompt ("How can I help?") appears after 5 seconds (configurable).
  </Card>

  <Card title="Visitor opens chat" icon="message">
    Robyn opens with your custom greeting. No form to fill out, no email gate.
  </Card>

  <Card title="Visitor asks about service / pricing" icon="circle-question">
    Robyn answers from your [knowledge base](/features/knowledge-base). If she can't, the question is logged as a knowledge gap.
  </Card>

  <Card title="Visitor wants to book" icon="calendar-check">
    Robyn checks live PMS availability, suggests slots, books on confirmation. If they're not a patient yet, she captures the intake fields you've configured.
  </Card>

  <Card title="Visitor needs a human" icon="user-headset">
    Email notification with the full conversation goes to your escalation address. Visitor can also leave a callback number.
  </Card>

  <Card title="Visitor closes the tab mid-conversation" icon="xmark">
    Partial transcript and any captured details are saved. If they came back from an email or referral source, the team can follow up.
  </Card>
</CardGroup>

## What your patient sees

> *(Visitor browsing services page. Chat bubble in bottom-right corner.)*
>
> **Robyn:** Hi 👋 — anything I can help you find? I can answer questions about our services or book an appointment for you.
>
> **Visitor:** Do you have a podiatrist who does ingrown toenails on Saturdays?
>
> **Robyn:** Yes — Dr Patel does Saturday clinics. Looking at the next two Saturdays: 10am and 2:30pm on the 17th, 11am and 3pm on the 24th. Want me to book one in?
>
> **Visitor:** 10am on the 17th please.
>
> **Robyn:** Sure — I'll just need a few details. Your name?

## Setup

<Steps>
  <Step title="Get your widget script">
    In Routiq: **Settings** → **Channels** → **Website Widget** → **Get Embed Code**.

    You'll see a snippet like:

    ```html theme={null}
    <script src="https://widget.routiq.ai/v1/widget.js"
            data-clinic="your-clinic-slug"
            async defer></script>
    ```
  </Step>

  <Step title="Add it to your website">
    Paste the script tag into your website's `<head>` or just before the closing `</body>`. Common platforms:

    <Tabs>
      <Tab title="WordPress">
        **Appearance** → **Theme File Editor** → `header.php` (or use a "Code Snippets" plugin if your theme doesn't allow direct edits).
      </Tab>

      <Tab title="Squarespace">
        **Settings** → **Advanced** → **Code Injection** → paste into the **Header** field.
      </Tab>

      <Tab title="Wix">
        **Settings** → **Custom Code** → **Add Custom Code** → paste, set "Place Code In" to **Body — end**, set "Apply to" to **All pages**.
      </Tab>

      <Tab title="Webflow">
        **Project Settings** → **Custom Code** → paste into **Footer Code** → publish the site.
      </Tab>

      <Tab title="Shopify">
        **Online Store** → **Themes** → **Edit Code** → `theme.liquid` → paste before `</body>`.
      </Tab>
    </Tabs>

    The widget appears immediately on next page load.
  </Step>

  <Step title="Customise appearance">
    **Settings** → **Channels** → **Website Widget** → **Appearance**:

    * **Position** — bottom-right (default), bottom-left
    * **Colour** — defaults to your brand colour, customisable
    * **Greeting message** — first message Robyn sends when widget opens
    * **Auto-open delay** — seconds before chat bubble pops up (0 = always open)
    * **Mobile behaviour** — open by default / closed
  </Step>

  <Step title="Customise the welcome flow">
    Decide what Robyn shows when a visitor first opens the widget:

    * **Free chat** (default) — visitor types whatever they want
    * **Quick options** — show buttons like "Book", "Pricing", "Contact" before free chat
    * **Manual reply mode** — your team can intervene and reply directly from the dashboard while the visitor is on the page
  </Step>

  <Step title="Test on your website">
    Open your site in an incognito window. The widget should appear. Open it, ask a question Robyn should know, and try a booking. The conversation appears in **Dashboard** → **Messages** in real time.
  </Step>
</Steps>

## Manual replies (live takeover)

Your team can take over a chat in real time. From **Dashboard** → **Messages**, click a live conversation → **Reply to visitor**. Your message appears as if from Robyn (same brand). The visitor sees a typing indicator, then your reply. Useful for VIP patients, complex enquiries, or sales-style follow-ups.

## Common questions

<AccordionGroup>
  <Accordion title="Will the widget slow my website down?">
    No — it's an async-deferred script under 30KB gzipped. It loads after your page is rendered, so it doesn't affect Lighthouse / Core Web Vitals scores.
  </Accordion>

  <Accordion title="Can I hide it on certain pages?">
    Yes. Add `data-routiq-hide="true"` to any page's `<body>` tag, or configure URL exclusions in **Settings** → **Channels** → **Website Widget** → **Page Rules**.
  </Accordion>

  <Accordion title="Does it work on mobile?">
    Yes — it's responsive. On mobile, the chat opens full-screen by default for easier typing.
  </Accordion>

  <Accordion title="What languages does it support?">
    English (AU/UK/US/IE/NZ variants) at launch. Spanish and French are in beta. Email us if you need another language.
  </Accordion>

  <Accordion title="Can I A/B test the widget greeting?">
    Yes — **Settings** → **Channels** → **Website Widget** → **Experiments**. Define variants and traffic split; the dashboard shows conversion rate by variant.
  </Accordion>
</AccordionGroup>

## Next

<CardGroup cols={2}>
  <Card title="Knowledge base" icon="book" href="/features/knowledge-base">
    The richer your knowledge base, the more questions Robyn can answer in the widget.
  </Card>

  <Card title="Appointment scheduling" icon="calendar" href="/features/appointment-scheduling">
    How Robyn turns a website chat into a confirmed booking.
  </Card>
</CardGroup>
