> ## Documentation Index
> Fetch the complete documentation index at: https://docs.roostrr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Widgets

> Embed interactive voice calling widgets directly onto your website in minutes.

Web Widgets allow you to put a click-to-call phone button directly on your website. Visitors can tap the button to speak with your voice agents immediately inside their browser, utilizing WebRTC for ultra-low latency without dialling a telephone number.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/nura/vmje5yEtQjD3P9ET/images/screenshots/screenshot-for-widget-light.png?fit=max&auto=format&n=vmje5yEtQjD3P9ET&q=85&s=61dfef3db86539d663d011aef9dfd191" alt="Web Widgets Screen (Light)" style={{ borderRadius: '0.5rem' }} width="1441" height="848" data-path="images/screenshots/screenshot-for-widget-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/nura/vmje5yEtQjD3P9ET/images/screenshots/screenshot-for-widget-dark.png?fit=max&auto=format&n=vmje5yEtQjD3P9ET&q=85&s=859e5a6ddd29b9a72b7a14de682633d5" alt="Web Widgets Screen (Dark)" style={{ borderRadius: '0.5rem' }} width="1454" height="842" data-path="images/screenshots/screenshot-for-widget-dark.png" />
</Frame>

## Managing Widgets

### Creating a Widget

1. Navigate to the **Widgets** tab in your dashboard.
2. Click **Create Widget**.
3. Choose the target **Voice Agent** or **Restaurant Worker** to handle calls from this widget.
4. Customize the name, description, and status settings.

### Testing in the Playground

Before pasting embed snippets into production sites, you can click **Test Widget** on any row to open the browser calling simulator, verifying that microphone access and conversation flows operate correctly.

***

## Integrating onto Your Website

To deploy your widget, copy your **Widget ID** and copy one of the embed codes below. Replace `YOUR_WIDGET_ID` and `YOUR_API_KEY_HERE` with your actual credentials.

### 1. HTML / JavaScript

Place this script snippet right before your closing `</body>` tag:

```html theme={null}
<script src="https://cdn.roostrr.me/widget.js"></script>
<script>
  window.addEventListener('load', function() {
    if (window.Roostrr) {
      window.Roostrr.init({
        widgetId: "YOUR_WIDGET_ID",
        apiKey: "YOUR_API_KEY_HERE",
        theme: "auto",
        primaryColor: "#DC2626",
        iconColor: "#ffffff",
        position: "bottom-right"
      });
    }
  });
</script>
```

### 2. React

Create a custom component to inject the script:

```jsx theme={null}
import React, { useEffect } from 'react';

export default function RoostrrWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://cdn.roostrr.me/widget.js";
    script.async = true;
    script.onload = () => {
      if (window.Roostrr) {
        window.Roostrr.init({
          widgetId: "YOUR_WIDGET_ID",
          apiKey: "YOUR_API_KEY_HERE",
          theme: "auto",
          primaryColor: "#DC2626",
          iconColor: "#ffffff",
          position: "bottom-right"
        });
      }
    };
    document.body.appendChild(script);
  }, []);

  return null;
}
```

### 3. Next.js

Use the Next.js `Script` component to load the script after the page is interactive:

```tsx theme={null}
"use client";
import Script from 'next/script';

export default function RoostrrWidget() {
  return (
    <Script
      src="https://cdn.roostrr.me/widget.js"
      strategy="afterInteractive"
      onLoad={() => {
        if (window.Roostrr) {
          window.Roostrr.init({
            widgetId: "YOUR_WIDGET_ID",
            apiKey: "YOUR_API_KEY_HERE",
            theme: "auto",
            primaryColor: "#DC2626",
            iconColor: "#ffffff",
            position: "bottom-right"
          });
        }
      }}
    />
  );
}
```

### 4. WordPress

1. Download the Roostrr WordPress plugin from your dashboard resources.
2. Upload and activate the plugin inside your WordPress Admin.
3. Go to **Settings** > **Roostrr** in your admin panel.
4. Input your **Widget ID** and **API Key**.
5. Save changes. The widget will render automatically on all public pages.