How to Embed a Chatbot in Wix

Two Embed Methods: Pick the One That Fits Your Wix Plan

Wix gives you two ways to embed a chatbot, and which one you use depends on your plan:

• Custom Code (Premium plans). — A site-wide setting under Settings > Custom Code. Paste the script once and it loads on every page automatically. This is the faster, set-and-forget option — but it requires a Wix Premium, Combo, or higher plan.
• HTML Embed widget (any plan, including free). — A drag-and-drop element you add to individual pages in the Wix Editor. No paid plan required. You’ll need to add the widget to each page where you want the chatbot, but it works on every Wix plan — even free sites.

Both methods use the same one-line script from your VocUI dashboard. The difference is where you paste it. Read on to decide which fits your situation, then skip to the matching step-by-step section.

Why Wix Sites Need an AI Chatbot

Wix has a built-in live chat feature called Wix Chat, but it is strictly live-agent — someone on your team has to be on the other end typing responses in real time. For the solo freelancer, local bakery, or two-person consulting firm that makes up most of Wix's user base, that means chat goes dead the moment you step away from your computer. Visitors see an empty chat window with no one to answer, which is worse than having no chat at all. An AI chatbot trained on your own content handles those conversations around the clock without needing anyone online.

Cost matters too. Many Wix users run on free or low-tier plans because they are bootstrapping a side project or testing a business idea. The HTML Embed widget method works on any Wix plan, including free, so AI-powered support is accessible even before you upgrade. You do not need to buy a Premium plan just to add a chatbot.

Wix users are builders, not developers. The drag-and-drop editor is the whole point. Both embed methods reflect that: Custom Code is a single paste into a settings panel (no code files to find or edit), and the HTML Embed widget is a visual element you drag onto the page like any other Wix block. Neither method requires you to write, read, or debug code.

What You Need Before You Start

Pick your method first, then confirm you have everything lined up:

• Decide: Custom Code or HTML Embed. — Custom Code is site-wide and requires a paid Wix plan. HTML Embed works per-page and works on any plan, including free. If you are not sure which plan you have, check Account > Subscriptions in your Wix dashboard.
• Wix dashboard access. — You need to be the site owner or a team member with editor permissions. Both Wix Editor (classic) and Wix Studio work.
• A VocUI chatbot ready to deploy. — Create your chatbot in VocUI, add your knowledge sources (your site URL, FAQ pages, PDFs), and grab the embed code from the Deploy tab. Our chatbot setup guide walks through this step by step.
• Premium, Combo, or higher (Custom Code only). — The Settings > Custom Code panel only appears on paid Wix plans. If you see the option, you’re set. If not, use the HTML Embed widget method instead — no upgrade needed.

Step-by-Step: Using Wix Custom Code

This is the recommended method if you have a Wix Premium plan. It adds the chatbot to every page of your site at once.

Method 1: Site-Wide Custom Code (Premium)

1. 1
   In your Wix dashboard, go to Settings in the left sidebar.
2. 2
   Click Custom Code (under the Advanced section). See Wix's custom code documentation for the full walkthrough.
3. 3
   Click Add Custom Code in the top right.
4. 4
   Paste your VocUI embed script into the code field.
5. 5
   Name it something like “VocUI Chatbot” for easy identification.
6. 6
   Set placement to Body - end. This ensures the script loads after your page content, which is best for performance.
7. 7
   Under \u201cAdd Code to Pages,\u201d select All pages.
8. 8
   Click Apply. Then publish your site.

Method 2: HTML Embed Widget (Any Plan)

If you're on a free Wix plan or want the chatbot on specific pages only, use the HTML embed approach:

1. 1
   Open your page in the Wix Editor.
2. 2
   Click the + (Add) button in the left panel.
3. 3
   Search for Embed Code or navigate to Embed > Custom Embeds > Embed a Widget.
4. 4
   Drag the HTML element onto your page (position doesn’t matter since the chatbot uses fixed positioning).
5. 5
   Click Enter Code and paste your VocUI script tag.
6. 6
   Click Update and publish your site.

Note: With Method 2, you'll need to add the embed widget to each page where you want the chatbot. For a site-wide deployment, Method 1 is more efficient.

Making the Widget Look Native to Your Wix Site

Wix separates desktop and mobile into two independent layouts, which means your chatbot widget may need attention in both views. If you used the HTML Embed method, switch to the Wix Editor's mobile preview to confirm the embed element is present on the mobile layout — elements added on desktop do not always carry over. With site-wide Custom Code this is handled automatically.

To match the widget to your site's color palette, open the Wix Editor and go to Design > Color & Text Themes. Copy the hex value of your accent color and paste it into VocUI's widget color picker in the dashboard. This keeps the chat bubble visually consistent with your buttons, links, and headings.

If you used the HTML Embed method, think about which pages actually need the chatbot. A pricing page, contact page, and product pages are high-value placements where visitors are most likely to have questions. A portfolio gallery or photo page may not need it. With Custom Code, the widget loads everywhere by default — you can restrict it to specific pages from the VocUI dashboard instead.

All other widget settings — position, welcome message, avatar, response tone — are controlled from the VocUI dashboard. No need to touch Wix again after the initial embed.

Wix-Specific Troubleshooting

Most Wix embeds work after a single publish. When they don't, the cause is almost always one of these Wix-specific issues:

• Custom Code option missing from Settings. — Site-wide Custom Code requires a Wix Premium plan. Free Wix plans do not show this option. Use the HTML Embed widget method (Method 2) instead, which works on all plans including free.
• Chatbot appears on desktop but not mobile. — If you used the HTML Embed widget, Wix manages desktop and mobile layouts separately. Switch to the mobile editor view and confirm the embed element exists on the mobile version of the page. With site-wide Custom Code, this is not an issue — the script loads on both layouts automatically.
• Changes not visible after publish. — Wix caches published pages at the CDN level. Hard-refresh (Ctrl+Shift+R / Cmd+Shift+R) or open your site in an incognito window. If the chatbot still does not appear, wait 2-3 minutes for Wix’s CDN cache to propagate and try again.
• Chatbot overlaps with Wix Chat bubble. — Both widgets try to claim the same bottom-right corner. Either disable Wix Chat (go to your Wix dashboard > Inbox > Chat Settings > toggle off) or move the VocUI widget to bottom-left in the VocUI dashboard settings.
• HTML Embed widget shows a blank box in the editor. — This is normal. The Wix editor sandboxes embed elements for security. The chatbot will render correctly on your published live site. Always test on the published URL, not the editor preview.
• Wix Studio (Editor X) custom code location. — In Wix Studio, the Custom Code setting is in a different location than the classic Editor. Go to Settings > Custom Code from the Wix Studio dashboard (not from within the design canvas). The functionality is identical \u2014 paste the script, set placement to Body - end, and apply to All pages.

If none of the above resolves your issue, our general chatbot embed guide covers platform-independent debugging steps.

FAQ

What is the difference between Wix Custom Code and the HTML Embed widget?

Wix Custom Code (Settings > Custom Code) adds a script site-wide to every page at once and requires a Premium plan. The HTML Embed widget is a drag-and-drop element you add to individual pages in the editor and works on any Wix plan, including free. For a chatbot, Custom Code is better because you set it once for the entire site. The HTML Embed approach requires adding the widget to each page individually.

Does the chatbot work in Wix Studio (formerly Editor X)?

Yes. Wix Studio supports custom code injection just like the classic Wix Editor. In Wix Studio, go to Settings > Custom Code > Add Custom Code. The interface looks slightly different, but the functionality is identical. Paste the same VocUI script tag and set placement to Body - end.

Can I use Velo (Wix Code) to control when the chatbot loads?

Yes, if you want conditional loading. Instead of using site-wide Custom Code, you can use Velo to dynamically inject the script tag on specific pages or based on user actions. Add the script via $w("#html1").postMessage() in a Velo code file, or use the wix-window API to append the script element to the DOM. This is an advanced approach — the standard Custom Code method works for most sites without any Velo code.

I built my Wix site with ADI. Can I still add a chatbot?

Yes. Wix ADI sites support Custom Code injection the same way as Editor-built sites. Go to Settings > Custom Code, add the VocUI script, and publish. If you later switch from ADI to the Wix Editor for more control, your Custom Code settings carry over automatically.

The chatbot does not appear on my Wix mobile site. How do I fix this?

If you used the HTML Embed widget method, check that the embed element is also placed on the mobile version of your page. Wix maintains separate desktop and mobile layouts — elements added in the desktop editor do not always appear on mobile automatically. Switch to the mobile editor view and confirm the HTML embed widget is present. If you used the site-wide Custom Code method, the script loads on both desktop and mobile by default.