Pipecat Voice Widget - Demo & Documentation

⚠️ Important: Backend Required

This widget requires a Pipecat backend server to function. The widget frontend is deployed, but you need to set up the backend API separately.

🚀 Quick Start

Embed on Your Website

Add this snippet to any webpage to embed the voice widget:

<script
  src="https://website-voiceai-widget.pages.dev/embed.js"
  data-widget-id="demo"
  data-pipecat-url="https://voice.inspireyourai.com"
  data-position="bottom-right"
  async
></script>

Replace:

✅ Backend URL configured: voice.inspireyourai.com URL
demo with your widget ID (if configured)

Configuration Options

Customize the widget behavior with these attributes:

data-widget-id - Widget identifier (default: "demo")
data-pipecat-url - Backend server URL (required)
data-position - Position: bottom-right, bottom-left, top-right, top-left
data-mode - Display mode: "floating" or "inline"

🔧 Backend Setup Required

The widget needs a Pipecat backend server with these endpoints:

Required API Endpoints

POST /connect

Creates a Daily room and spawns a voice bot. Returns room URL and token.

            // Request
{
  "widget_id": "demo",
  "session_metadata": {
    "page_url": "https://example.com",
    "user_agent": "..."
  }
}

// Response
{
  "room_url": "https://your-domain.daily.co/room-xyz",
  "token": "eyJ...",
  "room_name": "room-xyz",
  "bot_pid": 12345,
  "expires_at": "2024-01-15T10:30:00"
}
          

GET /widget/config/{widget_id}

Returns widget configuration (optional - falls back to defaults if not available).

            // Response
{
  "widget_id": "demo",
  "name": "Voice Assistant",
  "theme": {
    "accent_color": "#f97316",
    "position": "bottom-right",
    "launcher_size": 60,
    "border_radius": 16
  },
  "branding": {
    "company_name": "Your Company",
    "avatar_image": null
  },
  "behavior": {
    "greeting": "Hi! Click to start a voice conversation.",
    "auto_open": false
  }
}
          

📋 Complete Setup Steps

Deploy a Pipecat Backend Server
Set up a Python server with Pipecat that implements the required API endpoints (/connect and optionally /widget/config/{id}).
Configure Daily.co
Sign up for Daily.co and get API credentials for creating video rooms (used for voice).
Update the Embed Snippet
Replace data-pipecat-url with your backend server URL.
Add to Your Website
Insert the embed script in your website's HTML, just before the closing </body> tag.
Test
Visit your website and click the voice widget launcher to test the connection.

📐 Inline Mode

Embed the widget directly in a container (instead of a floating launcher):

<!-- Container -->
<div id="voice-widget" style="width: 400px; height: 600px;"></div>

<!-- Embed Script -->
<script
  src="https://website-voiceai-widget.pages.dev/embed.js"
  data-widget-id="demo"
  data-pipecat-url="https://voice.inspireyourai.com"
  data-mode="inline"
  data-target="#voice-widget"
  async
></script>

📊 Current Deployment Status

✅ Frontend Deployed: Widget and embed script are live at website-voiceai-widget.pages.dev

✅ Backend Running: Pipecat server is live at voice.inspireyourai.com

💡 Ready to Use: Both frontend and backend are configured and working. Just copy the embed snippet above and add it to your website!

📚 Resources

🧪 Test the Widget

If you have a Pipecat backend running, you can test the widget by visiting:

            https://website-voiceai-widget.pages.dev/index.html?pipecat=https://voice.inspireyourai.com
          

Or test with local backend (localhost:7860)

🎙️ Pipecat Voice Widget