How to add the ElevenLabs conversational AI widget to your Webflow website

Looking to enhance your customer experience? Conversational AI can help. By adding ElevenLabs’ Conversational AI to your Webflow website, visitors can have natural conversations as if they were actually speaking to a member of your team. 

In this guide, we’ll walk you through the process of adding the ElevenLabs Conversational AI widget to your Webflow website, integrating the widget using custom HTML and JavaScript.

Before you get started

Before you start, ensure you have the following:

1. Webflow account: You need an active Core, Growth, Agency, or Freelancer Workspace, or a Site Plan, to access the Embed Element.
2. ElevenLabs account: Configure your Conversational AI agent in ElevenLabs and copy the provided embed code (which includes < script > and < div > snippets).
3. Familiarity with Webflow’s Designer: Basic understanding of how to add and edit Embed Elements in Webflow is helpful.

Step-by-step guide

Step 1: Prepare your ElevenLabs widget

1. Log in to your ElevenLabs account.
2. Go to the Conversational AI section.
3. Copy the embed code, which includes:
4. • A < script > snippet for loading the widget’s functionality.
   • A < div > snippet to define where the widget will appear on the page.

Step 2: Add the widget to a Webflow page

To display the widget on a specific page, use the Embed Element.

1. Open your Webflow project in the Designer.
2. Navigate to the page where you want the widget to appear.
3. From the Elements Panel, drag the Embed Element to your desired location on the page.
4. In the Embed Element’s code editor, paste the < div > snippet from the ElevenLabs embed code.
5. Click Save & Close to apply the changes.

Note: The Embed Element acts as a placeholder for your widget in the Designer. The actual widget will only render when the site is published.

Step 3: Add the script globally

To ensure the widget functions correctly, you need to include the < script > snippet globally on your site.

1. Go to your Webflow Dashboard and open the Project Settings.
2. Navigate to the Custom Code tab.
3. Paste the < script > snippet into the Footer Code section. This ensures the script is loaded on all pages where the widget is used.
4. Click Save Changes.

Step 4: Publish and test

1. Publish your site to Webflow’s staging domain or your custom domain.
2. Open your site in a browser to verify the widget appears and functions as expected.

Important: Custom code does not render in Webflow’s Designer. You must publish your site to see the widget live.

Common issues and troubleshooting

Having trouble setting up the integration? Don't worry—these tips below should help.

1. Widget not displaying

• Cause: Missing or misplaced < script > or < div > snippets.
• Solution: Ensure the < script > snippet is in the Footer Code section, and the < div > snippet is correctly placed in an Embed Element.

2. Widget misalignment

• Cause: Incorrect placement or styling of the Embed Element.
• Solution: Use Webflow’s Style Panel to adjust the dimensions and alignment of the Embed Element.

3. Errors

• Cause: Conflicts with other scripts or browser restrictions.
• Solution: Use the browser’s developer console to identify and fix JavaScript errors.

Advanced tips

If you're looking to customize the widget, test on different devices, or reuse the widget on multiple pages, here's what you need to know.

• Customizing the widget: Use Webflow’s Style Panel or custom CSS to adjust the widget’s appearance, such as size, alignment, or colors.
• Testing on different devices: Use Webflow’s responsive design tools to ensure the widget works seamlessly on desktop, tablet, and mobile devices.
• Reusing the widget: Save the Embed Element as a Component if you plan to use the widget on multiple pages. This allows for consistent styling and easier management.

Final thoughts

Integrating the ElevenLabs Conversational AI widget into Webflow is straightforward, thanks to the platform’s Embed Element and Custom Code features. Whether you’re looking to enhance engagement on a single page or across your entire site, follow the steps above to get started.

For further assistance, don’t hesitate to reach out to ElevenLabs support or explore Webflow’s community forums for additional guidance. 

If you haven’t already, sign up for ElevenLabs today to kickstart the process. 

FAQs