Table of Contents

Updated January 1, 2026

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.

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/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:

HTML

<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

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/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

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: "[email protected]"
      }}
      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.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

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.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 </body>
Save

Shopify

Online Store → Themes → Actions → Edit Code
Find theme.liquid
Paste widget code before </body>
Save

Webflow

Project Settings → Custom Code
Paste in "Footer Code"
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/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:

JavaScript

// 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

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.

Get your API key →