> ## 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.

# Web Widget

> Put an agent on your website so visitors can talk to it in the browser, with no phone number involved.

The **Web Widget** puts one of your agents on your website. A visitor clicks, talks in
their browser, and the agent answers. No phone number, no dialing.

Each agent has its own widget, so different pages can run different agents.

***

## Where it lives

Open the agent, then **More** at the end of the tab row, then **Web Widget**.

<Frame>
  <img src="https://mintcdn.com/fluents/Ntis-q5QWqwCqRQw/images/product/widget/generate-jwt.jpg?fit=max&auto=format&n=Ntis-q5QWqwCqRQw&q=85&s=7b483aac5688081f21d1503e759a4420" alt="The Web Widget tab showing the Generate JWT form and the Widget Installation Instructions snippet" width="1496" height="697" data-path="images/product/widget/generate-jwt.jpg" />
</Frame>

The tab has two options, and which one you want depends on whether the site is a test
or a real product.

| | **Generate JWT** | **API JWT Generation** |
| - | - | - |
| Good for | Testing, landing pages, simple sites | Production |
| What you copy | One token, by hand | An API key your backend uses |
| Tokens are made | Once, by you | On demand, by your server |

***

## Generate JWT

Use this to get something working today.

The **Widget agent** field shows the agent the widget will connect to. It is fixed to
the agent you are editing.

**JWT lifetime** decides how long the token stays valid. Options are 30 minutes,
1 hour, 3 hours, 6 hours and Never expire. The default is 1 hour.

Click **Generate JWT** and copy the token.

<Warning>
  **Never expire** is for testing only. A token pasted into a public web page is
  readable by anyone who views the source, and one that never expires never stops
  being useful to them.
</Warning>

***

## Install it on your site

Paste this immediately before the closing `</body>` tag on any page where you want the
widget, and replace the placeholder with your token.

```html theme={null}
<div id="webcall-container"></div>
<script src="https://storage.googleapis.com/fluents-assets/fluents-web-widget/fluents-web-widget.iife.js"></script>
<script>
  // Initialize the widget
  window.FluentsWebWidget.init({
    targetId: 'webcall-container',
    jwtToken: 'JWT_FROM_CLICKING_GENERATE_JWT',
  });
</script>
```

The dashboard shows this same snippet with a copy button, so you do not have to
retype it.

***

## API JWT Generation

Use this for a real site.

Instead of pasting a token that eventually expires and breaks your page, you generate
an **API key**, keep it on your server, and have your server mint a short-lived token
for each visitor. The page always gets a fresh token, and the key itself never reaches
the browser.

Click **Generate API key**. The key is shown once, so store it somewhere safe
immediately.

<Warning>
  The API key belongs on your backend and nowhere else. Anyone who can read it can
  generate tokens for your agent. If you put it in client-side code, you have
  published it.
</Warning>

Existing keys are listed with the date they were created and can be removed. Removing
a key immediately stops anything using it from generating new tokens.

***

## Test before you install

Use **Test Agent** on the agent and choose **Start Browser Call**. That is the same
browser conversation your visitors will get, so if the agent behaves there it will
behave in the widget.

If it works in the dashboard but not on your site, the problem is the token or the
snippet, not the agent.

***

## Where to go next

* Configure what the agent says: **[Agents](/product/features/agent)**
* Let the visitor move to a phone call: **[Switch Communication](/product/features/skills/switch-communication)**
* React to widget conversations in your own systems: **[Webhooks](/product/features/webhook)**
* Read the conversations afterwards: **[Calls](/product/features/call)**


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.