npm package: @rohitkvs/revrag-web-sdk
Description: Industry-standard React SDK for Revrag chat functionality with simple script integration. Zero setup required - just include a script tag!
Author: Revrag Team
Latest version: 2.1.1

# 🚀 Revrag Web SDK

[![npm version](https://badge.fury.io/js/revrag-web-sdk.svg)](https://badge.fury.io/js/revrag-web-sdk)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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>`:

```html
<!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

1. **Download the files:**
   ```bash
   # 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
   ```

2. **Add to your HTML:**
   ```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:
```html
<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
```tsx
// 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)
```html
<!-- 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
```html
<!-- 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`:

```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:

```html
<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:

```bash
npm install revrag-web-sdk
```

```tsx
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
1. Check browser console for errors
2. Ensure React dependencies load before the widget script
3. Verify your API key is correct
4. 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
```html
<!-- 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:
```css
:root {
  --revrag-primary-color: #your-color;
  --revrag-widget-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
```

### Custom Avatar
```html
<script 
  data-avatar-url="https://your-domain.com/custom-avatar.png">
</script>
```

## 📝 Examples

- **HTML**: [Simple Example](https://github.com/revrag/web-sdk/blob/main/embed-revrag-web/public/simple-example.html)
- **Next.js**: [Next.js Example](https://github.com/revrag/web-sdk/tree/main/nextjs-revrag-example)
- **React**: [React Example](https://github.com/revrag/web-sdk/blob/main/embed-revrag-web/src/App.tsx)

## 🚀 API Key

Get your API key from [Revrag Dashboard](https://dashboard.revrag.com) or use `demo-api-key-123` for testing.

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details.

## 🤝 Support

- 📧 Email: support@revrag.com
- 📖 Documentation: [docs.revrag.com](https://docs.revrag.com)
- 🐛 Issues: [GitHub Issues](https://github.com/revrag/web-sdk/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**