ElevenAgents 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
Section titled “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
Get your embed code
Visit the ElevenLabs dashboard and find your agent’s embed widget.
HTML <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>Add the widget to your page
- Open your Webflow project in Designer
- Drag an Embed Element to your desired location
- Paste the
<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>snippet into the Embed Element’s code editor - Save & Close
Add the script globally
- Go to Project Settings > Custom Code
- Paste the snippet
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>into the Footer Code section - Save Changes
- Publish your site to see the changes
Note: The widget will only be visible after publishing your site, not in the Designer.
Troubleshooting
Section titled “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
Section titled “Next steps”Now that you have added your ElevenLabs agent to Webflow, you can:
- Customize the widget in the ElevenLabs dashboard to match your brand
- Add additional languages
- Add advanced functionality like tools & knowledge base