I see the widget on a page, but when I click start I get error shown in the snapshot. how to solve the issue ? https://cdn.discordapp.com/attachments/1420838342165139466/1420838342450348183/image.png?ex=68d6da52&is=68d588d2&hm=84371d2c883b837e5ba0fc5a2bebeb2f8e0b3e5a09945778eb91011c80ccf937&

Suggestion: The error indicates the Vapi widget requires your site to be served over HTTPS for voice features to work. In Framer, make sure your published site uses HTTPS and not a local or "preview" (http or file://) environment.

html
<!-- Example: Embed the widget on a secure (https) Framer page -->
<script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/embed/widget.umd.js" async type="text/javascript"></script>
<vapi-widget public-key="your-public-key" assistant-id="your-assistant-id" mode="voice"></vapi-widget>

Publish your Framer site and test the widget on the live HTTPS URL to resolve the loading error. For more, see the [Vapi widget requirements](https://docs.vapi.ai/chat/web-widget). Source: - [Web widget documentation](https://docs.vapi.ai/chat/web-widget)

my site is in production mode and uses https

Hi ivrig, To integrate the Vapi chat widget into your website, you can use the following steps based on whether you prefer using HTML or React/TypeScript: HTML Script Tag 1. **Include the widget script**:

html
   <script src="https://unpkg.com/@vapi-ai/client-sdk-react/dist/embed/widget.umd.js" async type="text/javascript"></script>

2. **Add the widget to your HTML**:

html
   <vapi-widget
     public-key="your-public-key"
     assistant-id="your-assistant-id"
     mode="chat"
     theme="light"
   ></vapi-widget>

React/TypeScript 1. Install the Vapi SDK if not installed:

bash
   npm install @vapi-ai/client-sdk-react

2. **Use the VapiWidget component in your React app**:

jsx
   import { VapiWidget } from '@vapi-ai/client-sdk-react';
   
   function App() {
     return (
       <VapiWidget
         publicKey="your-public-key"
         assistantId="your-assistant-id"
         mode="chat"
       />
     );
   }

For detailed customization including voice mode, you can follow the [Web widget documentation](https://docs.vapi.ai/chat/web-widget) which provides guidance on configuring interaction modes, appearance, and handling events. If you're encountering display issues like overlay or clipping elements in a site builder such as Framer, consider using floating script-tag widgets or adjusting iframe sizes to avoid interference with your site layout.