🚀 Revrag Widget Demo
The floating help widget should appear in the bottom-right corner!
No imports, no setup required - just include the script.
✨ What You're Seeing
This page demonstrates the simplest possible integration of the Revrag Widget:
- ✅ No React imports needed
- ✅ No setup or initialization code
- ✅ Just one script tag with configuration
- ✅ Widget automatically appears
📝 Integration Code
Here's the complete code needed to add this widget to any website:
<!-- Include React (required) -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- Include Revrag Widget Script -->
<script
src="../dist/revrag-widget.umd.js"
data-api-key="demo-api-key-123"
data-debug="true"
data-position="bottom-right"
data-primary-color="#667eea"
data-size="medium">
</script>
🎯 Configuration Options
Configure the widget using data attributes on the script tag:
data-api-key - Your API key (required)data-debug - Enable debug mode (true/false)data-position - Position (bottom-right, bottom-left, top-right, top-left)data-primary-color - Widget color (hex color code)data-size - Widget size (small, medium, large)data-avatar-url - Custom avatar URL
🔧 Alternative JavaScript API
You can also initialize the widget programmatically if needed:
<script>
// Configure before script loads
window.RevragWidget = {
config: {
apiKey: 'your-api-key',
debug: true,
position: 'bottom-right'
}
};
// Or initialize after script loads
window.RevragWidget.init({
apiKey: 'your-api-key',
debug: true
});
</script>
💬 Try It Out!
Click the floating widget in the bottom-right corner to:
- 🗨️ Start a chat conversation
- 📞 Initiate a voice call (demo)
- ❓ Get help and support
The widget is fully functional and ready to integrate into your website!