How to add the ElevenLabs Conversational AI widget to your Wix website

Looking to boost your customer support and engagement by adding ElevenLabs’ Conversational AI to your Wix website. You’ve come to the right place. This guide walks you through the entire process step by step, helping you avoid common pitfalls.

Before you get started

Before you begin, ensure you have the following:

1. Wix premium account: Embedding custom JavaScript is only available on Premium plans.
2. ElevenLabs account: You need an ElevenLabs account to create Conversational AI agents. Sign up here.
3. Access to Wix Editor with Dev Mode enabled: You’ll need Dev Mode to add custom code to your site.

Step-by-step guide

Step 1: Prepare your ElevenLabs widget

1. Log into your ElevenLabs account.
2. Navigate to the Conversational AI section.
3. Set up your conversational agent and copy the JavaScript embed code provided.

Step 2: Enable Dev Mode in Wix

1. Open your Wix site in the Editor.
2. Click on Dev Mode in the top menu to enable advanced features like adding custom code.

Note: If Dev Mode is not visible, ensure you are using the full Wix Editor, not the Wix ADI (Artificial Design Intelligence).

Step 3: Add the JavaScript embed code

1. Go to Settings > Custom Code in the Wix Editor.
2. Click + Add Custom Code.
3. Paste the ElevenLabs JavaScript code into the provided field.
4. Under Apply Code To, select All Pages (or choose a specific page for the widget).
5. Save and publish your changes.

Common issues and troubleshooting

Encountered an issue with adding a Conversational AI widget to your Wix website? Follow these simple steps to resolve your problem.

Issue 1: Widget disconnects or doesn’t load

• Cause: Incorrect Allowlist configuration or using a free Wix plan.
• Solution: Ensure your site URL is either removed from the Allowlist or correctly configured in the ElevenLabs dashboard.

Issue 2: JavaScript not working

• Cause: JavaScript code not added properly.
• Solution: Double-check that the JavaScript is pasted in the correct field under Custom Code.

Issue 3: Free Wix plan

• Cause: Embedding custom JavaScript is not supported on free Wix plans.
• Solution: Upgrade to a Wix Premium plan.

Advanced tips

If you’re looking to create the best possible experience for your website’s visitors, check out these advanced best practices. 

Adjusting the allowlist

If your widget still doesn’t work after embedding the code, follow these steps:

1. Log into your ElevenLabs account.
2. Go to the Allowlist settings for your Conversational AI agent.
3. Ensure your website’s domain is properly added. If issues persist, try removing your domain from the Allowlist and retesting.

Testing on a live domain

The widget may not function properly in Wix’s preview mode. Publish your site and test it on the live domain to ensure it works as expected.

Cross-browser compatibility testing

Once your widget is live, test it in multiple browsers, such as Chrome, Firefox, Edge, and Safari. Some features may behave differently across browsers due to variations in how JavaScript is handled.

1. Open your website on each browser.
2. Interact with the widget and check its responsiveness.
3. Look for issues such as broken styling or errors in functionality. If problems arise, review your JavaScript code or contact ElevenLabs support for guidance.

Mobile responsiveness

Verify the widget works seamlessly on mobile devices, as many users access websites via smartphones or tablets.

1. Use Wix’s Mobile Editor to preview your site’s mobile layout.
2. Test the widget on physical devices to confirm its functionality and ease of use.
3. Check for overlapping elements or formatting issues. If adjustments are needed, use Wix’s mobile design tools to optimize placement and size.

JavaScript debugging tips

If your widget isn’t working as expected, browser developer tools can help identify issues.

1. Open your site in a browser (Chrome recommended).
2. Right-click anywhere on the page and select Inspect to open DevTools.
3. Go to the Console tab and look for error messages related to the widget.
4. If you see errors, cross-check the JavaScript embed code and ensure all necessary URLs are added to the Allowlist.This method can also highlight missing dependencies or other issues preventing the widget from functioning correctly.

Final thoughts

Integrating the ElevenLabs Conversational AI widget into Wix requires careful setup, but with the right steps, you can have it up and running in no time. Ensure you have a Wix Premium plan, follow the steps above, and troubleshoot common issues as needed. If you run into further problems, reach out to ElevenLabs support for assistance.

Or, if you haven’t already, sign up for Conversational AI today.