Documentation
Home
Getting Started
Overview Token Counting Plans & Limits
Core Guides
AI System Prompts Q&A Generation Chatbot Overview Knowledge Base Vector Stores Design & UI Intent Logic Deployment

Chatbot - Deploy Chatbot

Chatbot - Deployment

Overview

Once your chatbot is designed and configured, you can deploy it to make it available to users. This guide covers all deployment options, from basic embedding to premium pop-out widgets.

Prerequisites

Before deploying: 1. Chatbot Must Be Designed - Complete "Design Your Chatbot" step 2. Configuration Complete - All settings saved 3. Ready to Share - Test thoroughly first

Accessing Deployment Page

From Project Page: 1. Go to your Chatbot project 2. Find "Step 1: Build Your Own Chatbot" 3. Click "Deploy Your Chatbot" button 4. Button disabled until chatbot is designed 5. Takes you to deployment page

Deployment Options

Option 1: Basic Iframe Embed (All Accounts)

Best For:

  • Simple integration
  • Quick embedding
  • Basic websites
  • All account types

How to Deploy:

1. Get Embed Code

  • On deployment page, find "Embed Your Chatbot (Basic)"
  • Copy the iframe code provided

2. Embed Code Format:

3. Add to Your Website

  • Paste code into your HTML
  • Can place anywhere on page
  • Adjust width/height as needed

4. Live Preview

  • Preview shown on deployment page
  • See exactly how it appears
  • Test before deploying

Features:

  • Simple integration
  • Works on any website
  • Responsive design
  • All customization from design page applies

Customization:

  • Adjust width and height in embed code
  • All colors, fonts, styles from design page
  • No additional configuration needed

Option 2: Premium Pop-Out Widget (Smart/Professional Only)

Best For:

  • Professional websites
  • Pop-out chat experience
  • Floating chatbot icon
  • Modern UX

Requirements:

  • Smart or Professional account
  • Personal accounts see preview only (blurred)

How to Deploy:

1. Get Premium Code

  • Scroll to "Premium Chatbot" section
  • Three code blocks provided:
  • CSS styles
  • HTML/iframe
  • JavaScript

2. Copy CSS Code

  • First code block
  • Styles for pop-out widget
  • Paste in or CSS file

3. Copy HTML Code

  • Second code block
  • Includes iframe and icon
  • Paste where you want widget

4. Copy JavaScript Code

  • Third code block
  • Handles pop-out behavior
  • Paste before closing tag

5. Complete Integration

  • All three pieces needed
  • Follow exact order
  • Test on your website

Premium Features:

  • Floating Icon: Robot icon in corner
  • Pop-Out Animation: Smooth expand/collapse
  • Better UX: Modern, professional appearance
  • Customizable: Adjust position, size, animation

How It Works:

  • Icon appears in bottom-right corner
  • Click icon to expand chatbot
  • Click again to collapse
  • Smooth animations

Customization:

  • Icon image customizable
  • Position adjustable (CSS)
  • Size configurable
  • Animation speed adjustable

Understanding Your Deployment

Project Key

  • Unique identifier for your chatbot
  • Found in embed URLs
  • Security feature
  • Keep private if needed

Chatbot Types

Basic Chatbot:

  • Uses intent responses (if enabled)
  • Uses system prompts
  • General AI knowledge
  • Does NOT use RAG/vector store

RAG-Based Chatbot:

  • Uses vector store for context
  • Queries your knowledge base
  • More accurate for your content
  • Requires vector store built

Note: The basic deployment doesn't use RAG. For RAG-enhanced chatbot, see RAG deployment options.

Testing Before Deployment

Live Preview

On Deployment Page:

  • Preview shown on left side
  • Interactive chatbot
  • Test conversations
  • Verify appearance

What to Test:

  • Appearance matches design
  • Colors and styling correct
  • Responses work as expected
  • Intent matching functions
  • Mobile responsiveness

Testing on Your Website

Before Going Live: 1. Deploy to test/staging site 2. Test on different devices 3. Verify all features work 4. Check mobile experience 5. Test with real users

Download Sample Webpage

Feature Available:

  • Click "Download Sample Webpage" button
  • Gets a complete HTML file
  • Includes chatbot embedded
  • Ready to open in browser

Use Cases:

  • Quick testing
  • Demonstration
  • Template for your site
  • Local preview

Account-Specific Features

Personal Account

  • ✅ Basic iframe embed
  • ✅ Sample webpage download
  • ❌ Premium widget (not available)
  • ⚠️ Premium section shows blurred preview

Smart Account

  • ✅ Basic iframe embed
  • ✅ Premium pop-out widget
  • ✅ Sample webpage download
  • ✅ All deployment options

Professional Account

  • ✅ Everything in Smart
  • ✅ All deployment options
  • ✅ No restrictions

Embedding Methods

Method 1: Direct HTML

Simple Embed:

Method 2: Responsive Embed

CSS Styled:

Method 3: Premium Widget (Full Code)

Complete Integration:

  • CSS, HTML, and JavaScript
  • All three parts required
  • Copy from deployment page
  • Follow provided instructions

Security Considerations

Project Key

  • Unique to your chatbot
  • Part of embed URL
  • Keep private if sensitive
  • Can be reset if compromised

Access Control

  • Chatbot accessible to anyone with URL
  • No built-in authentication
  • Consider iframe security policies
  • Can block embedding on other sites if needed

Customization After Deployment

Appearance Changes

1. Go back to "Design Your Chatbot" 2. Modify colors, fonts, settings 3. Save changes 4. Embed code automatically uses new design 5. No need to re-embed

Intent Changes

1. Add/edit intents 2. Changes apply immediately 3. No redeployment needed 4. Live updates

Content Updates

  • System prompt changes: Immediate
  • Intent changes: Immediate
  • Design changes: Immediate
  • Vector store updates: Automatic

Mobile Considerations

Responsive Design

  • Chatbot adapts to screen size
  • Works on mobile devices
  • May adjust dimensions automatically
  • Test on mobile before deploying

Mobile Optimization

  • Width adjusts on small screens
  • Height may need mobile-specific values
  • Touch-friendly interface
  • Consider mobile users in design

Troubleshooting

Chatbot Not Showing?

  • Verify embed code is correct
  • Check project key is valid
  • Ensure chatbot is designed
  • Try sample webpage first

Premium Widget Not Working?

  • Verify all three code sections copied
  • Check account is Smart/Professional
  • Ensure JavaScript loaded
  • Check browser console for errors

Embedded Chatbot Looks Wrong?

  • Verify design settings saved
  • Check width/height in embed code
  • Test in different browsers
  • Clear browser cache

Links/Buttons Not Working?

  • Check iframe security settings
  • Verify JavaScript permissions
  • Test in different browsers
  • Check browser console

Best Practices

✅ Test Thoroughly - Always test before going live

✅ Mobile First - Design for mobile, enhance for desktop

✅ Monitor Performance - Check response quality after deployment

✅ Update Regularly - Keep intents and content current

✅ User Feedback - Gather feedback and improve

✅ Analytics - Monitor usage if available

Next Steps

After deployment:

1. Monitor Usage - Check how users interact 2. Gather Feedback - Listen to user comments 3. Refine Intents - Improve based on questions asked 4. Compare AI vs RAG - Enable RAG for better responses 5. Update Content - Keep information current

Your chatbot is now live and ready to help users!

Was this page helpful?
Chatbot Icon
AIInSync Chatbot