Everything you need to integrate Websyte AI into your application. From quick start guides to advanced integration techniques.
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>
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>
Find your Widget ID in the dashboard after creating a widget. Replace YOUR_WIDGET_ID in the iframe URL with your actual widget ID.
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');
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';
}
});
Upload PDFs, Word docs, markdown files, and more. Our AI will extract and index the content for instant search.
Read GuideAutomatically crawl and index your entire website. Keep your AI's knowledge up-to-date with scheduled crawls.
Read GuideCan't find what you're looking for? Our team is here to help you succeed.