Add the chatbot to your website
Choose one of the methods below to add the chatbot to your existing website. Simply copy the code snippet and paste it into your HTML.
Embed the full chatbot interface in an iframe. Best for most websites.
<iframe
src="https://your-app-url.com"
width="100%"
height="600"
style="border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
allow="clipboard-write"
title="QA Knowledge Assistant"
></iframe>Add a floating chat button in the bottom-right corner of your page.
<style>
#qa-chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
#qa-chat-widget iframe {
display: none;
width: 400px;
height: 600px;
border: none;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
#qa-chat-widget.open iframe {
display: block;
}
#qa-chat-btn {
width: 56px;
height: 56px;
border-radius: 50%;
background: #800000;
color: white;
border: none;
cursor: pointer;
font-size: 24px;
box-shadow: 0 4px 12px rgba(128,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div id="qa-chat-widget">
<iframe src="https://your-app-url.com"></iframe>
<button id="qa-chat-btn" onclick="
this.parentElement.classList.toggle('open');
this.textContent = this.parentElement.classList.contains('open') ? '×' : '💬';
">💬</button>
</div>Link directly to the chatbot from your navigation or buttons.
<a
href="https://your-app-url.com"
target="_blank"
rel="noopener noreferrer"
style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #800000; color: white; border-radius: 8px; text-decoration: none; font-weight: 500;"
>
💬 QA Knowledge Assistant
</a>