Embed AI Chat on Your Website
Add a smart AI chatbot to any website in minutes. Copy one line of code, paste it, and watch your website come alive with 24/7 intelligent customer support. No coding skills needed.
What is Widget Embedding?
Think of it like putting a smart helper on your website. When visitors come to your site, they'll see a friendly chat button. They click it, and boom - they're talking to your AI assistant who knows everything about your business.
You Create a Chatbot
Build an AI assistant that knows about your products, services, and FAQ. Takes about 5 minutes.
Copy the Embed Code
We give you one simple line of code. It looks like: <script src="...">
Paste on Your Website
Add that code to your website's HTML. The chat widget appears instantly. Your visitors can now chat with your AI!
No Technical Skills Required
If you can copy and paste text, you can embed our chat widget. We designed it so anyone - even complete beginners - can add AI chat to their website. Most people finish in under 10 minutes.
4 Ways to Display Your Chat Widget
Choose how the chat appears on your website. Each style works best for different situations - pick the one that matches your site's design.
Bubble Mode
A floating chat button in the corner of your page. Click it, and the chat window pops up. This is the classic style you see on most websites - familiar and easy to use.
Sidebar Mode
The chat slides in from the side as a panel. Great for websites where customers need to chat while browsing. The chat stays visible next to your content.
Push Mode
Like sidebar, but it actually pushes your website content to make room. Nothing gets covered - your page adjusts to show both chat and content side by side.
Drawer Mode
The chat slides up from the bottom like a drawer. Perfect for mobile websites where screen space is precious. Feels natural on phones and tablets.
How to Embed Your Chat Widget (5 Minutes)
Follow these simple steps to add AI chat to your website. No coding experience needed - if you can copy and paste, you can do this!
Create Your AI Chatbot
First, you need a chatbot to embed. Use our simple wizard to create one - just give it a name, add your website URL (so it learns about your business), and pick a personality template. The whole process takes about 5 minutes.
Tip: Pro tip: Add your sitemap.xml for complete coverage of all your pages. Your chatbot will automatically learn from everything on your site.
Open the Widget Configurator
Once your chatbot is created, go to your chatbot's page and click the "Widget" button. This opens our visual configurator where you can see exactly how your chat will look on your website - in real-time!
Tip: The configurator shows a live preview on the right side. Every change you make appears instantly so you can experiment freely.
Choose Your Display Mode
Pick how you want the chat to appear on your website. Bubble mode shows a floating button (most popular). Sidebar slides in from the side. Push mode moves your content to make room. Drawer pulls up from the bottom (great for mobile).
Display Modes:
• Bubble - Floating chat button in corner
• Sidebar - Slide-in panel from left/right
• Push - Pushes your page content aside
• Drawer - Pulls up from the bottomTip: Not sure which to pick? Start with Bubble mode - it's the most familiar pattern for website visitors and works great on both desktop and mobile.
Customize the Appearance
Make the chat match your brand! Pick your brand color (used for the button and accents), choose the position (bottom-right is most common), and adjust the sidebar width if you're using sidebar modes.
Tip: Want even more customization? Create a Chat Theme to add welcome modals, starter prompts, background patterns, and more. Themes can be reused across multiple chatbots.
Get Your Embed Code
Click the "Get Embed Code" button. You'll see a simple script tag that looks something like this. Just copy it to your clipboard.
<script>
window.gnosariConfig = {
agentId: 'your-chatbot-id',
apiUrl: 'https://gnosari.com',
displayMode: 'bubble',
position: 'bottom-right'
};
</script>
<script src="https://gnosari.com/widget.js"></script>Tip: The embed code includes all your customization settings. If you change settings later, you'll need to update the code on your website.
Paste on Your Website
Add the embed code to your website. Paste it just before the closing </body> tag. For WordPress, use a plugin like "Insert Headers and Footers" or add it in your theme customizer. For Shopify, add it to theme.liquid. For Wix, use the Embed HTML element.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- Your website content -->
<!-- Paste embed code here -->
<script>window.gnosariConfig = {...};</script>
<script src="https://gnosari.com/widget.js"></script>
</body>
</html>Tip: Done! Refresh your website and you'll see the chat widget. Click it to test - your AI chatbot is now live and ready to help your visitors 24/7!
Create Reusable Chat Themes
Design your chat's look once, then apply it to all your chatbots. Chat themes let you customize colors, welcome messages, conversation prompts, and more - all in one place.
Color Themes
Pick from 10+ beautiful color palettes or create your own brand colors.
Welcome Experience
Set up welcome modals, greeting messages, and first-time visitor experiences.
Conversation Prompts
Add starter prompts and follow-up suggestions to guide conversations.
Background Patterns
Add subtle patterns like WhatsApp to make your chat feel unique and branded.
Customer Support Theme
Purple + Welcome Modal
Sales Assistant Theme
Green + Starter Prompts
Learning Hub Theme
Blue + Pattern Background
How to Create a Chat Theme
Design beautiful, on-brand chat experiences in just a few clicks. See changes instantly with our live preview.
Go to Chat Themes
Navigate to Chat Themes in your dashboard sidebar. Click "Create Theme" to start designing your custom chat experience.
Tip: Themes are reusable - create once and apply to multiple chatbots. Perfect if you have several chatbots that should all look the same.
Choose Your Color Palette
Pick a color theme that matches your brand. We offer 10+ beautiful pre-designed palettes, or you can create a custom color. The color affects buttons, links, accents, and gradients throughout the chat.
Tip: See your color applied instantly in the live preview on the right side of the screen!
Design the Welcome Experience
Configure what visitors see when they first open the chat. Add a welcome modal with a headline and call-to-action, set an AI greeting message, and customize the empty state before any messages are sent.
Welcome Options:
• Welcome Modal - Attention-grabbing intro
• Typewriter Effect - Animated headline
• Greeting Message - AI says hello first
• Empty State - Title and descriptionTip: Welcome modals are great for explaining what your chatbot can help with. First impressions matter!
Add Conversation Prompts
Help visitors start conversations with suggested prompts. These are clickable questions that appear in the chat - visitors click one and the AI responds immediately. Great for showcasing what your chatbot can do.
Tip: Add 3-4 starter prompts that cover your most common questions. This helps visitors who aren't sure what to ask.
Add Background Pattern (Optional)
Make your chat feel unique with a subtle background pattern - like WhatsApp's chat backgrounds. Choose from dots, waves, grid, or other patterns. Adjust the intensity to keep it subtle.
Tip: Patterns add personality but keep them subtle - you don't want them to distract from the conversation.
Save and Apply
Give your theme a name and description, then click Create Theme. Now you can apply this theme to any of your chatbots. When you update the theme, all chatbots using it will update automatically!
Tip: Create themes for different purposes: "Customer Support" with a welcome modal, "Sales Assistant" with product prompts, etc.
Everything You Need for Perfect Embedding
Our widget system is designed to work seamlessly on any website while giving you complete control over the look and feel.
One-Line Embed Code
Just copy and paste a single script tag. No npm packages, no build steps, no complex configuration. Works on any website that supports JavaScript.
4 Display Modes
Bubble (floating button), Sidebar (slide-in panel), Push (moves content), and Drawer (bottom sheet). Each mode is fully responsive and touch-optimized.
Full Brand Customization
Match your website perfectly with custom colors, positioning, and sizing. Create reusable themes for consistent branding across all your chatbots.
Live Preview
See exactly how your chat will look as you configure it. Every change appears instantly in the preview - no guessing, no surprises.
Lightweight & Fast
Under 50KB script size. Loads asynchronously so it never slows down your website. Global CDN delivery for fast loading worldwide.
Privacy Controls
Control who can access your chatbot. Set it to public, password-protected, or private. GDPR-compliant with optional data collection settings.
Works on Every Website Platform
Whether you built your site with WordPress, Shopify, Wix, or custom code - our embed works everywhere.
WordPress
Shopify
Wix
Webflow
Squarespace
HTML/JS
Don't see your platform? No worries - our embed works on any website that supports JavaScript.
View Full Integration GuideFrequently Asked Questions
Everything you need to know about embedding AI chat on your website
Ready to Embed AI Chat on Your Website?
Create your chatbot, customize the design, and go live in minutes. Your visitors will thank you for the instant, helpful responses.
Join 10,000+ websites using Gnosari to power their customer support