Embedding the chat widget

The Circuit chat widget is an embeddable chat interface that lets website visitors interact with your Circuit agent. It loads as a small button in the bottom-right corner of your page and expands into a full chat window.

Quick setup

Add a single script tag to your website’s HTML:

<script src="https://build.app.circuit.ai/chat-widget/circuit-chat-widget.iife.js?apiKey=YOUR_AGENT_KEY"></script>

Replace YOUR_AGENT_KEY with the API key from your agent’s settings. The widget handles everything else.

Getting an API key

Open agent settings

Navigate to the agent you want to embed and open its settings.

Create an API key

In the API keys section, create a new key. Give it a descriptive name (e.g., “Company Website Widget”).

Set domain restrictions (recommended)

Restrict the API key to specific domains (e.g., yourdomain.com) so it can only be used from your website.

Copy the key

Copy the API key and add it to the script tag URL’s apiKey parameter.

API keys are visible in your page’s HTML source. Always set domain restrictions to prevent unauthorized use. Without restrictions, anyone with the key can send requests to your agent.

Integration example

A complete HTML page with the widget:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Company</title>
</head>
<body>
  <h1>Welcome to My Company</h1>
  <p>Click the chat button in the bottom-right corner to ask a question.</p>

  <script src="https://build.app.circuit.ai/chat-widget/circuit-chat-widget.iife.js?apiKey=YOUR_AGENT_KEY"></script>
</body>
</html>

The widget loads asynchronously and does not block your page rendering.

Security

Chat widget

Embedding the chat widget

Quick setup

Getting an API key

Integration example

​Quick setup

​Getting an API key

​Integration example

Quick setup

Getting an API key

Integration example