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

The ElevenLabs Conversational AI widget allows you to enhance your Framer website with interactive, AI-driven conversations. Whether you’re looking to boost customer engagement or enhance your customer support, Conversational AI can help. 

In this guide, we’ll walk you through the steps to add the widget to your Framer website. You’ll learn how to configure site-wide or page-specific widgets and troubleshoot common issues.

Before you get started

Before starting, ensure you have the following:

1. Framer account: Access to a Framer project with the ability to add custom code (available on paid plans).
2. ElevenLabs account: Configure your Conversational AI agent and copy its embed code (including the < script > and < div > snippets).
3. Familiarity with Framer: Basic understanding of Framer’s Site Settings and Embed Elements

Step-by-step guide

Step 1: Prepare your ElevenLabs widget

1. Log in to your ElevenLabs account.
2. Navigate to the Conversational AI section.
3. Configure your AI agent and copy the provided embed code, which includes:
4. • A < script > snippet to load the widget's functionality.
   • A < div > snippet to define where the widget will appear.

Step 2: Add the script to Framer’s site settings

1. Open your Framer project.
2. In the top-right corner, click on Project Settings.
3. Navigate to the General tab and scroll down to the Custom Code section.
4. Paste the < script > snippet from your ElevenLabs embed code into the End of < body > tag field.
5. Save your changes. This step ensures the required script is loaded for your site.

Step 3: Add the widget to a specific page

1. In your Framer project, go to the page where you want the widget to appear.
2. Add an Embed Element from the Utilities section of the Insert menu.
3. Select the Embed Element on your canvas to access its settings.
4. Switch the Type to HTML.
5. Paste the < div > snippet from the ElevenLabs embed code into the HTML field.
6. Position and size the Embed Element on your canvas as needed.

Step 4: Publish and test

1. Click Publish to make your changes live.
2. Open your website in a browser to verify that the widget appears and functions correctly.
3. • Note: Custom code won’t display in Framer’s Preview mode—it must be published to view.

Common issues and troubleshooting

If you’re struggling to get the integration working, don’t worry—check out these troubleshooting tips below. 

Issue 1: Widget not displaying

• Cause: Missing or improperly placed < script > or < div > snippet.
• Solution: Ensure the < script > snippet is added to the End of < body > tag field in Site Settings and the < div > snippet is in the Embed Element.

Issue 2: Widget only partially visible

• Cause: Embed Element is incorrectly sized or positioned.
• Solution: Adjust the dimensions and alignment of the Embed Element in the Framer Editor.

Issue 3: Script errors

• Cause: Conflicting scripts or blocked external resources.
• Solution: Open the browser console to check for JavaScript errors. Ensure Framer has permissions to load external scripts.

Advanced tips

Looking for more advanced customization options? These tips should help. 

• Customizing the widget: Use custom CSS to style the widget and integrate it seamlessly with your website’s design.
• Testing across devices: Framer’s responsive design tools make it easy to test the widget on mobile, tablet, and desktop views to ensure proper scaling.
• Adding widgets to specific pages: To include the widget on specific pages only, add the < div > snippet to an Embed Element on the desired pages and ensure the < script > snippet is present in the Site Settings.

Final thoughts 

By following this guide, you can enhance your Framer site with dynamic, AI-driven interactions, tailored to your audience’s needs. Publish your changes, test your setup, and let your conversational AI start engaging visitors today. For further assistance, contact ElevenLabs support.

Sign up for Conversational AI today to get started.