Quick Start

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 be trained on your content, customized to match your brand, and able to answer questions accurately.

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.

How It Works

OpenSpeechAI has two main components:

1. Knowledge Base - This is where your content lives. You add your website pages, documentation, FAQs, or any information you want your AI to know about.

2. Agent - This is the AI brain that reads your knowledge base and answers visitor questions. Each agent connects to a knowledge base and powers a chat widget.

The flow is simple: Create a knowledge base → Add your content → Create an agent → Deploy the widget.

Let's get started.

Create a Knowledge Base

A Knowledge Base is where you store all the information your AI agent uses to answer questions. Let's create one first so your agent has something to learn from.

Navigate to Knowledge Base in the left sidebar and click Create Knowledge Base. Give it a name like "Website Content" or "Product Documentation" and add an optional description. Click Create and you're ready to add content.

Add Content to Your Knowledge Base

Now let's train your agent on your website content. Click Add URLs to open the ingestion panel.

Enter your website URL (e.g., https://yoursite.com). A modal will appear asking how you want to fetch content:

• Fetch current URL only - Adds just that single page
• Fetch all URLs from site - Crawls your sitemap and shows all available pages

Select Fetch all URLs to see all pages on your site. Review the list and select which pages to add. Focus on documentation, FAQs, and product pages. Skip blog posts and marketing content for now.

Click Add and wait for processing to complete. This usually takes a few moments depending on how many pages you're adding.

For more options like uploading files or handling dynamic content, see the Knowledge Base Guide.

Create Your Agent

Your agent is the AI brain that powers your chat widget. It handles all conversations with your visitors using the knowledge base you just created.

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 - Select the knowledge base you just created.

Click Create Agent and you're done. Your agent is now connected to your content.

Customize Your Widget

Make your chat widget feel like a natural part of your website. Click on your agent to open the details page, then click the Widget tab.

Here you can customize:

• Header Text - Your company or brand name (e.g., "Support Team", "Acme Inc")
• Header Description - A subtitle like "We typically reply in a few minutes" or "Here to help 24/7"
• Welcome Message - The greeting visitors see when they open the widget (e.g., "Hi there 👋 How can I help you today?")
• Logo - Your company logo URL for brand recognition
• Suggested Messages - Quick-reply buttons to help visitors start a conversation

For more customization options like theme, position, and branding, see the Widget Customization Guide.

Test Your Widget

Before deploying, make sure everything works. Click the Preview tab (next to the Widget tab) to see your chat widget exactly as visitors will experience it.

Try sending a few test messages. Ask questions about the content you added to your knowledge base. Your agent should respond with accurate answers based on your website content.

If the answers aren't what you expect, you may need to add more content to your knowledge base or refine the pages you've selected.

Get Your Widget Script

Once you're happy with how your widget looks and responds, it's time to deploy. Go back to the Widget tab.

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

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:

• Shopify Integration Guide
• Wix Integration Guide
• WordPress Integration Guide
• Other Platforms

What's Next?

Your AI chat widget is now live and ready to help your visitors. Here's what to do next:

Secure your widget by configuring allowed origins. This prevents other websites from using your widget script and consuming 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 knowledge base.

Fine-tune your agent by adjusting temperature, language settings, and custom instructions. Agent Configuration Guide

Having issues? Check out our Troubleshooting Guide for solutions to common problems.

Last updated: December 2, 2024