Integration Guide

Multiple ways to integrate Ragora into your application.

Script Tag (Easiest)

Add this script tag before the closing </body> tag:

html

<script
  src="https://cdn.ragora.ai/widget.js"
  data-api-key="YOUR_API_KEY"
  data-api-url="https://api.ragora.ai"
></script>

React / Next.js

For React applications, use a dynamic script loader:

tsx

'use client';

import { useEffect } from 'react';

export function RagoraWidget({ apiKey }: { apiKey: string }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.ragora.ai/widget.js';
    script.setAttribute('data-api-key', apiKey);
    script.setAttribute('data-api-url', 'https://api.ragora.ai');
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, [apiKey]);

  return null;
}

// Usage in your layout:
// <RagoraWidget apiKey="YOUR_API_KEY" />

WordPress

Add the script tag to your theme's footer.php or use a plugin like "Insert Headers and Footers" to add it site-wide.

REST API

For custom integrations, use the REST API directly:

bash

# Send a chat message
curl -X POST https://api.ragora.ai/api/v1/chat \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"message": "How do I reset my password?", "site_id": "YOUR_SITE_ID"}'

Configuration Options

Attribute	Required	Description
`data-api-key`	Yes	Your site API key
`data-api-url`	Yes	Backend API base URL
`data-position`	No	Widget position: bottom-right (default), bottom-left
`data-theme`	No	Widget theme: light, dark (default)