Add the AI Chat Widget to Your Website
This guide walks you through what you need to do as a business owner, and gives your developer the exact code to implement the widget.
For Business Owners
What is the chat widget?
The AI chat widget is a small button that sits in the bottom-right corner of every page on your website. When a visitor clicks it, a chat window opens and they can ask your AI agent questions — just like live chat, but fully automated.
Your 3-step process
Set up your AI Agent
Log in to the Tridan dashboard, create an AI agent, and configure what it knows about your business.
Copy your API Key
In the dashboard, open your AI agent and go to the Embed tab. Copy the API key shown there.
Example: 9f197c1a...ce110cb2
This key is unique to your agent — keep it safe.
Add the code to your website
Copy the embed code below, replace the API key placeholder, and paste it before the closing </body> tag on every page — or hand it to your developer.
Widget embed code
Copy this code, replace YOUR_API_KEY_HERE with your actual API key, and paste it before the closing </body> tag on every page.
<!-- Paste this just before the closing </body> tag on every page -->
<iframe
src="https://YOUR_DOMAIN/agents?public_api_key=YOUR_API_KEY_HERE"
style="
position: fixed;
bottom: 0;
right: 0;
width: 450px;
height: 800px;
background: transparent;
background-color: transparent;
border: 0;
pointer-events: auto;
z-index: 10000;
padding: 10px;
"
allowtransparency="true"
title="AI Chat Widget"
allow="microphone; camera; autoplay; screen-wake-lock"
></iframe>
<!-- Lets the assistant read the current page so it can help with what the visitor is viewing -->
<script src="https://YOUR_DOMAIN/widget-context.js" async></script>For Developers
How the widget works
The widget is an <iframe> that loads from YOUR_DOMAIN with the client's API key as a URL parameter. The widget communicates with the parent page via postMessage to signal open/close state changes, which you can listen to in order to resize the iframe from its collapsed (80×80px) state to its expanded size.
Widget Parameters & Attributes
Swipe sideways to see the full table
| Attribute / Parameter | Value | Description |
|---|---|---|
| public_api_key | your key | URL query param — uniquely identifies your AI agent. Found in the Embed tab of the Tridan dashboard. |
| user_token | optional | URL query param for authenticated agents only — append &user_token=YOUR_USER_TOKEN to the iframe src so the agent knows which logged-in user it is talking to. Omit it if your agent does not use authentication. |
| allowtransparency | "true" | Allows the iframe background to be transparent so the widget blends into your page. |
| allow="microphone" | required | Enables voice input so visitors can speak to the AI agent. |
| allow="camera" | required | Enables camera access for visual interactions. |
| allow="autoplay" | required | Allows audio/video to play automatically inside the widget (e.g. voice responses, media playback). |
| allow="screen-wake-lock" | required | Prevents the screen from sleeping during active voice or video interactions. |
Page Context Script (Recommended)
Add this script alongside the iframe to let the AI agent read the content of the current page. This allows it to answer questions about whatever the visitor is looking at — product details, article text, pricing tables, etc.
<!-- Lets the assistant read the current page so it can help with what the visitor is viewing --><script src="https://YOUR_DOMAIN/widget-context.js" async></script>
Without the script
The AI agent answers based on its training data only — it has no knowledge of what page the visitor is on.
With the script
The agent reads the visible page content and can answer context-aware questions like "What are the specs for this product?" or "How much does this plan cost?"
YOUR_API_KEY_HERE in all snippets below with the actual API key from the client's Tridan dashboard (Embed tab on the AI agent).Simple HTML — No JavaScript Required
The easiest option. Works on any website. Just paste this snippet before the closing </body> tag on each page.
<!-- Paste this just before the closing </body> tag on every page -->
<iframe
src="https://YOUR_DOMAIN/agents?public_api_key=YOUR_API_KEY_HERE"
style="
position: fixed;
bottom: 0;
right: 0;
width: 450px;
height: 800px;
background: transparent;
background-color: transparent;
border: 0;
...Full HTML + JavaScript — Mobile Responsive
Includes automatic resizing: small button when closed, full-screen on mobile, large panel on desktop. Paste before </body> on each page.
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your website content -->
<!-- AI Chat Widget -->
<div id="chat-widget-container" style="
position: fixed;
bottom: 0;
...React Component
For websites built with React. Add this component to your layout or App component.
import React, { useRef, useEffect, useState } from "react";
const ChatWidget = () => {
const chatWidgetRef = useRef(null);
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
const [isWidgetOpen, setIsWidgetOpen] = useState(false);
const getIframeDimensions = () => {
if (!isWidgetOpen) {
return { width: "80px", height: "80px", bottom: "10px", right: "10px" };
}
if (screenWidth <= 768) {
...WordPress
Add this to your WordPress theme's footer.php before the closing </body> tag, or paste it into Appearance → Theme File Editor → footer.php.
<!-- Add to footer.php before closing </body> tag -->
<!-- OR use a plugin like "Insert Headers and Footers" to paste it without editing files -->
<div id="tridan-chat-widget" style="
position: fixed;
bottom: 0;
right: 0;
z-index: 999999;
">
<iframe
id="tridan-iframe"
src="https://YOUR_DOMAIN/agents?public_api_key=YOUR_API_KEY_HERE"
...Widget Size Reference
Swipe sideways to see the full table
| State | Device | Width | Height | Position |
|---|---|---|---|---|
| Closed (button) | Any | 80px | 80px | Bottom-right |
| Open (chat panel) | Desktop (≥769px) | 450px | 800px | Bottom-right |
| Open (chat panel) | Mobile (≤768px) | 100vw | 100dvh | Full screen (top-left origin) |
The Simple HTML snippet uses a fixed size (450×800px) and does not respond to open/close events. Use the Full HTML+JS or React versions for dynamic resizing.
Troubleshooting
Widget not appearing?
Confirm the API key is correct and that your website's domain is on the agent's origin allowlist in the dashboard — the widget only loads on approved domains. Check the browser console for blocked requests.
Widget not resizing?
The Simple snippet does not resize — it stays at 450×800px. Switch to the Full HTML+JS or React version which listens for CHAT_WIDGET_STATE_CHANGE messages.
Mobile display issues?
On mobile the widget uses 100dvh (dynamic viewport height) and top: 0 / left: 0 positioning to avoid being hidden behind the browser toolbar.
Widget hidden behind other elements?
Raise the z-index above any overlapping element on your page. The default is 10000; try 99999 if something still overlaps.
Works on one page but not others?
The snippet must be added to every page where you want the widget to appear, or added to your site-wide layout/footer template.
WordPress: easiest no-code option
Install the free "Insert Headers and Footers" plugin, then paste the Simple HTML snippet into the Footer Scripts field. No theme file editing required.
Need Help with Setup?
Our team can handle the full implementation for you. Book a setup call or reach out directly.
Last updated · Reviewed by Nemanja Milivojevic, Founder