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

# Add a Website Chat Widget to Your Site with Fliqr AI

> Embed the Fliqr AI chat widget on any website — customize colors, avatar, and welcome messages, then pass visitor data for personalized conversations.

Your website is where most customers form their first impression of your business. A chat widget gives visitors an immediate way to ask questions, get support, or move through a purchase — without leaving the page. Fliqr AI's website chat widget connects directly to your flows and AI Agents, so responses are automated from the moment someone opens the chat. This page covers how to embed the widget, customize its appearance, pass visitor data for personalization, and the channel's limitations.

## Prerequisites

* A website where you can add a `<script>` tag — any platform works, including **WordPress, Shopify, Webflow, Squarespace, Wix**, or custom HTML
* Admin access to your site's theme or template files (or a plugin manager, for WordPress)

## Connect Website Chat to Fliqr AI

<Steps>
  <Step title="Open channel settings">
    In Fliqr AI, go to **Settings → Channels → Website Chat**.
  </Step>

  <Step title="Customize the widget">
    Configure the appearance options (color, avatar, welcome message, position). The right-hand panel shows a live preview as you make changes.
  </Step>

  <Step title="Copy the embed script">
    Click **Copy Script**. The snippet looks like:

    ```html theme={null}
    <script>
      (function(d,s,id){ /* ... */ })(document,'script','fliqr-widget');
    </script>
    ```
  </Step>

  <Step title="Paste the script on your site">
    Add the script tag just before the closing `</body>` tag on every page where you want the widget to appear. If you use a tag manager (Google Tag Manager, Segment), you can deploy it from there as a Custom HTML tag.
  </Step>

  <Step title="Verify the widget">
    Load your website in a browser. The chat bubble should appear in the corner you selected. Click it to confirm the widget opens and your greeting message displays.
  </Step>
</Steps>

\[SCREENSHOT: Website Chat customization panel with live preview on the right side]

## Supported message types

| Feature                  | Description                                                                       |
| ------------------------ | --------------------------------------------------------------------------------- |
| Text messages            | Visitors type free-text messages; your flows and AI Agents respond in kind        |
| Quick reply buttons      | Present tappable reply options below a bot message to guide conversation          |
| Rich cards               | Image, title, subtitle, and button combinations in carousel or single-card format |
| File attachments         | Visitors can upload files (images, PDFs); your flow can reference the attachment  |
| Visitor identity prefill | Pass name, email, and custom fields from your site's logged-in session            |

All widget appearance settings are configured in **Settings → Channels → Website Chat**. Available options include primary color, header text, avatar image URL, welcome message, input placeholder, chat bubble icon, screen position (bottom-left or bottom-right), font family, and greeting delay (seconds before the widget auto-opens; 0 disables auto-open).

<Tip>
  Set a greeting delay of **3–5 seconds** so the widget does not interrupt visitors the moment they land on your page. Visitors who are still reading are less likely to engage with an immediate popup — a short delay lets them settle before the prompt appears.
</Tip>

When a logged-in user visits your site, pass their identity to Fliqr AI so flows and AI Agents can address them by name and prefill known data:

```javascript theme={null}
window.FliqrAI = window.FliqrAI || [];
window.FliqrAI.push(['identify', {
  name: 'Jane Smith',
  email: 'jane@example.com',
  customField: 'value'
}]);
```

Place this block **before** the widget embed script so the data is available when the widget initialises. The `name` and `email` fields map to standard contact fields in Fliqr AI; any other key is treated as a custom field.

If your site runs on WordPress, go to **Plugins → Add New**, search for **Fliqr AI**, install and activate it, then paste your **Widget ID** (from Settings → Channels → Website Chat) into the plugin settings. The widget loads on all pages automatically — no manual script editing required.

<Note>
  Visitor identity data passed via `window.FliqrAI.push` is used only to identify and update the contact record in Fliqr AI. Review your privacy policy to confirm this is consistent with how you describe data collection to your users.
</Note>

## Limitations

<Warning>
  **Browser-only.** The website chat widget runs in a web browser. It does not support native mobile push notifications. If you need to re-engage mobile app users outside an active browser session, use the Fliqr AI API to send messages through a mobile-appropriate channel (SMS, WhatsApp, or Telegram).

  **One widget per channel entry.** Each Website Chat channel in Fliqr AI generates one embed script. If you want different widgets on different sites (separate brands, separate flows), create a separate channel entry for each.
</Warning>

## What's next

<CardGroup cols={2}>
  <Card title="Flow Builder overview" icon="diagram-project" href="/docs/core-concepts/flows">
    Build the conversation flow your widget triggers when a visitor opens the chat.
  </Card>

  <Card title="AI Agents" icon="robot" href="/docs/core-concepts/ai-agents">
    Attach an AI Agent to answer open-ended visitor questions automatically.
  </Card>

  <Card title="Contact custom fields" icon="sliders" href="/docs/core-concepts/contacts">
    Define custom fields to store visitor data passed through the JS identify call.
  </Card>

  <Card title="Live chat handoff" icon="headset" href="/docs/core-concepts/ai-agents/human-handover">
    Route conversations to a human agent when the bot cannot resolve the inquiry.
  </Card>
</CardGroup>