Quick Start
Create an AI chat widget in minutes. Train on your content, customize to match your brand, and deploy with one line of code.
What You'll Build
By the end of this guide, you'll have a fully functional AI chat widget live on your website, ready to engage with your visitors 24/7. It'll look gorgeous, work seamlessly, and feel like a natural part of your site.
Prerequisites
Before you begin, you'll need:
- An OpenSpeechAI account - Sign up for free if you don't have one yet
- Access to your website's code - You'll need to add a single script tag to your HTML (works with any platform: custom sites, Shopify, Wix, WordPress, etc.)
That's it. No technical knowledge required.
Create Your First Agent
Your agent is the AI brain that powers your chat widget. It handles all conversations with your visitors.
Navigate to Agents in the left sidebar and click Create Agent. You'll be asked for:
Agent Name - Give it a descriptive name like "Support Assistant" or "Sales Helper". Only visible to you in your dashboard.
Knowledge Base - Train your agent on your content (docs, FAQs, product info). Select "No Knowledge Base" for now to get started quickly. You can connect one later.
Click Create Agent and you're done. Your agent is ready to chat.
Get Your Widget Script
After creating your agent, you'll land on the agent details page. Click the Widget tab at the top.
You'll see a code snippet that looks like this:
<script
src="https://widget.openspeechai.com/widgets/chat-widget.js?widgetId=abc-123"
defer
crossorigin="anonymous"
></script>Click the Copy button to copy this script to your clipboard. This is your unique widget code that connects the chat interface to your specific agent.
Add the Script to Your Website
Now paste the script you just copied into your website's HTML, right before the closing </body> tag.
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your website content goes here -->
<!-- Paste the OpenSpeechAI widget script here, before </body> -->
<script
src="https://widget.openspeechai.com/widgets/chat-widget.js?widgetId=abc-123"
defer
crossorigin="anonymous"
></script>
</body>
</html>Using a website builder? We have step-by-step guides for popular platforms:
If you're using a different platform or need help finding where to add HTML code, contact our support team.
Test Your Widget
Before going live, you can preview exactly how your widget will look and behave.
Go back to your agent details page and click the Preview tab (next to the Widget tab). You'll see your chat widget rendered exactly as it will appear on your site.
Try sending a few test messages to see how your agent responds. You'll initially be greeted with an empty screen - the same clean interface your visitors will see when they first open the widget.
When you're ready, deploy the script to your live website. Visit your site and you'll see the chat widget appear in the bottom-right corner, ready to assist visitors.
What's Next?
Your AI chat widget is now live and ready to help your visitors. Here's what to do next:
Train your agent by creating a Knowledge Base and adding your documentation, FAQs, product guides, or website content. This makes your agent significantly smarter and more helpful. Learn how →
Secure your widget by configuring allowed origins. This prevents other websites from stealing your widget script and using your message credits. Widget Security Guide →
Monitor conversations by visiting the Conversations page to see what visitors are asking and how your agent responds. Use these insights to improve your agent's knowledge
Customize agent behavior by configuring your agent's language, temperature, and instructions. This controls your agent's personality, tone, and how it handles different types of questions. Agent Configuration →
Having issues? Check out our Troubleshooting guide for solutions to common problems.
Last updated: November 18, 2024