Wix Integration
Embed your Chatsby AI agent on your Wix website. Covers custom code injection, Wix Velo for developers, and troubleshooting.
Wix Integration
Wix is a popular website builder used by millions of businesses worldwide. Adding a Chatsby AI agent to your Wix site enables visitors to get instant, intelligent answers to their questions without leaving the page. This guide covers the standard custom code injection method available on premium Wix plans, an advanced alternative using Wix Velo for developers, verification steps, and detailed troubleshooting for common issues.
Prerequisites
| Requirement | Details |
|---|---|
| Wix Premium plan | Custom code injection is only available on paid Wix plans (Connect Domain and above). Free Wix sites cannot add custom code via Site Settings |
| Wix site owner or admin access | You need access to the site dashboard and settings |
| Chatsby agent | A trained agent set to Public with at least one data source |
| Embed script | Copied from the Connect tab in your Chatsby dashboard |
If you are on the free Wix plan, you can use the Wix Velo method described later in this guide as an alternative, though Velo is also a premium feature on most configurations. Contact Wix support to confirm your plan's capabilities.
Standard Method: Custom Code Injection
This is the recommended approach for most Wix users. It adds the Chatsby widget to every page on your site.
Open Your Wix Site Dashboard
Log in to your Wix account and open the dashboard for the site where you want to add the Chatsby widget.
Navigate to Custom Code Settings
In the left sidebar, click Settings. Scroll down to the Advanced section and click Custom Code. If you do not see this option, your plan may not support custom code — verify that you are on a Premium plan.
Add a New Custom Code Snippet
Click the + Add Custom Code button in the top-right corner. A dialog box will appear.
Paste the Chatsby Embed Script
Paste your Chatsby embed script into the code snippet text area:
<script
src="https://chatsby.co/widget.min.js"
bot-id="YOUR_BOT_ID"
async
defer
></script>Configure the Snippet Settings
Fill in the configuration options. Set Name to something descriptive like "Chatsby AI Widget". For Add Code to Pages, select All pages to display the widget site-wide, or choose Choose specific pages if you only want it on certain pages. For Place Code in, select Body - end to ensure the script loads after your page content for optimal performance.
Apply the Code
Click Apply. The Chatsby widget is now active on your Wix site. Changes take effect immediately — no separate publish step is required on Wix.
Advanced Method: Wix Velo (For Developers)
Wix Velo (formerly Corvid) is Wix's developer platform that gives you programmatic control over your site. If you need conditional loading logic, dynamic bot IDs, or more granular control, Velo is the right approach.
Enable Velo on Your Site
In the Wix Editor, click Dev Mode in the top menu bar and toggle it on to enable Wix Velo. The code editor panel will appear at the bottom of the screen.
Open the Site-Level Code File
In the Velo sidebar, expand Public & Backend and click on masterPage.js. This file runs on every page of your site.
Add the Script Injection Code
Add the following JavaScript to dynamically inject the Chatsby widget script when the page loads:
import wixWindow from 'wix-window';
$w.onReady(function () {
if (wixWindow.rendering.env === 'browser') {
const script = document.createElement('script');
script.src = 'https://chatsby.co/widget.min.js';
script.setAttribute('bot-id', 'YOUR_BOT_ID');
script.async = true;
script.defer = true;
document.body.appendChild(script);
}
});Replace YOUR_BOT_ID with your actual agent ID from the Chatsby dashboard.
Publish Your Site
Click Publish in the top-right corner of the Wix Editor. The widget will appear on your live site.
The Wix Velo method is particularly useful if you are building a multi-page application with different agents for different sections, since you can dynamically change the bot-id based on the current page or user context.
Page-Specific Embedding
If you only want the widget on specific pages using the standard custom code method:
- When adding the custom code snippet (Step 5 above), select Choose specific pages instead of All pages.
- Check the boxes next to the pages where you want the widget to appear.
- Click Apply.
You can also create multiple custom code snippets with different bot-id values and assign each one to different pages, enabling you to deploy different Chatsby agents on different sections of your site.
Verifying the Installation
Visit Your Live Site
Open your Wix site's published URL in a new browser tab. Use an incognito window to avoid seeing a cached version of the page.
Confirm the Chat Bubble
Look for the Chatsby chat bubble in the bottom corner of the page. Click it to open the chat window.
Test the Agent
Send a test message and verify that your agent responds accurately based on your training data.
Check the Dashboard
Return to the Chatsby dashboard and check your agent's Analytics tab to confirm the test conversation was logged.
Troubleshooting
Widget Not Showing
| Possible Cause | Solution |
|---|---|
| Free Wix plan | Custom code requires a paid Wix plan. Upgrade your plan or use the Velo method |
| Code placement wrong | Ensure the code is placed in Body - end, not Head |
| Agent not Public | Enable the Public toggle on the Connect tab in the Chatsby dashboard |
| Ad blocker or browser extension | Disable ad blockers and privacy extensions, then reload |
| Wix Editor preview | The widget may not render in the Wix Editor preview. Always test on your published live site |
Widget Appears in Editor but Not on Live Site
This typically means the custom code was added in the Wix Editor's page settings (which only applies in preview) rather than in the site-level Custom Code settings. Ensure you added the code via Settings > Custom Code in the site dashboard, not through the Editor's page settings.
Wix Cookie Consent Interference
Wix sites with cookie consent banners configured through Wix's built-in privacy tools may delay or block third-party scripts until the visitor accepts cookies. If your widget does not appear until after cookie consent:
- In your Wix dashboard, go to Settings > Privacy & Security > Cookie Consent.
- Under script categorization, classify the Chatsby script as Essential (since it provides customer support functionality and does not set tracking cookies).
Mobile Display Issues
The Chatsby widget is fully responsive and works on Wix's mobile layouts. If the widget overlaps Wix's mobile navigation or footer elements:
- Adjust the widget position (bottom-left vs. bottom-right) in the Settings > Chat Interface section of your Chatsby dashboard.
- Ensure your Wix mobile layout does not have fixed-position elements that conflict with the chat bubble's default position.
Performance
The Chatsby widget loads asynchronously with async and defer attributes, ensuring it does not block your Wix site's rendering. The script is under 50 KB gzipped and is served from a global CDN. It does not affect your site's loading speed or SEO performance.