How to Add ElevenLabs Conversational AI to a Framer Website
Key point
This guide explains how to integrate ElevenLabs' Conversational AI widget into a Framer website to implement conversational AI features.
Details
The ElevenLabs Conversational AI widget lets you add conversational AI features to a Framer website to boost customer engagement or strengthen customer support.
For the integration, you need a Framer paid plan (custom code feature required) and a fully set up ElevenLabs account. The implementation process is as follows.
- Prepare the widget: After setting up an AI agent in ElevenLabs, copy the embed code containing the
<script>and<div>. - Register the script: Paste the
<script>code into the End of<body>tag field within the Custom Code section of your Framer project settings. - Place the widget: Add an Embed Element to the desired page, change its type to HTML, and enter the
<div>code. - Publish and verify: Publish the changes and confirm that it works on the live website. (Custom code does not display in Framer preview mode.)
If the widget doesn't appear, you should check whether the script or <div> code is placed in the correct location, and if the size or position is off, you should adjust the settings of the Embed Element.
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.