AI BriefingIntegrating ElevenLabs Conversational AI into a Webflow Website
Key point
This guide explains how to integrate ElevenLabs' Conversational AI widget into a website using Webflow's Embed Element and Custom Code.
Details
Integrating ElevenLabs' Conversational AI into a Webflow website allows visitors to have natural conversations, just like talking with an actual team member. This guide walks through the process of integrating the widget step by step using HTML and JavaScript.
To integrate, you need a Webflow account with Embed Element access (Core, Growth, Agency, Freelancer, or Site Plan) and a fully configured ElevenLabs AI voice agent.
Integration Steps:
- Prepare the widget: From your ElevenLabs account, copy the
<script>snippet that loads the functionality and the<div>snippet that defines the widget's location. - Set up the Webflow page: In the Designer, place an Embed Element where you want it and paste in the
<div>snippet. - Apply the script globally: Paste the
<script>snippet into the Footer Code section under the Custom Code tab in Project Settings so it works across the entire site. - Publish and verify: Since custom code isn't visible directly in the Designer, you need to Publish the site and test it in the browser.
To change the widget's size or color, use Webflow's Style Panel or Custom CSS, and if you want to use the same widget across multiple pages, it's more efficient to save it as a Component for easier management.
This summary was generated automatically by AI. Check the original for the author's claims and context. Copyright belongs to the original author.
Our guide explains how the AI works. Report summary errors, attribution issues, or removal requests via Contact.