# ViewPro Widget A React-based embeddable widget for the ViewPro video calling and collaboration platform, featuring real-time communication via LiveKit and seamless integration into any web application. ## Project Overview ViewPro Widget is a standalone, embeddable React component that provides video calling functionality. It integrates with LiveKit for WebRTC infrastructure and can be easily embedded into any website or web application as a widget. ## Installation ### Prerequisites - Node.js (v14 or higher) - npm or yarn - LiveKit server instance - ViewPro backend API endpoint ### Setup Steps 1. **Clone the repository** ```bash git clone cd viewpro-widget ``` 2. **Install dependencies** ```bash npm install ``` 3. **Configure environment variables** - Create a `.env` file in the root directory - Add required environment variables: ``` REACT_APP_API_URL= REACT_APP_LIVEKIT_URL= ``` 4. **Build the widget** ```bash npm run build:webpack ``` This will generate the widget bundle in the `dist` folder. ## Running the Application ### Development Mode ```bash npm start ``` Runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser. ### Production Build ```bash npm run build ``` Builds the app for production using Create React App, optimized for the best performance. ### Webpack Build (Widget Bundle) ```bash npm run build:webpack ``` Builds the widget as a standalone UMD bundle (`viewpro-widget.js`) in the `dist` folder that can be embedded in any website. ## Usage ### Embedding the Widget 1. Include the built widget script in your HTML: ```html ``` 2. The widget will automatically initialize and render when the page loads. 3. Control the widget from the host app: ```html ``` ### Public Widget API After loading the script, the following methods are available on `window.ViewProWidget`: - `render()` - Mount the widget if needed - `open()` - Open the call room UI - `close()` - Return to the floating button UI - `isOpen()` - Get current open state (`true`/`false`) - `destroy()` - Unmount widget and remove the container from DOM ### Next.js Integration Example Place the widget file in your Next.js `public` folder (for example: `public/widgets/viewpro-widget.js`), then call it from a client component: ```tsx 'use client'; import Script from 'next/script'; export default function ViewProWidgetController() { return ( <>