How to Embed an AI Assistant on Your Website (JavaScript, React, iframe)
Technical guide to embedding AI assistants on any website. Covers JavaScript widget, React integration, iframe, and REST API with code examples.
How to Embed an AI Assistant on Your Website
This technical guide covers every method for adding an AI assistant to your website. From simple copy-paste to full API integration, pick the approach that fits your stack.
Method 1: JavaScript Widget (Easiest)
The fastest way to add AI to any website.
Basic Implementation
Add this snippet before your closing </body> tag:
```html
<script
src="https://assisters.io/embed.js"
data-assister="your-assistant-slug"
data-key="your-api-key"
async>
</script>
```
That's it. A chat widget appears in the bottom-right corner.
Configuration Options
Customize with data attributes:
```html
<script
src="https://assisters.io/embed.js"
data-assister="your-assistant-slug"
data-key="your-api-key"
data-theme="dark"
data-position="bottom-left"
data-primary-color="#3b82f6"
data-greeting="Hi! How can I help you today?"
data-auto-open="false"
async>
</script>
```
Available Options
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| data-theme | "light", "dark" | "light" | Color theme |
| data-position | "bottom-right", "bottom-left" | "bottom-right" | Widget position |
| data-primary-color | Hex code | "#3b82f6" | Brand color |
| data-greeting | String | "Hello!" | Welcome message |
| data-auto-open | "true", "false" | "false" | Open on page load |
Passing User Context
Personalize responses with user data:
```html
<script
src="https://assisters.io/embed.js"
data-assister="your-assistant-slug"
data-key="your-api-key"
data-user-id="user_12345"
data-user-name="John Smith"
data-user-email="john@example.com"
async>
</script>
```
The assistant can now greet by name and access context.
Method 2: React Integration
For React applications, use our SDK.
Installation
```bash
npm install @assisters/react
```
Basic Usage
```jsx
import { AssistersWidget } from '@assisters/react';
function App() {
return (
<div>
<AssistersWidget
assister="your-assistant-slug"
apiKey="your-api-key"
/>
</div>
);
}
```
With Configuration
```jsx
import { AssistersWidget } from '@assisters/react';
function App() {
return (
<AssistersWidget
assister="your-assistant-slug"
apiKey="your-api-key"
theme="dark"
position="bottom-left"
primaryColor="#3b82f6"
greeting="Welcome! Ask me anything."
user={{
id: "user_12345",
name: "John Smith",
email: "john@example.com"
}}
onMessage={(message) => console.log('New message:', message)}
onOpen={() => console.log('Widget opened')}
onClose={() => console.log('Widget closed')}
/>
);
}
```
Programmatic Control
```jsx
import { useAssistersWidget } from '@assisters/react';
function ChatButton() {
const { open, close, toggle, sendMessage } = useAssistersWidget();
return (
<button onClick={() => open()}>
Chat with us
</button>
);
}
```
Method 3: iframe Embed
Embed a full chat interface in a specific page section.
Basic iframe
```html
<iframe
src="https://assisters.io/embed/your-assistant-slug?key=your-api-key"
width="100%"
height="600"
frameborder="0"
allow="microphone"
>
</iframe>
```
With Parameters
```html
<iframe
src="https://assisters.io/embed/your-assistant-slug?key=your-api-key&theme=dark&greeting=Hello!"
width="400"
height="600"
frameborder="0"
style="border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
>
</iframe>
```
Responsive iframe
```html
<div style="position: relative; width: 100%; max-width: 400px; height: 600px;">
<iframe
src="https://assisters.io/embed/your-assistant-slug?key=your-api-key"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px;"
allow="microphone"
>
</iframe>
</div>
```
Method 4: REST API
Full control for custom implementations.
Authentication
Include your API key in headers:
```
Authorization: Bearer your-api-key
```
Send Message
```bash
POST https://api.assisters.io/v1/chat
Content-Type: application/json
Authorization: Bearer your-api-key
{
"assistant": "your-assistant-slug",
"message": "What's your return policy?",
"session_id": "optional-session-id",
"user": {
"id": "user_12345",
"name": "John"
}
}
```
Response
```json
{
"id": "msg_abc123",
"response": "Our return policy allows returns within 30 days...",
"session_id": "sess_xyz789",
"tokens_used": 150,
"created_at": "2026-01-10T12:00:00Z"
}
```
Streaming Responses
For real-time streaming:
```bash
POST https://api.assisters.io/v1/chat/stream
```
Returns Server-Sent Events (SSE) with chunks.
Platform-Specific Guides
WordPress
**Option 1: Plugin** (Recommended)
1. Install "Insert Headers and Footers" plugin
2. Go to Settings → Insert Headers and Footers
3. Paste widget code in Footer Scripts
4. Save
**Option 2: Theme Editor**
1. Appearance → Theme Editor
2. Select footer.php
3. Paste before </body>
4. Save
Shopify
1. Online Store → Themes → Actions → Edit Code
2. Find theme.liquid
3. Paste widget code before </body>
4. Save
Webflow
1. Project Settings → Custom Code
2. Paste in "Footer Code"
3. Publish site
Next.js
```jsx
// pages/_app.js or app/layout.js
import Script from 'next/script';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://assisters.io/embed.js"
data-assister="your-assistant-slug"
data-key="your-api-key"
strategy="lazyOnload"
/>
</>
);
}
```
Security Best Practices
API Key Protection
For client-side implementations:
- Use domain-restricted keys
- Set rate limits
- Monitor usage for anomalies
Server-Side Proxy
For sensitive applications:
```javascript
// Your server endpoint
app.post('/api/chat', async (req, res) => {
const response = await fetch('https://api.assisters.io/v1/chat', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.ASSISTERS_API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(req.body)
});
res.json(await response.json());
});
```
Troubleshooting
Widget Not Appearing
1. Check console for JavaScript errors
2. Verify API key is correct
3. Ensure script loads (check Network tab)
4. Confirm assistant slug exists
CORS Errors
- API calls from browser need proper CORS headers
- Use our widget/SDK instead of direct API calls
- Or proxy through your server
Slow Loading
- Add `async` attribute to script tag
- Use `strategy="lazyOnload"` in Next.js
- Consider loading widget on user interaction
Pick the method that fits your stack. Most sites work great with the simple JavaScript widget. Need more control? The API has you covered.
[Get your API key →](/dashboard/api-keys)