@rohitkvs/revrag-web-sdk
Version:
Industry-standard React SDK for Revrag chat functionality with simple script integration. Zero setup required - just include a script tag!
145 lines (136 loc) • 5.06 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Revrag Widget - Simple Example</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.hero {
text-align: center;
padding: 50px 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
margin-bottom: 30px;
}
.section {
background: #f8f9fa;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
border-left: 4px solid #667eea;
}
.code {
background: #2d3748;
color: #e2e8f0;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 10px 0;
overflow-x: auto;
}
.highlight {
background: #ffeaa7;
padding: 2px 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="hero">
<h1>🚀 Revrag Widget Demo</h1>
<p>The floating help widget should appear in the bottom-right corner!</p>
<p>No imports, no setup required - just include the script.</p>
</div>
<div class="section">
<h2>✨ What You're Seeing</h2>
<p>This page demonstrates the simplest possible integration of the Revrag Widget:</p>
<ul>
<li>✅ No React imports needed</li>
<li>✅ No setup or initialization code</li>
<li>✅ Just one script tag with configuration</li>
<li>✅ Widget automatically appears</li>
</ul>
</div>
<div class="section">
<h2>📝 Integration Code</h2>
<p>Here's the complete code needed to add this widget to any website:</p>
<div class="code">
<!-- Include React (required) --><br>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script><br>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script><br><br>
<!-- Include Revrag Widget Script --><br>
<script <br>
src="../dist/revrag-widget.umd.js"<br>
<span class="highlight">data-api-key="demo-api-key-123"</span><br>
data-debug="true"<br>
data-position="bottom-right"<br>
data-primary-color="#667eea"<br>
data-size="medium"><br>
</script>
</div>
</div>
<div class="section">
<h2>🎯 Configuration Options</h2>
<p>Configure the widget using data attributes on the script tag:</p>
<ul>
<li><code>data-api-key</code> - Your API key (required)</li>
<li><code>data-debug</code> - Enable debug mode (true/false)</li>
<li><code>data-position</code> - Position (bottom-right, bottom-left, top-right, top-left)</li>
<li><code>data-primary-color</code> - Widget color (hex color code)</li>
<li><code>data-size</code> - Widget size (small, medium, large)</li>
<li><code>data-avatar-url</code> - Custom avatar URL</li>
</ul>
</div>
<div class="section">
<h2>🔧 Alternative JavaScript API</h2>
<p>You can also initialize the widget programmatically if needed:</p>
<div class="code">
<script><br>
// Configure before script loads<br>
window.RevragWidget = {<br>
config: {<br>
apiKey: 'your-api-key',<br>
debug: true,<br>
position: 'bottom-right'<br>
}<br>
};<br><br>
// Or initialize after script loads<br>
window.RevragWidget.init({<br>
apiKey: 'your-api-key',<br>
debug: true<br>
});<br>
</script>
</div>
</div>
<div class="section">
<h2>💬 Try It Out!</h2>
<p>Click the floating widget in the bottom-right corner to:</p>
<ul>
<li>🗨️ Start a chat conversation</li>
<li>📞 Initiate a voice call (demo)</li>
<li>❓ Get help and support</li>
</ul>
<p>The widget is fully functional and ready to integrate into your website!</p>
</div>
<!-- Load React (required for the widget) -->
<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>
<!-- Load Revrag Widget Script with configuration -->
<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>
</body>
</html>