@rohitkvs/revrag-web-sdk

v2.1.1

Published

9 months ago

Industry-standard React SDK for Revrag chat functionality with simple script integration. Zero setup required - just include a script tag!

Downloads

0High
0Medium
0Low

rohitkvs

react nextjs chat sdk typescript plugin events ai conversation widget floating-chat script-integration zero-setup

🚀 Revrag Web SDK

The simplest way to add AI-powered chat and support to any website. Zero setup required - just include a script tag and the floating widget automatically appears!

✨ Features

🎯 Zero Setup: Include one script tag, widget appears automatically
💬 Chat Support: Real-time messaging with AI-powered responses
📞 Voice Calls: One-click voice calling functionality
🎨 Customizable: Colors, position, size, and branding
📱 Responsive: Works perfectly on desktop and mobile
⚡ Framework Agnostic: Works with React, Vue, Angular, WordPress, or plain HTML
🔧 TypeScript: Full TypeScript support for React projects

🚀 Quick Start (Script Integration)

Method 1: CDN (Recommended)

Add this to your HTML <head>:

<!DOCTYPE html>
<html>
<head>
  <!-- React Dependencies (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>
  
  <!-- Revrag Widget - Auto-initializes -->
  <script 
    src="https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js"
    data-api-key="your-api-key"
    data-position="bottom-right"
    data-primary-color="#0070f3">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/revrag-web-sdk@latest/dist/style.css">
</head>
<body>
  <!-- Your content -->
  <!-- Widget automatically appears in bottom-right corner! -->
</body>
</html>

Method 2: Download Files

Download the files:

# Download widget script and styles
curl -O https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js
curl -O https://unpkg.com/revrag-web-sdk@latest/dist/style.css

Add to your HTML:

<head>
  <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>
  <link rel="stylesheet" href="/path/to/style.css">
  <script 
    src="/path/to/revrag-widget.umd.js"
    data-api-key="your-api-key">
  </script>
</head>

🎯 Configuration Options

Configure the widget using HTML data attributes:

| Attribute | Description | Options | Default | |-----------|-------------|---------|---------| | data-api-key | Your API key | string | Required | | data-debug | Enable debug logging | true/false | false | | data-position | Widget position | bottom-right, bottom-left, top-right, top-left | bottom-right | | data-primary-color | Theme color | Hex color (e.g., #0070f3) | #667eea | | data-size | Widget size | small, medium, large | medium | | data-avatar-url | Custom avatar | URL | Default AI avatar |

Example with all options:

<script 
  src="https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js"
  data-api-key="your-api-key"
  data-debug="true"
  data-position="bottom-left"
  data-primary-color="#ff6b6b"
  data-size="large"
  data-avatar-url="https://your-domain.com/avatar.png">
</script>

📱 Framework Examples

Next.js

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <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>
        <script 
          src="https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js"
          data-api-key="your-api-key">
        </script>
        <link rel="stylesheet" href="https://unpkg.com/revrag-web-sdk@latest/dist/style.css">
      </head>
      <body>{children}</body>
    </html>
  );
}

React (Create React App)

<!-- public/index.html -->
<head>
  <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>
  <script 
    src="https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js"
    data-api-key="your-api-key">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/revrag-web-sdk@latest/dist/style.css">
</head>

Vue.js

<!-- public/index.html -->
<head>
  <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>
  <script 
    src="https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js"
    data-api-key="your-api-key">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/revrag-web-sdk@latest/dist/style.css">
</head>

WordPress

Add to your theme's functions.php:

function add_revrag_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>
    <script 
      src="https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js"
      data-api-key="<?php echo get_option('revrag_api_key'); ?>">
    </script>
    <link rel="stylesheet" href="https://unpkg.com/revrag-web-sdk@latest/dist/style.css">
    <?php
}
add_action('wp_head', 'add_revrag_widget');

🔧 JavaScript API (Advanced)

For programmatic control:

<script src="https://unpkg.com/revrag-web-sdk@latest/dist/revrag-widget.umd.js"></script>
<script>
// Initialize manually
RevragWidget.init({
  apiKey: 'your-api-key',
  position: 'bottom-right',
  primaryColor: '#0070f3',
  debug: true
});

// Destroy widget
RevragWidget.destroy();
</script>

📦 React Component Usage

For React projects that want component-level integration:

npm install revrag-web-sdk

import { FloatingHelpWidget } from 'revrag-web-sdk';
import 'revrag-web-sdk/style.css';

function App() {
  return (
    <div>
      {/* Your app content */}
      
      <FloatingHelpWidget 
        apiKey="your-api-key"
        position="bottom-right"
        primaryColor="#0070f3"
      />
    </div>
  );
}

🔧 Troubleshooting

Widget Not Appearing

Check browser console for errors
Ensure React dependencies load before the widget script
Verify your API key is correct
Check that CSS file is loaded

Common Issues

Adblockers: May block CDN requests - try downloading files locally
CSP Policy: Add CDN domains to your Content Security Policy
HTTPS: Ensure all scripts load over HTTPS in production

Development vs Production

<!-- Development (unminified, better debugging) -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- Production (minified, better performance) -->
<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>

🎨 Customization

Custom Styling

Override CSS variables:

:root {
  --revrag-primary-color: #your-color;
  --revrag-widget-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Custom Avatar

<script 
  data-avatar-url="https://your-domain.com/custom-avatar.png">
</script>

📝 Examples

HTML: Simple Example
Next.js: Next.js Example
React: React Example

🚀 API Key

Get your API key from Revrag Dashboard or use demo-api-key-123 for testing.

📄 License

MIT License - see LICENSE file for details.

🤝 Support

📧 Email: [email protected]
📖 Documentation: docs.revrag.com
🐛 Issues: GitHub Issues

🎉 What's New in v2.1.0

✅ Zero-Setup Script Integration - Just include a script tag!
✅ Auto-Initialization - Widget appears automatically
✅ CDN Support - Load directly from unpkg/jsdelivr
✅ Framework Agnostic - Works with any website
✅ Improved Documentation - Clear examples for every use case

Made with ❤️ by the Revrag Team