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';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
init({
subdomain: 'your-chatbot-subdomain'
});
}, []);
init({
subdomain: 'your-chatbot-subdomain'
});
}, []);
return (
<div>Your App Content</div>
);
<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';
import { useEffect } from 'react';
export default function RootLayout({ children }) {
useEffect(() => {
init({ subdomain: 'your-subdomain' });
}, []);
init({ subdomain: 'your-subdomain' });
}, []);
return <html><body>{children}</body></html>;
}
Next.js Test SDK Example
Explore our reference implementation for Next.js applications
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<!-- Your content here -->
<!-- Your content here -->
<!-- Configure the SDK -->
<script>
window.RAGGED_CONFIG = {
subdomain: "your-chatbot-subdomain",
apiUrl: "https://ragflowdb.onrender.com/api"
};
</script>
<!-- Load the SDK -->
<script src="https://ragflowdb.onrender.com/sdk/ragged-sdk.js"></script>
<script>
window.RAGGED_CONFIG = {
subdomain: "your-chatbot-subdomain",
apiUrl: "https://ragflowdb.onrender.com/api"
};
</script>
<!-- Load the SDK -->
<script src="https://ragflowdb.onrender.com/sdk/ragged-sdk.js"></script>
</body>
</html>
</html>