Wix Chatbot Integration: Step-by-Step Guide

Wix has a built-in chat feature, but it is a basic live chat tool that requires a human on the other end. When nobody is online, visitors get a contact form. That is not good enough when someone is browsing your site at 11 PM trying to decide whether to book your service or buy your product.

An AI chatbot trained on your site content answers those questions instantly, without human involvement. This guide covers two methods for adding a chatbot to Wix, walks through the setup from start to finish, and explains how to get the best results.

Wix built-in chat vs AI chatbot

Before getting into the installation, it is worth understanding why a dedicated AI chatbot is different from what Wix offers out of the box.

Wix Chat works if you want real-time human conversations. But most small business owners cannot be online all day. An AI chatbot fills the gaps and handles the repetitive questions that make up the bulk of visitor inquiries.

You can use both together: the AI chatbot handles common questions automatically, and Wix Chat is there for the cases where a human touch is needed.

What you need before starting

1. A trained chatbot on Agentkit.

Sign up for free, create a chatbot, and train it on your Wix site content. The free plan gives you 1 chatbot and 50 messages per month.

Add your Wix site URL as a training source. The crawler indexes your pages automatically. Then add Q&A pairs for your most important topics (pricing, hours, booking process, return policy).

For detailed training guidance, see How to Train a Chatbot on Your Website Content.

2. A Wix Premium plan.

Adding custom code to Wix requires a Premium plan (any tier). Free Wix sites do not support custom HTML embeds or Velo.

Method 1: HTML embed (recommended)

This is the simplest method and works for all Wix users with a Premium plan. You add the chatbot script using an HTML embed element in the Wix Editor.

Step 1: Get your embed code

In the Agentkit dashboard, go to your chatbot's Settings then Embed. You will see two embed options. For Wix, use the iframe embed code:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

You can also use the JavaScript widget, but Wix's HTML embed element handles iframes more reliably than script tags. The iframe method is the recommended approach for Wix.

Step 2: Add the HTML embed to your page

1. Open the Wix Editor for your site.
2. Click the Add button (the blue "+" icon) in the left toolbar.
3. Select Embed Code then Embed HTML.
4. An HTML element appears on your page. Click it and select Enter Code.
5. Switch to the Code tab (not the URL tab).
6. Paste the iframe code from Step 1.
7. Click Update.
8. Resize and position the element where you want the chatbot to appear on the page.

Step 3: Make it site-wide (optional)

The HTML embed method adds the chatbot to a single page. If you want the chatbot on every page, you have two options:

Option A: Add to the site header or footer.

1. In the Wix Editor, click on the Header or Footer section of your page.
2. Add the HTML embed element to the header or footer.
3. Since the header and footer appear on all pages, the chatbot will be available site-wide.

Option B: Use the Wix App Market's "Custom Element" feature.

1. Go to Add then Embed Code then Custom Element.
2. Configure it to load your chatbot script on all pages.

Option A is simpler for most users.

Step 4: Publish and verify

1. Click Publish in the top-right corner of the Wix Editor.
2. Visit your live site (not the editor preview).
3. Confirm the chatbot appears and responds to test messages.
4. Check on mobile to verify the layout.

Method 2: Velo by Wix (for developers)

Velo is Wix's built-in development platform. If you are comfortable writing JavaScript, Velo gives you more control over when and how the chatbot loads.

When to use Velo

• You want the chatbot to load conditionally (e.g., only for logged-in members, only on certain pages).
• You need to pass dynamic data to the chatbot (e.g., the visitor's name or membership tier).
• You want to trigger chatbot actions programmatically.

Step 1: Enable Velo

1. In the Wix Editor, click Dev Mode in the top menu bar.
2. Click Turn on Dev Mode.
3. The code panel appears at the bottom of the editor.

Step 2: Add the script via page code

1. Select the page where you want the chatbot.
2. In the code panel at the bottom, you will see a file for the page (e.g., Home.js).
3. Add the following code to load the Agentkit widget dynamically:

$w.onReady(function () {
  const script = document.createElement('script');
  script.src = 'https://cdn.agentkit.ai/widget.js';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  script.async = true;
  document.body.appendChild(script);
});

4. Save and publish.

Step 3: Site-wide loading via masterPage.js

To load the chatbot on every page:

1. In the code panel, open masterPage.js (this runs on all pages).
2. Add the same script loading code inside the onReady function.
3. Save and publish.

Conditional loading example

If you only want the chatbot on certain pages:

// masterPage.js
import wixLocation from 'wix-location';

$w.onReady(function () {
  const path = wixLocation.path;
  const chatbotPages = ['services', 'pricing', 'contact', 'faq'];

  if (chatbotPages.some(page => path.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://cdn.agentkit.ai/widget.js';
    script.setAttribute('data-chatbot', 'your-chatbot-id');
    script.async = true;
    document.body.appendChild(script);
  }
});

This loads the chatbot only on your Services, Pricing, Contact, and FAQ pages.

Comparing chatbot options for Wix

Several chatbot tools work with Wix. Here is how the main options compare.

If you want AI-powered responses trained on your own content with the most flexible embedding options, Agentkit is the strongest fit. If you need a rule-based flow builder with no AI, Joonbot is purpose-built for that. And if you just need basic human-to-human chat, Wix Chat is already included with your plan.

Customizing the chatbot for your Wix site

After the chatbot is live, configure these settings in the Agentkit dashboard to get the best results.

Brand colors and position

In your chatbot's Settings, customize the widget appearance:

• Primary color: Match your Wix site's accent color.
• Position: Bottom-right is the default and works for most sites. Switch to bottom-left if your Wix site has a conflicting element in the bottom-right corner.
• Welcome message: Write something specific to your business. "Hi! I can answer questions about our services, pricing, and availability" is better than "How can I help?"

Domain restriction

Add your Wix domain to the allowed domains list. This includes both your custom domain (e.g., yourbusiness.com) and the default Wix URL (e.g., yourbusiness.wixsite.com/yoursite). Domain restriction prevents unauthorized use of your chatbot.

Custom instructions

Add instructions that shape the chatbot's behavior for your specific business:

• "If someone asks about pricing, always mention the free consultation option."
• "For questions about availability, suggest they book through the scheduling page."
• "Never promise specific delivery dates. Say to contact us for current timelines."
• "If someone asks a question you cannot answer, offer to collect their email for follow-up."

Lead capture

Enable the lead capture action to collect emails from engaged visitors. This is especially valuable for service businesses on Wix where converting a visitor to a lead is the primary goal.

Captured leads appear in your Agentkit dashboard. Connect them to your email marketing or CRM using Zapier. See the integration guide for details.

Training tips for Wix sites

Wix sites often use visual layouts, animations, and interactive elements that can limit what a web crawler extracts. Here is how to maximize your chatbot's knowledge.

Supplement the crawl with Q&A pairs

After training on your URL, test the chatbot in the Playground. For any question it answers poorly, create a Q&A pair with the ideal response. Common topics to cover:

Upload supplementary documents

If you have PDFs, menus, brochures, or service catalogs, upload them as document sources. These give the chatbot detailed information that may not be on your website at all.

Keep training data current

When you update your Wix site, retrain the chatbot. On the Standard plan ($119.99/month) or higher, auto-retrain handles this automatically. On the Free or Hobby plan, trigger a manual retrain from the Agentkit dashboard after significant content changes.

Troubleshooting

The chatbot does not appear after publishing

• Check your Wix plan. Custom code requires a Premium plan.
• View the live site, not the editor. The Wix Editor preview does not always run custom scripts.
• Clear your browser cache or use an incognito window.
• Check the HTML embed code. Make sure you pasted the complete iframe or script tag without extra characters.

The HTML embed element shows a blank space

• Increase the height of the HTML embed element. The default size may be too small to display the chat interface.
• Make sure the iframe src URL is correct and includes your chatbot ID.
• Check your browser console (F12) for blocked content errors.

The chatbot works on desktop but not on mobile

Wix handles responsive design automatically, but HTML embed elements sometimes need manual adjustment for mobile. In the Wix Editor:

1. Switch to the mobile editor view.
2. Find the HTML embed element.
3. Adjust its size and position for mobile.
4. Publish and test.

If using the JavaScript widget via Velo (Method 2), the widget is responsive by default and should work on all screen sizes without adjustment.

The chatbot answers inaccurately

This is a training issue, not an embed issue. Go to the Agentkit dashboard and:

1. Check which pages were crawled successfully.
2. Add Q&A pairs for topics with poor responses.
3. Test in the Playground until responses are satisfactory.
4. Add custom instructions to guide the chatbot's tone and behavior.

Pricing considerations

Here is how Agentkit pricing maps to typical Wix use cases.

Annual billing saves roughly 20% on all paid plans.

Next steps

Your Wix site now has an AI chatbot that handles visitor questions around the clock. Here is what to focus on next:

1. Refine training data based on the first week of conversations. Look for patterns in what visitors ask and fill gaps in your training.
2. Enable lead capture to turn conversations into contacts. This is where the chatbot pays for itself.
3. Connect to your tools using Zapier or webhooks. Push leads to Google Sheets, Mailchimp, HubSpot, or whatever your team uses. See the integration guide.
4. Read the Squarespace guide if you manage sites on other platforms: Add a Chatbot to Squarespace.
5. Explore all embedding options in the complete embedding guide.

Build your chatbot for free →

No credit card required.