// ============================================================================ // ELEVENLABS CONVAI WIDGET SETUP // ============================================================================ // // CHANGE THESE VALUES FOR YOUR SITE: // ============================================================================ // REQUIRED: Replace with your ElevenLabs agent ID const AGENT_ID = 'agent_0201k645sf70frwtd93a2x186asj'; // OPTIONAL: Change navigation behavior const OPEN_IN_NEW_TAB = true; // true = new tab, false = same tab // OPTIONAL: Change widget position const WIDGET_POSITION = 'bottom-right'; // 'bottom-right', 'bottom-left', 'top-right', 'top-left' // OPTIONAL: Base URL for navigation (leave empty for auto-detection) const BASE_URL = 'https://v3rsion.com'; // e.g., 'https://mysite.framer.app' or 'https://mysite.wixsite.com/mysite' // ============================================================================ // DON'T CHANGE ANYTHING BELOW THIS LINE // ============================================================================ // Create and inject the widget with client tools function injectElevenLabsWidget() { const ID = 'elevenlabs-convai-widget'; // Check if the widget is already loaded if (document.getElementById(ID)) { return; } // Create widget script const script = document.createElement('script'); script.src = 'https://unpkg.com/@elevenlabs/convai-widget-embed'; script.async = true; script.type = 'text/javascript'; document.head.appendChild(script); // Create wrapper and widget const wrapper = document.createElement('div'); wrapper.className = `convai-widget ${WIDGET_POSITION}`; const widget = document.createElement('elevenlabs-convai'); widget.id = ID; widget.setAttribute('agent-id', AGENT_ID); widget.setAttribute('variant', 'full'); // Listen for the widget's "call" event to inject client tools widget.addEventListener('elevenlabs-convai:call', (event) => { event.detail.config.clientTools = { redirectToExternalURL: ({ url }) => { console.log('redirectToExternalURL called with url:', url); // Build full URL - handles any base URL let fullUrl = url; if (!url.startsWith('http')) { // Use custom base URL if provided, otherwise auto-detect const baseUrl = BASE_URL || window.location.origin + window.location.pathname.replace(/\/[^\/]*$/, ''); fullUrl = `${baseUrl}${url.startsWith('/') ? '' : '/'}${url}`; } console.log('Navigating to:', fullUrl); // Navigate based on config if (OPEN_IN_NEW_TAB) { window.open(fullUrl, '_blank', 'noopener,noreferrer'); } else { window.location.href = fullUrl; } }, }; }); // Attach widget to the DOM wrapper.appendChild(widget); document.body.appendChild(wrapper); } // Initialize when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', injectElevenLabsWidget); } else { injectElevenLabsWidget(); }