# Install the widget

Source: https://docs.revoplyai.com/widget/

> Add the RevoplyAI chat widget to a website with one script tag, its attributes, or an iframe.

The website widget is a chat panel on your own site, answered by your assistant and your
team like any other channel (`channelType: web_widget`). It ships as two parts:

* `embed.js`, a small loader that draws the launcher button and creates the panel when a
  visitor opens it;
* the panel itself, loaded in an iframe from `widget.revoplyai.com` only when it is first
  needed. A visitor who never opens the chat downloads only the loader and one small
  configuration request.

## Script tag [#script-tag]

Create a **Web widget** channel in the dashboard; its settings show the snippet with your
channel id. Paste it before `</body>` on every page that should show the chat:

```html
<script
  src="https://widget.revoplyai.com/embed.js"
  data-channel-id="YOUR_CHANNEL_ID"
  defer
></script>
```

### Attributes [#attributes]

| Attribute           | Default                | Effect                                                                                                    |
| ------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
| `data-channel-id`   | Required               | The widget channel's id.                                                                                  |
| `data-lang`         | The browser's language | `en` or `ar`. Arabic also switches the panel to right-to-left.                                            |
| `data-position`     | `bottom-right`         | `bottom-right` or `bottom-left`.                                                                          |
| `data-color`        | The channel's colour   | The launcher's colour until the channel's settings have loaded.                                           |
| `data-auto-open`    | Off                    | Milliseconds after which the panel opens by itself.                                                       |
| `data-teaser`       | On                     | `false` hides the greeting bubble next to the launcher.                                                   |
| `data-teaser-delay` | `6000`                 | Milliseconds before the greeting bubble appears.                                                          |
| `data-launcher`     | Shown                  | `none` hides our button; open the panel from your own with the [JavaScript API](/widget/javascript-api/). |

The brand colour, bot name, welcome message and suggested prompts come from the channel's
settings in the dashboard; `data-color` only paints the launcher until they load. The
launcher's position and auto-open are set by the attributes above alone.

## Iframe [#iframe]

To place the panel yourself instead of using the launcher, frame it directly:

```html
<iframe
  src="https://widget.revoplyai.com/YOUR_CHANNEL_ID"
  title="Chat"
  style="border: 0; width: 400px; height: 600px"
></iframe>
```

The iframe has no launcher, no greeting bubble and no JavaScript API. Use it on sites
whose Content-Security-Policy forbids inline styles; see
[Security and CSP](/widget/security-and-csp/).

## Behaviour worth knowing [#behaviour-worth-knowing]

* A conversation is created on the visitor's first message, not on page load, so browsing
  never creates empty conversations in your inbox.
* A visitor's session lasts 72 hours from their last activity, on that browser.
* If the panel was open, it stays open as the visitor moves between pages of your site.
* Replies arriving while the panel is closed show an unread badge on the launcher.