How to Add an AI Chatbot to Your Website (Step-by-Step Guide)

Adding an AI chatbot to your business website no longer requires building complex NLP pipelines or hiring an AI engineering agency. With modern AI agent platforms like **[Oyrax](/ai-agent-for-websites)**, you can configure, train, and deploy a fully branded assistant in less than five minutes.

Here is the complete, practical implementation walkthrough.

Step 1: Create Your Workspace & Configure Your AI Persona

First, create your workspace on [Oyrax](/signup). Once inside your dashboard, navigate to **AI Persona & Studio**: 1. **Name Your Assistant:** Give your assistant a recognizable brand name (e.g., *"Sarah from Oyrax"* or *"Acme Support AI"*). 2. **Set Tone & Guidelines:** Choose whether your assistant should speak with a professional, casual, consultative, or technical tone. 3. **Define Grounding Instructions:** Specify business rules, such as default escalation paths, target customer qualifications, or preferred meeting durations.

Step 2: Ingest Your Company Knowledge Base

Your AI needs access to your actual company information to answer questions accurately without hallucinating: - **Website Sitemap Ingestion:** Simply paste your website domain (e.g., `https://yourcompany.com`). The automated crawler will discover public product pages, pricing tiers, and documentation. - **PDF & Document Upload:** Upload employee handbooks, API guides, technical specifications, and return policies. - **Custom FAQs:** Add direct question-and-answer pairs for frequently raised pre-sales inquiries.

All uploaded data is automatically chunked, embedded using OpenAI text embeddings, and stored in an isolated, tenant-partitioned vector database.

Step 3: Customize the Chat Widget Appearance

Your chat widget should match your brand’s visual identity: - **Brand Colors:** Choose primary teal, deep blue, obsidian, or custom hex codes. - **Launcher Icon & Avatar:** Select custom representative avatars or upload your company logo. - **Positioning:** Position the launcher on the bottom-right or bottom-left of the viewport. - **Welcome Message & Suggested Prompts:** Add clickable starter prompts such as *"How much does pricing cost?"* or *"Can I book a live demo?"*.

Step 4: Embed the Script on Your Website

Once configured, copy the one-line embed snippet provided in your **[Widget Studio](/widget)**:

<!-- Oyrax AI Chatbot Widget -->
<script
  src="https://cdn.oyrax.com/widget.js"
  data-id="YOUR_UNIQUE_PUBLIC_ID"
  async
></script>

Installation on Common Platforms:

#### 1. Next.js (App Router) Add the script using the Next.js `Script` component inside your root `layout.tsx`:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} <Script src="https://cdn.oyrax.com/widget.js" data-id="YOUR_UNIQUE_PUBLIC_ID" strategy="lazyOnload" /> </body> </html> ); } ```

#### 2. WordPress 1. Go to your WordPress Admin Dashboard → **Plugins** → **Add New**. 2. Install **Insert Headers and Footers** (or WPCode). 3. Paste the snippet into the **Footer Scripts** section and click Save.

#### 3. Webflow 1. Navigate to **Project Settings** → **Custom Code**. 2. Paste the snippet into the **Footer Code** box. 3. Publish your website changes.

#### 4. Shopify 1. In Shopify Admin, click **Online Store** → **Themes** → **Edit code**. 2. Open `theme.liquid` and paste the script tag right before the closing `</body>` tag.

Step 5: Test and Enable Live Features

Before going live, test your installation directly inside your website: - Ask complex domain-specific questions to verify source citations. - Trigger the **Google Calendar booking flow** to confirm appointments appear on your calendar. - Verify that lead submissions pass directly into your [Oyrax Leads CRM](/leads) or synced HubSpot/Salesforce account.

Ready to launch? [Deploy your AI chat widget on Oyrax today](/signup).