GUIDESNo-Code

Agents Platform in Webflow

Learn how to deploy a ElevenLabs agent to Webflow

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

Prerequisites

  • An ElevenLabs Agents agent created following this guide
  • A Webflow account with Core, Growth, Agency, or Freelancer Workspace (or Site Plan)
  • Basic familiarity with Webflow’s Designer

Guide

1

Get your embed code

Visit the ElevenLabs dashboard and find your agent’s embed widget.

1<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>
2<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
2

Add the widget to your page

  1. Open your Webflow project in Designer
  2. Drag an Embed Element to your desired location
  3. Paste the <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> snippet into the Embed Element’s code editor
  4. Save & Close
3

Add the script globally

  1. Go to Project Settings > Custom Code
  2. Paste the snippet <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script> into the Footer Code section
  3. Save Changes
  4. Publish your site to see the changes

Note: The widget will only be visible after publishing your site, not in the Designer.

Troubleshooting

If the widget isn’t appearing, verify:

  • The <script> snippet is in the Footer Code section
  • The <elevenlabs-convai> snippet is correctly placed in an Embed Element
  • You’ve published your site after making changes

Next steps

Now that you have added your ElevenLabs agent to Webflow, 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