Hi, I want to add the Vapi Widget to my Framer website. Usually I just take the web snippet from the docs and put it in the website body. But in this case I want the widget to be at a specific position on the site. So I want to create a code component in Framer, which needs React as input. I'm not a programmer. Is there some code template I can use there just like the web snippet? Thx

@tom Hello! I'm glad to hear you're interested in adding the VAPI Widget to your Framer website. While we don't have a specific React component ready to use, you can certainly adapt the web snippet to work within a React component. Here's a basic template you can use to create a React component for the VAPI Widget:

jsx
import React, { useEffect } from 'react';

const VapiWidget = ({ assistantId }) => {
  useEffect(() => {
    // Assuming you have the VAPI widget snippet as a function
    const loadVapiWidget = () => {
      // Your VAPI widget snippet code here
      // Make sure to use the `assistantId` in the snippet
    };

    loadVapiWidget();
  }, [assistantId]); // Re-run the effect if the assistantId changes

  return <div id="vapi-widget-container"></div>;
};

export default VapiWidget;

To use this component, you would include it in your Framer project like so:

jsx
<VapiWidget assistantId="your-assistant-id" />

Make sure to replace

"your-assistant-id"

with the actual assistant ID you get from your Vapi dashboard. If you need the exact snippet to insert into the

loadVapiWidget

function or further assistance, please let me know!

@User @User

ovverride the defualt css style for positiion abssolute.