Skip to main content
ElevenLabs Documentation Docs

Search documentation

Type to search this documentation.

On this pageOverview

ElevenAgents in Framer

Learn how to deploy a ElevenLabs agent to Framer

This tutorial will guide you through adding your ElevenLabs agent to your Framer website.

Prerequisites

Section titled “Prerequisites”
  • An ElevenLabs Agents agent created following this guide
  • A Framer account & website, create one here
Convai Framer Example Project

Guide

Section titled “Guide”

  1. Visit your Framer editor

    Open your website in the Framer editor and click on the primary desktop on the left.

  2. Add the ElevenAgents component

    Copy and paste the following url into the page you would like to add the ElevenLabs agent to:

    https://framer.com/m/ConversationalAI-iHql.js@y7VwRka75sp0UFqGliIf

    You’ll now see a ElevenAgents asset on the ‘Layers’ bar on the left and the ElevenAgents component’s details on the right.

  3. Fill in the agent details

    Enable the ElevenLabs agent by filling in the agent ID in the bar on the right. You can find the agent ID in the ElevenLabs dashboard.

Having trouble? Make sure the ElevenAgents component is placed below the desktop component in the layers panel.

Convai Framer Example Project Convai Framer Example Project

Next steps

Section titled “Next steps”

Now that you have added your ElevenLabs agent to your Framer website, you can:

  1. Customize the widget in the ElevenLabs dashboard to match your brand
  2. Add additional languages
  3. Add advanced functionality like tools & knowledge base.
Suggest an edit

Propose a replacement for this page. The site team reviews it before applying any changes.

Export
Documentation menu