AvinAI ConvAI Widget Embed

Embeddable voice conversation widget for AvinAI agents. Add AI-powered voice conversations to any website with just 2 lines of code.

🚀 Quick Start

Add the widget to your website:

<!-- Step 1: Add the widget element with your agent ID -->
<avin-convai id="YOUR_AGENT_ID"></avin-convai>

<!-- Step 2: Load the widget script -->
<script src="https://unpkg.com/@avinai/convai-widget-embed" async type="text/javascript"></script>

That's it! The voice assistant will appear as a floating button on your website.

📋 Features

• ✅ Easy Integration - Just 2 lines of code
• ✅ Voice Conversations - WebRTC-powered real-time voice
• ✅ Customizable - Multiple configuration options
• ✅ Responsive - Works on desktop and mobile
• ✅ Zero Dependencies - Self-contained web component

🎨 Configuration

Customize the widget with attributes:

<avin-convai 
  id="YOUR_AGENT_ID"
  position="bottom-right"
  primary-color="#6366f1"
  server-url="https://your-server.com"
></avin-convai>

Available Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | id | string | required | Your AvinAI agent ID | | position | string | bottom-right | Widget position: bottom-right, bottom-left, top-right, top-left | | primary-color | string | #6366f1 | Primary color for the widget (hex format) | | server-url | string | auto | Custom server URL for API calls |

📖 Examples

Basic Usage

<avin-convai id="63c510f4-b98a-435c-ad22-aa1e042d1d92"></avin-convai>
<script src="https://unpkg.com/@avinai/convai-widget-embed" async type="text/javascript"></script>

Custom Position and Color

<avin-convai 
  id="63c510f4-b98a-435c-ad22-aa1e042d1d92"
  position="bottom-left"
  primary-color="#10b981"
></avin-convai>
<script src="https://unpkg.com/@avinai/convai-widget-embed" async type="text/javascript"></script>

With Custom Server

<avin-convai 
  id="63c510f4-b98a-435c-ad22-aa1e042d1d92"
  server-url="https://your-custom-server.com"
></avin-convai>
<script src="https://unpkg.com/@avinai/convai-widget-embed" async type="text/javascript"></script>

🔧 Advanced Usage

Using Specific Version

<script src="https://unpkg.com/@avinai/[email protected]" async type="text/javascript"></script>

Self-Hosting

Download and host the widget yourself:

npm install @avinai/convai-widget-embed

Then include from your own server:

<script src="/path/to/widget.js" type="module"></script>

🌐 Browser Support

• Chrome / Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Android)

Requirements:

• WebRTC support
• Microphone access

📱 Mobile Support

The widget is fully responsive and works on mobile devices. Users will be prompted to grant microphone permission on first use.

🔒 Security & Privacy

• HTTPS required for microphone access
• User must explicitly grant microphone permission
• All voice data is transmitted via secure WebRTC
• No data is stored by the widget

🛠️ Development

# Clone the repository
git clone https://github.com/Alok7268/hr-dashboard.git
cd sdk

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

📄 License

MIT

🤝 Support

For support, please visit AvinAI Dashboard or contact [email protected]

🔗 Links

• Documentation
• Dashboard
• GitHub

Made with ❤️ by AvinAI