# Install the widget

The widget is one script tag. Your site does not need React, Vue or any other framework.

```html
<script
  src="https://widget.docora.dev/loader.js"
  data-project="pk_your_public_id"
  async
></script>
```

`data-project` is your public project id. It is not a secret: anyone can read it in your page source. What protects your project is the list of **allowed origins**, described below.

## What the script does

* It is about 1 KB. It waits until your page has finished loading, then adds one fixed iframe in the bottom corner.
* The chat lives inside that iframe, in a different origin from your site. Your CSS cannot reach it, and it cannot read your page, cookies or storage.
* The assistant code downloads only when a visitor opens the chat. Code highlighting loads per language, on demand.
* On phones the chat opens full screen.

## Allowed origins

A project answers only requests from the origins you list, such as `https://docs.example.com`. An origin is the scheme, host and port, without a path. `https://example.com` does not cover `https://docs.example.com`; list each one.

If a site that is not listed embeds your script, the widget hides itself and shows nothing. Origin checks keep your quota from being spent on other sites, but they are not authentication: do not treat them as a way to protect private content.

## Interface language

The widget interface follows the visitor's browser language: English, Indonesian, Spanish, French, German, Portuguese, Russian, Japanese, Chinese, Korean, Arabic (right to left), Hindi, Vietnamese and Thai. Other languages show English. This is separate from the language of the answer, which always matches the question.

## Appearance

Set these per project in the dashboard or with the [update project](/api/projects) call:

| Setting            | What it does                                                                                                |
| ------------------ | ----------------------------------------------------------------------------------------------------------- |
| `name`             | Shown above each answer. Up to 60 characters.                                                               |
| `greeting`         | The first message in an empty chat. Up to 300 characters.                                                   |
| `exampleQuestions` | Up to four suggested questions, each up to 120 characters.                                                  |
| `accentColor`      | A `#rrggbb` color for links, source icons, focus, the send and launcher buttons and example arrows.         |
| `fallbackMessage`  | What the assistant says when your docs do not cover a question. It is translated to the visitor's language. |
| `launcherStyle`    | The floating button: `pill` (icon and text), `text`, `circle`, `bubble` or `square`. Default `pill`.        |
| `launcherLabel`    | Text on the `pill` and `text` buttons. Up to 24 characters. Empty uses the translated default.             |

## Content Security Policy

If your site sets a Content Security Policy, allow the widget host in `script-src` and `frame-src`:

```
script-src https://widget.docora.dev;
frame-src  https://widget.docora.dev;
```