Copy js/convai-tools.js to your website.
In js/convai-tools.js, change this line:
const AGENT_ID = 'agent_01jymq2txxfj8r8tb2rhjg282r';To your actual ElevenLabs agent ID:
const AGENT_ID = 'your-agent-id-here';Add this to your HTML <head>:
<script src="js/convai-tools.js"></script>- Copy
js/convai-tools.jsto yourpublicfolder - Add to your main layout or
_app.js:
<script src="/convai-tools.js"></script>- Copy
js/convai-tools.jsto your project - Add to your HTML
<head>:
<script src="js/convai-tools.js"></script>- Upload
js/convai-tools.jsto your theme folder - Add to your theme's
header.php:
<script src="<?php echo get_template_directory_uri(); ?>/convai-tools.js"></script>- Upload
js/convai-tools.jsto your project assets - Add custom code in your project settings:
<script src="/convai-tools.js"></script>- Go to Settings → Custom Code
- Add this in the
<head>section:
<script src="https://your-wixsite.com/convai-tools.js"></script>- Go to Settings → Advanced → Code Injection
- Add this in the Header section:
<script src="/convai-tools.js"></script>- Go to Project Settings → Custom Code
- Add this in the
<head>section:
<script src="/convai-tools.js"></script>- Go to Online Store → Themes → Edit Code
- Add to
theme.liquidin the<head>:
<script src="{{ 'convai-tools.js' | asset_url }}"></script>You can also customize these settings in the same file:
// Navigation: true = new tab, false = same tab
const OPEN_IN_NEW_TAB = true;
// Widget position
const WIDGET_POSITION = 'bottom-right'; // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
// Base URL (only needed if auto-detection fails)
const BASE_URL = ''; // e.g., 'https://mysite.framer.app'- Check browser console for errors
- Ensure script is loaded before closing
</body>tag - Verify agent ID is correct
- Check if popup blockers are enabled
- Try setting
OPEN_IN_NEW_TAB = false - Verify your agent has the
redirectToExternalURLtool configured
- Set
BASE_URLmanually if auto-detection fails - Check your site's actual URL structure
Your agent can use these commands:
- "Show me pricing" →
/pricing.html - "Book a demo" →
/booking.html - "Go home" →
/index.html
The widget will automatically:
- ✅ Load the ElevenLabs script
- ✅ Create the widget in the specified position
- ✅ Handle voice navigation between pages
- ✅ Work on any platform (Framer, Wix, React, etc.)
Just make sure your ElevenLabs agent has the redirectToExternalURL tool configured!