eleven_labs_script.js

function injectElevenLabsWidget() {
    const script = document.createElement('script');
    script.src = 'https://elevenlabs.io/convai-widget/index.js';
    script.async = true;
    script.type = 'text/javascript';
    document.head.appendChild(script);
  
    // Create the wrapper and widget
    const wrapper = document.createElement('div');
    wrapper.className = 'desktop';
  
    const widget = document.createElement('elevenlabs-convai');
    widget.setAttribute('agent-id', 'SoMyS9WQqWMY0o3jhcfr');
  
    // Set initial colors based on current theme
    updateWidgetColors(widget);
  
    // Watch for theme changes
    const observer = new MutationObserver(() => {
      updateWidgetColors(widget);
    });
  
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class'],
    });
  
    function updateWidgetColors(widget) {
      const isDarkMode = !document.documentElement.classList.contains('light');
      if (isDarkMode) {
        widget.setAttribute('avatar-orb-color-1', '#2E2E2E');
        widget.setAttribute('avatar-orb-color-2', '#B8B8B8');
      } else {
        widget.setAttribute('avatar-orb-color-1', '#4D9CFF');
        widget.setAttribute('avatar-orb-color-2', '#9CE6E6');
      }
    }
  
    widget.innerHTML = `\
    <form slot="terms" class="prose text-sm">
      <h3>Terms and conditions</h3>
      <p>
        By clicking "Continue," and each time I interact with this AI agent, I 
        consent to ElevenLabs collecting and using my voice and data derived from 
        it to interpret my speech, and provide the support services I request, and 
        to the recording, storage, and sharing of my communications with 
        third-party service providers, and as described in the 
        <a href="/terms-of-use">Privacy Policy</a>. If you do not wish to have 
        your conversations recorded, please refrain from using this service.
    </form>`;
  
    // Listen for the widget's "call" event to inject client tools
    widget.addEventListener('elevenlabs-convai:call', (event) => {
      event.detail.config.clientTools = {
        submitAdviceSentence: (
          {adviceText}
        ) => {
          submitAdvice(adviceText)
        }
      };
    });
  
    // Attach widget to the DOM
    wrapper.appendChild(widget);
    document.body.appendChild(wrapper);
  }
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectElevenLabsWidget);
  } else {
    injectElevenLabsWidget();
  }