GUIDESNo-Code

Agents Platform 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

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

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 Agents Platform 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 Agents Platform asset on the ‘Layers’ bar on the left and the Agents Platform 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 Agents Platform component is placed below the desktop component in the layers panel.

Convai Framer Example Project
Convai Framer Example Project

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.