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

# How-To: Widget

> Learn about the Fluents.ai widget and how to add it to your website.

# Widget

The **Fluents.ai Widget** lets you embed a web-based AI Agent directly on your website, giving users instant access to conversational support and interaction.

***

## How It Works

The widget is a script you add to your website.\
Once installed, it loads a web Agent configured in your Fluents.ai settings.

All widget settings are available under the **Widget tab** in **Settings**.

<img src="https://mintcdn.com/fluents/W3_lTopfh-MPxgIG/images/how-to/widget/widget01.png?fit=max&auto=format&n=W3_lTopfh-MPxgIG&q=85&s=ebad9073dde774e5728357c6c9afe747" alt="Widget Settings Example" width="2954" height="1178" data-path="images/how-to/widget/widget01.png" />

***

## Authentication Options

You can authenticate the widget in two ways:

### 1. Direct JWT Token

* Select the Agent the widget should use.
* Configure token expiration:
  * 30 minutes
  * 1 hour
  * 3 hours
  * 6 hours
  * Never expire

### 2. API Sign-In Key

* Use an API key to dynamically generate access tokens for users.
* Recommended for personalized or authenticated website experiences.

<img src="https://mintcdn.com/fluents/W3_lTopfh-MPxgIG/images/how-to/widget/widget02.png?fit=max&auto=format&n=W3_lTopfh-MPxgIG&q=85&s=7193aa9f329fe448fc86c185135ef249" alt="Widget Example" width="2900" height="1490" data-path="images/how-to/widget/widget02.png" />

***

## Embedding the Widget

* Add the script to any page where you want the Agent to appear.
* Positioning and design are fully customizable.

***

## Next Steps

Continue setup with the [Roles Guide](./roles).