Embedding the widget on a website

The widget displays an EasyRag assistant on any website, either as a chat bubble or embedded in a specific area of the page. It requires no API key in the browser: it obtains a temporary token (5 minutes) bound to the calling site.

1. Declare the allowed origins

In the assistant’s configuration, under Access and publishing, fill in the allowed origins: the comma-separated list of sites that may display the assistant, for example:

https://www.example.com,https://intranet.example.com

Important: if the list is empty, the assistant is accepted on every site. Always declare your domains.

Also make sure the assistant is active, and set its messages-per-minute limit.

2. Copy the embed code

The code generation button offers three variants. The recommended one is the script:

<script
  src="https://<api-address>/api/v1/widget.js"
  data-chatbot-id="<assistant-id>"
  data-button-label="Any questions?"
  data-button-color="#1460d6">
</script>

Paste it just before the </body> tag of your pages.

Available options

Attribute	Purpose	Default value
data-chatbot-id	Assistant ID (required)	—
data-button-label	Bubble text	Chat
data-button-color	Bubble color (overrides the organization color)	organization color
data-z-index	Stacking order	1000
data-panel-width / data-panel-height	Panel size, in pixels	360 / 520
data-expanded-width / data-expanded-height	Size in expanded mode	520 / 760
data-inline-target	Selector of a page element in which to display the assistant instead of a bubble	—

Inline variant

<div id="assistant" style="width: 100%; height: 600px;"></div>
<script
  src="https://<api-address>/api/v1/widget.js"
  data-chatbot-id="<assistant-id>"
  data-inline-target="#assistant">
</script>

3. Check

• The bubble appears and the welcome message is displayed when it opens.
• From an undeclared domain, the assistant must refuse to initialize.
• If your site enforces a Content Security Policy (CSP), allow the EasyRag API address in script-src and frame-src.

Good to know

• The widget automatically applies the visual identity of the organization the assistant belongs to.
• The widget shows the answer with its citation numbers, but not yet the detailed list of sources; the assistant’s public page and the API do provide it.
• To integrate into an application rather than a website, use the REST API.