Voice Widget Embed Code

iFrame Integration

Add this iframe to your website:

<iframe 
  id="voice-widget-frame"
  src="https://dev-service.app.gosunnyai.com/widget-frame?assistant_type=solar_offer&user_id=YOUR_USER_ID&env=dev" 
  style="position: fixed; bottom: 0; right: 0; width: 100px; height: 100px; border: none; z-index: 9999;"
  allow="microphone"
></iframe>

Note: For the solar_offer assistant type, you must provide a valid user_id. The system will fetch the user's solar data from the API and use it to personalize the assistant's responses.

Script Integration

Add these scripts to your website:

<!-- Voice Widget CSS -->
<link rel="stylesheet" href="https://dev-service.app.gosunnyai.com/widget.css">

<!-- Voice Widget Script -->
<script src="https://dev-service.app.gosunnyai.com/static/js/voice-widget.js"></script>

<!-- Initialize the widget -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.initVoiceWidget({
      apiEndpoints: {
        webrtcConfig: 'https://dev-service.app.gosunnyai.com/api/webrtc-config',
        session: 'https://dev-service.app.gosunnyai.com/api/session?assistant_type=solar_offer&user_id=YOUR_USER_ID&env=dev'
      }
    });
    
    // Listen for events
    document.addEventListener('voiceWidgetTranscript', function(event) {
      console.log('Transcript:', event.detail.content);
      // Handle transcript here
    });
    
    document.addEventListener('voiceWidgetResponse', function(event) {
      console.log('Response:', event.detail.content);
      // Handle response here
    });
    
    document.addEventListener('voiceWidgetTag', function(event) {
      console.log('Tag:', event.detail.tag, 'Content:', event.detail.content);
      // Handle tags here
    });
  });
</script>

Note: For the solar_offer assistant type, you must provide a valid user_id. The system will fetch the user's solar data from the API and use it to personalize the assistant's responses.