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

# Web widget

> Embed Quikly's AI pre-sales agent on your website to qualify technical leads and generate proposals 24/7.

The web widget is an AI-powered pre-sales agent that lives on your website. It greets visitors, asks technical discovery questions, qualifies leads, and can generate proposal drafts — all while you sleep. You review and approve before anything goes out.

## Set up the widget

<Steps>
  <Step title="Go to widget settings">
    In the Quikly app, navigate to **Settings → Integrations → Install Web Widget**.
  </Step>

  <Step title="Configure the agent">
    Set the following options:

    * **Greeting message** — the first message visitors see when the widget opens
    * **Tone** — professional, friendly, or technical (affects how the agent communicates)
    * **Allowed domains** — list of domains where the widget can load (e.g., `youragency.com`, `www.youragency.com`)
  </Step>

  <Step title="Copy the embed script">
    Quikly generates a snippet with your unique `publicKey`. Copy it.
  </Step>

  <Step title="Add the script to your website">
    Paste the snippet before the closing `</body>` tag on every page where you want the widget to appear.
  </Step>
</Steps>

## Embed code

The embed snippet looks like this:

```html theme={null}
<script
  src="https://widget.getquikly.com/agent.js"
  data-public-key="pk_your_public_key_here"
  async
></script>
```

The `publicKey` identifies your account and loads your widget configuration (greeting, tone, allowed domains). No API key is exposed in client-side code.

## Domain allowlist

For security, the widget only loads on domains you explicitly allow. If a page tries to load the widget from an unauthorized domain, the script silently does nothing.

Add domains in **Settings → Integrations → Install Web Widget → Allowed Domains**. Include all variations your site uses:

* `youragency.com`
* `www.youragency.com`
* `staging.youragency.com` (if you want it on staging too)

<Warning>
  Do not use wildcards. Each domain must be listed explicitly.
</Warning>

## What the widget does

When a visitor opens the widget:

1. The agent displays your **greeting message**
2. It asks about the visitor's **project, stack, and timeline**
3. Based on the conversation, it **qualifies the lead** as a potential fit
4. If qualified, the agent can generate a **proposal draft** using your rate cards and services
5. You receive a **notification** in Quikly with the lead session details
6. You **review, adjust, and approve** — nothing is shared without your explicit OK

The widget uses the same AI engine as the in-app Agent Mode, tuned to your agency's tone and services.

## Plan availability

| Plan         | Widgets         | Conversations |
| ------------ | --------------- | ------------- |
| Starter      | 1 widget        | 10 per month  |
| Professional | 1 widget        | Unlimited     |
| Agency       | Up to 3 widgets | Unlimited     |
| Lifetime     | 1 widget        | Unlimited     |

## Customization

From the widget settings page, you can configure:

| Setting              | Description                                               |
| -------------------- | --------------------------------------------------------- |
| **Greeting message** | The opening message the agent shows to visitors           |
| **Tone**             | Communication style: professional, friendly, or technical |
| **Allowed domains**  | Domains where the widget is permitted to load             |
| **Language**         | Primary language for the agent (English or Spanish)       |

The widget inherits your company name, services, and rate cards from your Quikly profile. Make sure your profile is complete so the agent has context about your offerings.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Widget does not appear on my site">
    * Verify the domain is in your **allowed domains** list (including `www` if applicable)
    * Check that the script is placed before `</body>` and loads without console errors
    * Confirm your `publicKey` is correct by comparing it with **Settings → Integrations**
  </Accordion>

  <Accordion title="Widget loads but agent does not respond">
    * Check your Quikly subscription is active
    * Verify you have remaining widget conversations for the month (Starter plan: 10/month)
    * Look for network errors in the browser developer console
  </Accordion>

  <Accordion title="Agent gives irrelevant answers about my services">
    The agent pulls context from your **Quikly profile**. Go to **My Profile** and make sure your company description, services, skills, and rate cards are filled in. The more context it has, the better it qualifies leads.
  </Accordion>
</AccordionGroup>