AI Assistant Widget - Production Examples

🚀 Production Deployment

In production, the widget uses simplified query parameters to configure its behavior. API keys and sensitive configuration are handled server-side for security.

Note: Production URLs only expose safe, public parameters. API keys and server URLs are configured on the server and not exposed to the client.

Query Parameters Reference

Parameter	Type	Description	Example
`assistantId`	string	Required The ID of your AI assistant	`65f8a1b2c3d4e5f6`
`theme`	string	Widget theme: "light" or "dark" (default: "light")	`dark`
`voiceInput`	boolean	Enable voice input feature (default: false)	`true`
`position`	string	Widget position: "bottom-right", "bottom-left", "center" (default: "bottom-right")	`bottom-left`
`introVideo`	string	URL-encoded path to introduction video	`intro-welcome.mp4`
`autoOpen`	boolean	Automatically open widget on page load (default: false)	`true`
`welcomeMessage`	string	URL-encoded custom welcome message	`Hello%20there!`

📋 Example 1: Basic Widget (Iframe)

The simplest way to embed the widget - just an assistant ID:

<iframe 
  src="https://widget.yourcompany.com/?assistantId=65f8a1b2c3d4e5f6"
  width="400" 
  height="600"
  frameborder="0"
  allow="microphone"
  style="border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
</iframe>

📋 Example 2: Dark Theme with Voice Input

Enable dark theme and voice input features:

<iframe 
  src="https://widget.yourcompany.com/?assistantId=65f8a1b2c3d4e5f6&theme=dark&voiceInput=true"
  width="400" 
  height="600"
  frameborder="0"
  allow="microphone"
  style="border: none; border-radius: 16px;">
</iframe>

📋 Example 3: Full-Featured Widget

All available query parameters:

<iframe 
  src="https://widget.yourcompany.com/?assistantId=65f8a1b2c3d4e5f6&theme=light&voiceInput=true&position=center&autoOpen=false&welcomeMessage=Welcome%20to%20our%20support!"
  width="100%" 
  height="700"
  frameborder="0"
  allow="microphone"
  style="border: none;">
</iframe>

📋 Example 4: JavaScript Embed (Popup Mode)

For a floating chat button that opens in a popup:

<!-- Simplified production embed - no API keys exposed -->
<script src="https://widget.yourcompany.com/embed.js?assistantId=65f8a1b2c3d4e5f6&theme=light&position=bottom-right"></script>

How it works: The embed script fetches configuration from your server using the assistant ID. API keys and sensitive data remain secure on the server side.

🔐 Security Considerations

Important: Never expose API keys, server URLs, or other sensitive configuration in production widget URLs.

Production Best Practices:

✅ Use only the assistant ID and UI preferences in query parameters
✅ Configure API endpoints and keys on the server side
✅ Use HTTPS for all widget URLs
✅ Implement domain whitelisting for embed security
✅ Set proper CORS headers on your widget server

What NOT to do:

❌ Don't include apiUrl parameter in production
❌ Don't include streamApiKey parameter in production
❌ Don't expose internal server URLs
❌ Don't use development configurations in production

🔄 Development vs Production

Development Mode

Full configuration control for testing:

// Development: All configuration exposed for testing
https://localhost:5173/widget.html?assistantId=test123&apiUrl=http://localhost:3000&streamApiKey=dev-key-123&theme=light

Production Mode

Simplified, secure configuration:

// Production: Only safe parameters exposed
https://widget.yourcompany.com/?assistantId=65f8a1b2c3d4e5f6&theme=light&voiceInput=true

🎯 Live Demo

Here's a working example using production-style parameters:

Note: This demo connects to a local development server. In production, replace the domain with your CDN URL.

📦 CDN Integration

For optimal performance, serve your widget from a CDN:

<!-- Example CDN URLs -->
<!-- Cloudflare -->
<iframe src="https://widget.company.com/?assistantId=abc123"></iframe>

<!-- AWS CloudFront -->
<iframe src="https://d1234567890.cloudfront.net/?assistantId=abc123"></iframe>

<!-- Fastly -->
<iframe src="https://widget.company.global.ssl.fastly.net/?assistantId=abc123"></iframe>

🚀 Migration Guide

Moving from development to production:

Update Widget Server Configuration
- Set production API endpoints in environment variables
- Configure Stream API keys on the server
- Enable domain whitelisting
Update Embed URLs
- Remove apiUrl and streamApiKey parameters
- Keep only UI configuration parameters
- Update domain to production CDN
Test Thoroughly
- Verify widget loads correctly
- Test all features (chat, voice, video)
- Check cross-domain functionality