Back to Blog
Tutorials
How to Embed the AiSU Chat Widget in 5 Minutes
A step-by-step guide to deploying your AI assistant on any website using the AiSU chat widget.
Jordan Kim · Developer Relations5 min read
tutorialwidgetintegrationdeveloper
A step-by-step guide to deploying your AI assistant on any website using the AiSU chat widget.
By the end of this guide, you'll have a fully functional AI chat widget embedded on your website, backed by your own knowledge base.
Prerequisites: An AiSU account with at least one collection set up.
Navigate to Settings → Assistants in your AiSU dashboard and click New Assistant.
Give your assistant a name and description, then connect it to one or more collections. These collections are what your assistant will use to answer questions.
Copy the Assistant ID from the detail page—you'll need it shortly.
Add the following snippet to your website's <head> or just before the closing </body> tag:
<script
src="https://widget.aisu.ai/chat-widget.js"
data-assistant-id="YOUR_ASSISTANT_ID"
defer
></script>
Replace YOUR_ASSISTANT_ID with the ID you copied in Step 1.
You can customize the widget's appearance using data attributes:
<script
src="https://widget.aisu.ai/chat-widget.js"
data-assistant-id="YOUR_ASSISTANT_ID"
data-theme="dark"
data-position="bottom-left"
data-primary-color="#6d28d9"
defer
></script>
Available options:
data-theme: light or darkdata-position: bottom-right (default) or bottom-leftdata-primary-color: Any hex colorOpen your website and click the chat bubble. Ask a question that your uploaded documents should be able to answer.
If the response looks right, you're done. If not, check that your collection has processed documents (status should be Ready in the dashboard).
Widget doesn't appear: Check that the script tag is loading without errors in your browser console.
Answers are generic: Your collection may still be processing. Wait a few minutes and try again.
Need help? Reach out via the chat widget on the AiSU dashboard—we practice what we preach.