Embed AI Chat on Your Website

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 chatbot who knows everything about your business. Explore real-world use cases across industries or get started free.

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.

1. 1

   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.
2. 2

   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.
3. 3

   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).

   Tip: 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.
4. 4

   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.
5. 5

   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.

   Tip: The embed code includes all your customization settings. If you change settings later, you'll need to update the code on your website.

   HTMLCopy

   <script>
     window.gnosariConfig = {
       agentUri: 'your-agent-uri',
       apiUrl: 'https://gnosari.com',
       displayMode: 'bubble',
       position: 'bottom-right'
     };
   </script>
   <script src="https://gnosari.com/widget.js"></script>

6. 6

   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.

   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!

• WordPressAppearance, then Theme File Editor, then footer.php, just above the closing body tag. On a block theme, a Custom HTML block in the footer template does the same job with no PHP.Read Guide
• ShopifyOnline Store, then Themes, then Edit code, then theme.liquid. Paste before the closing body tag so the widget loads on product, collection and cart pages alike.Read Guide
• WixSettings, then Custom Code, then Add Custom Code. Choose "Body - end" and apply it to all pages.
• WebflowProject Settings, then Custom Code, then Footer Code. Publish the site for the change to go live.
• SquarespaceSettings, then Advanced, then Code Injection. Paste into the Footer box, which applies site-wide.
• HTML / JSPaste it just before the closing body tag of your template or layout file, so it loads on every page that includes it.

• Bubble ModeA 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 ModeThe 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 ModeLike 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 ModeThe chat slides up from the bottom like a drawer. Perfect for mobile websites where screen space is precious. Feels natural on phones and tablets.

• Color ThemesPick from 10+ beautiful color palettes or create your own brand colors.
• Welcome ExperienceSet up welcome modals, greeting messages, and first-time visitor experiences.
• Conversation PromptsAdd starter prompts and follow-up suggestions to guide conversations.
• Background PatternsAdd subtle patterns like WhatsApp to make your chat feel unique and branded.

1. 1

   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.

2. 2

   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!

3. 3

   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.

   Tip: Welcome modals are great for explaining what your chatbot can help with. First impressions matter!

4. 4

   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.

5. 5

   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.

6. 6

   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.

• One-Line Embed CodeJust 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 ModesBubble (floating button), Sidebar (slide-in panel), Push (moves content), and Drawer (bottom sheet). Each mode is fully responsive and touch-optimized.
• Full Brand CustomizationMatch your website perfectly with custom colors, positioning, and sizing. Create reusable themes for consistent branding across all your chatbots.
• Live PreviewSee exactly how your chat will look as you configure it. Every change appears instantly in the preview - no guessing, no surprises.
• Lightweight & FastUnder 50KB script size. Loads asynchronously so it never slows down your website. Global CDN delivery for fast loading worldwide.
• Privacy ControlsControl who can access your chatbot. Set it to public, password-protected, or private. GDPR-compliant with optional data collection settings.

• AI Chatbot for Your WebsiteAdd intelligent 24/7 customer support to your website in minutes. Answer visitor questions automatically, generate more leads through conversation, and reduce support costs with AI.Read Guide
• WordPress AI ChatbotAdd AI chat to WordPress in 60 seconds. No plugin needed - just copy-paste one embed code. Works with WooCommerce, Elementor, Divi & all themes.Read Guide
• AI Chatbot Use Cases - 100+ Industry Examples & SolutionsExplore 100+ AI chatbot use cases across customer support, e-commerce, healthcare, real estate, and 12+ more industries. Find your AI solution today.Read Guide