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

# Embed Your Avatar on Any Website with Web Widget

> Add your Plural avatar to any website using the Web Widget — customize colors, position, and dimensions, then paste one code snippet to go live.

The Plural Web Widget lets you embed your avatar directly into any website as an interactive chat interface. Visitors see a chat bubble in a corner of the page; clicking it opens a floating window where your avatar speaks and listens just as it would on a dedicated Plural URL. No coding knowledge is required to configure or deploy the widget.

## What Is the Web Widget?

The Web Widget is a customizable chat launcher that you style inside Plural's designer, then add to your website by pasting a single code snippet into your page's HTML. With the widget in place, your site visitors can:

* Ask your avatar questions and receive spoken or text responses.
* Navigate your conversation flow through buttons, menus, and voice input.
* Get real-time assistance, product information, or guided experiences — all without leaving your website.

## Customizing the Widget

Open the Web Widget designer from the **left sidebar** inside Plural. The designer is divided into four settings groups:

<Accordion title="1. General Settings">
  * **Plural Avatar Link** — paste your Plural Avatar URL here.
  * **Avatar Live Link** — choose the live link associated with your avatar.
  * **Widget Position** — place the widget on the **left** or **right** side of the screen.
  * **Widget Hint Position** — set where the hint tooltip appears: left, right, top, or bottom.
</Accordion>

<Accordion title="2. Chat Bubble Settings">
  * **Chat Bubble Color** — choose the background color of the circular launcher button.
  * **Chat Bubble Icon URL** — provide a URL to a custom icon (PNG, JPG, SVG, or WebP) to replace the default launcher graphic.
</Accordion>

<Accordion title="3. Chat Hint Settings">
  * **Chat Hint Title** — enter the tooltip text visitors see before they click (e.g., "Click here to chat").
  * **Hint Background Color** — set the tooltip background color.
  * **Hint Text Color** — set the tooltip text color.
</Accordion>

<Accordion title="4. Chat Widget Settings">
  * **Chat Widget Title** — enter the header text shown when the widget is open (e.g., "Plural Assistant").
  * **Chat Widget Color** — set the header background color.
  * **Chat Widget Text Color** — set the header text color.
  * **Chat Widget Height** — define the open widget height in pixels.
  * **Chat Widget Width** — define the open widget width in pixels.
  * **Chat Widget Border Radius** — set the corner rounding of the widget panel in pixels.
</Accordion>

## Embedding the Widget on Your Website

<Steps>
  <Step title="Finish customizing">
    Complete all settings in the Web Widget designer until the preview looks the way you want.
  </Step>

  <Step title="Copy the embed code">
    The embed code snippet is shown in the **bottom-right corner** of the designer page. Click to copy it.
  </Step>

  <Step title="Paste into your website">
    Open your website's HTML source and paste the code snippet inside the `<body>` tag of any page where you want the widget to appear. Save and publish your page.
  </Step>
</Steps>

<Tip>
  Paste the embed code just before the closing `</body>` tag to ensure the widget loads after the rest of your page content and does not slow down initial page rendering.
</Tip>

## Web Widget vs. Plural Embedded

Plural offers two ways to integrate an avatar into external products. Use the table below to choose the right approach for your project:

| Feature                     | Plural Web Widget                                                      | Plural Embedded                                              |
| --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------ |
| **Creation Process**        | No coding required; easy setup                                         | Requires programming for integration                         |
| **Operational Environment** | Managed within Plural.io; hosted on your website                       | Flexible integration into any product or service             |
| **Integration Method**      | Code snippet pasted into website body                                  | Library-based; integrated into apps or websites              |
| **Customization**           | Visual designer for appearance                                         | Programmatic control via API/SDK                             |
| **Pricing**                 | Styler included with Plural.io subscription; interaction-based billing | Separate pricing based on Embedded usage                     |
| **User Interface**          | Non-developer friendly                                                 | Developer-centric; requires coding skills                    |
| **Control & Hosting**       | Managed by Plural.io; displayed on your site                           | Self-hosted and fully controlled by you                      |
| **Advanced Features**       | Simplified chat features for website integration                       | Advanced TTS, STT, standalone Avatar, and custom app support |

**Choose Web Widget** if you want a fast, no-code way to add an avatar chat experience to your website.

**Choose Plural Embedded** if you need deep custom integration, have development resources, and require advanced avatar capabilities in a bespoke application.
