Documentation

Everything you need to integrate Websyte AI into your application. From quick start guides to advanced integration techniques.

Getting Started
Set up your first widget in under 5 minutes
Integration Guide
Embed widgets on any platform
Knowledge Base
Build and manage your AI's knowledge

Quick Start

1. Embed the widget iframe

Add this iframe code to your website where you want the chat widget to appear:

<iframe
  src="https://websyte-ai.com/share/w/YOUR_WIDGET_ID"
  style="width: 100%; height: 600px; border: none;"
  title="AI Chat Widget"
  allow="clipboard-write">
</iframe>

2. Responsive iframe (Recommended)

For a responsive layout that works on all screen sizes, use a container:

<!-- Responsive container -->
<div style="position: relative; height: 600px; max-width: 800px; margin: 0 auto;">
  <iframe
    src="https://websyte-ai.com/share/w/YOUR_WIDGET_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    title="AI Chat Widget"
    allow="clipboard-write">
  </iframe>
</div>

3. Get your Widget ID

Find your Widget ID in the dashboard after creating a widget. Replace YOUR_WIDGET_ID in the iframe URL with your actual widget ID.

iframe Features

PostMessage API

Communicate with the widget using secure cross-origin messaging:

// Listen for messages from the widget
window.addEventListener('message', (event) => {
  // Verify origin for security
  if (event.origin !== 'https://websyte-ai.com') return;
  
  if (event.data.type === 'chat-started') {
    console.log('User started chatting');
  } else if (event.data.type === 'chat-response') {
    console.log('Assistant response:', event.data.payload.message);
  }
});

// Send messages to the widget
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({
  type: 'send-message',
  payload: { message: 'Hello, how can I help?' }
}, 'https://websyte-ai.com');

Auto-resize Support

The widget automatically sends resize events to fit content:

window.addEventListener('message', (e) => {
  if (e.data.type === 'resize') {
    iframe.style.height = e.data.payload.height + 'px';
  }
});

Popular Guides

Upload Your Knowledge Base

Upload PDFs, Word docs, markdown files, and more. Our AI will extract and index the content for instant search.

Read Guide
Crawl Your Website

Automatically crawl and index your entire website. Keep your AI's knowledge up-to-date with scheduled crawls.

Read Guide

Need Help?

Can't find what you're looking for? Our team is here to help you succeed.

Contact SupportView on GitHub