Embed Chat on Your Website

Publish an agent and add a chat widget to any website with a single script tag. Time: ~10 minutes.

What You Will Build

A published agent accessible via embed code
A floating chat widget on your website
Custom branding (colors, title, welcome message)
Real-time streaming responses

Prerequisites

An agent already created in Fluxgate (see Support Agent Tutorial)
The agent should be in active lifecycle state
A website where you can add HTML/JavaScript

Step-by-Step Guide

Activate Your Agent

The agent must be in 'active' state before publishing. Promote it through the lifecycle.

# Promote from draft to testing
curl -X POST http://localhost:8000/api/v1/lifecycle/agents/AGENT_ID/transition \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "to_state": "testing" }'

# Promote from testing to active
curl -X POST http://localhost:8000/api/v1/lifecycle/agents/AGENT_ID/transition \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "to_state": "active" }'

Publish the Agent

Generate an embed code for your agent. This creates a public endpoint.

curl -X POST http://localhost:8000/api/v1/publish/agents/AGENT_ID/publish \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Customer Support",
    "welcome_message": "Hi! How can I help you today?",
    "theme_color": "#6366f1",
    "allowed_domains": ["yourdomain.com", "localhost"]
  }'

# Response includes:
# { "embed_code": "<script src=\"...\">...</script>", "widget_id": "wgt_xyz" }

Add the Embed Code to Your Website

Copy the embed code and paste it into your website's HTML, just before the closing </body> tag.

<!-- Add this just before </body> -->
<script
  src="http://localhost:3000/widget/WIDGET_ID.js"
  data-agent-id="AGENT_ID"
  data-theme-color="#6366f1"
  data-title="Customer Support"
  data-welcome="Hi! How can I help you today?"
  async
></script>

Customize the Widget Appearance

Update the widget configuration to match your brand.

curl -X PUT http://localhost:8000/api/v1/publish/agents/AGENT_ID \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Acme Support Bot",
    "welcome_message": "Welcome to Acme! Ask me anything about our products.",
    "theme_color": "#2563eb",
    "position": "bottom-right",
    "show_branding": false
  }'

Test the Widget

Open your website in a browser. You should see a chat bubble in the bottom-right corner.

# If testing locally, start a simple HTTP server:
python -m http.server 8080

# Then open http://localhost:8080 in your browser
# Click the chat bubble to open the widget
# Type a message and verify streaming responses

Monitor Widget Usage

Track how users interact with your embedded chat.

# View chat sessions
curl http://localhost:8000/api/v1/chat/sessions?agent_id=AGENT_ID \
  -H "Authorization: Bearer YOUR_API_KEY"

# View analytics
curl http://localhost:8000/api/v1/analytics/agents/AGENT_ID \
  -H "Authorization: Bearer YOUR_API_KEY"

Full HTML Example

index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>Click the chat bubble in the bottom-right corner to talk to our AI assistant!</p>

  <!-- Fluxgate Chat Widget -->
  <script
    src="http://localhost:3000/widget/WIDGET_ID.js"
    data-agent-id="AGENT_ID"
    data-theme-color="#6366f1"
    data-title="AI Assistant"
    data-welcome="Hi! How can I help you?"
    data-position="bottom-right"
    async
  ></script>
</body>
</html>

Widget Configuration Options

Attribute	Description	Default
data-agent-id	Your agent's ID (required)	-
data-theme-color	Primary color for the widget	#6366f1
data-title	Title shown in the chat header	AI Assistant
data-welcome	Welcome message shown on open	How can I help?
data-position	Widget position: bottom-right or bottom-left	bottom-right
data-show-branding	Show 'Powered by ACP' branding	true

Production Domains

Make sure to set allowed_domains when publishing. This prevents your agent from being embedded on unauthorized websites. Always include your production domain!

Multi-Agent

Workflow Pipeline