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 tag:
<script
src="https://assisters.io/sdk/assisters.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:
<script
src="https://assisters.io/sdk/assisters.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
AttributeValuesDefaultDescriptiondata-theme"light", "dark""light"Color themedata-position"bottom-right", "bottom-left""bottom-right"Widget positiondata-primary-colorHex code"#3b82f6"Brand colordata-greetingString"Hello!"Welcome messagedata-auto-open"true", "false""false"Open on page load
Passing User Context
Personalize responses with user data:
<script
src="https://assisters.io/sdk/assisters.js"
data-assister="your-assistant-slug"
data-key="your-api-key"
data-user-id="user_12345"
data-user-name="John Smith"
data-user-email="[email protected]"
async>
</script>
The assistant can now greet by name and access context.
Method 2: React Integration
For React applications, use our SDK.
Installation
npm install @assisters/react
Basic Usage
import { AssistersWidget } from '@assisters/react';
function App() {
return (
<div>
<AssistersWidget
assister="your-assistant-slug"
apiKey="your-api-key"
/>
</div>
);
}
With Configuration
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: "[email protected]"
}}
onMessage={(message) => console.log('New message:', message)}
onOpen={() => console.log('Widget opened')}
onClose={() => console.log('Widget closed')}
/>
);
}
Programmatic Control
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
<iframe
src="https://assisters.io/embed/your-assistant-slug?key=your-api-key"
width="100%"
height="600"
frameborder="0"
allow="microphone"
>
</iframe>
With Parameters
<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
<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
POST https://api.assisters.dev/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
{
"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:
POST https://api.assisters.dev/v1/chat/stream
Returns Server-Sent Events (SSE) with chunks.
Platform-Specific Guides
WordPress
Option 1: Plugin (Recommended)
- Install "Insert Headers and Footers" plugin
- Go to Settings → Insert Headers and Footers
- Paste widget code in Footer Scripts
- Save
Option 2: Theme Editor
- Appearance → Theme Editor
- Select footer.php
- Paste before
- Save
Shopify
- Online Store → Themes → Actions → Edit Code
- Find theme.liquid
- Paste widget code before
- Save
Webflow
- Project Settings → Custom Code
- Paste in "Footer Code"
- Publish site
Next.js
// 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/sdk/assisters.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:
// Your server endpoint
app.post('/api/chat', async (req, res) => {
const response = await fetch('https://api.assisters.dev/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
- Check console for JavaScript errors
- Verify API key is correct
- Ensure script loads (check Network tab)
- 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.