DocsIntegration

Integrate Ragged into Your Website

Add an AI-powered chatbot to your React or Next.js application in minutes. Our SDK provides a fully customizable chat widget that works seamlessly with modern frameworks.

1Using the Platform in Your React Website

Integrate Ragged's AI chatbot into your React application in minutes. Our SDK provides a fully customizable chat widget that works seamlessly with React, Next.js, and other frameworks.

Installation

Terminal

npm install ragged-chat-sdk

Basic Usage

Import the SDK and initialize it with your chatbot's subdomain. The widget will automatically appear on your page.

App.jsx

import { init } from 'ragged-chat-sdk';
import { useEffect } from 'react';

export default function App() {

Option 1: Using Environment Variables (Recommended)

Create a .env.local file in your project root and add your subdomain. The SDK will automatically detect it.

NEXT_PUBLIC_RAGGED_SUBDOMAIN="your-chatbot-subdomain"

Then, simply initialize the SDK without passing a subdomain in your code.

useEffect(() => {
init();
}, []);

Option 2: Explicit Initialization

You can also pass the subdomain explicitly in your code block.

useEffect(() => {
init({
subdomain: 'your-chatbot-subdomain'
});
}, []);

return (
<div>Your App Content</div>
);

}

Next.js Integration

For Next.js applications, add the SDK to your root layout or a client component.

app/layout.tsx

"use client";

import { init } from 'ragged-chat-sdk';
import { useEffect } from 'react';

export default function RootLayout({ children }) {

useEffect(() => {
init(); // Auto-detects NEXT_PUBLIC_RAGGED_SUBDOMAIN from .env
}, []);

return <html><body>{children}</body></html>;

}

Next.js Test SDK Example

Explore our reference implementation for Next.js applications

View Repo

Vanilla HTML/CSS/JavaScript

For projects not using a framework, you can use the SDK with a simple script tag.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>

<h1>Welcome to My Website</h1>

<script>
window.RAGGED_CONFIG = {
subdomain: "your-chatbot-subdomain",
apiUrl: "/api"
};
</script>


<script src="/sdk/ragged-sdk.js"></script>

</body>
</html>