@rhinon/botsdk

A lightweight, framework-agnostic JavaScript SDK for integrating Rhinon chatbot into your web applications. Built with TypeScript and React, this SDK provides seamless chatbot integration across various platforms and frameworks.

Features

- 🚀 Easy Integration - Quick setup with just a few lines of code
- ⚛️ Framework Support - Works with React, Next.js, Angular, Vue, and vanilla JavaScript
- 🎨 Customizable - Configure appearance and behavior to match your brand
- 📱 Responsive - Mobile-friendly design that works on all devices
- 🔒 Secure - Built with security best practices
- 🌐 SSR Compatible - Full support for server-side rendering frameworks
- 💡 TypeScript - Full TypeScript support with type definitions
- ⚡ Lightweight - Minimal bundle size for optimal performance

Installation

Install the package using your preferred package manager:

``bash


using npm

npm install @rhinon/botsdk

using yarn

yarn add @rhinon/botsdk

using pnpm

pnpm add @rhinon/botsdk
`

Quick Start

$3

`javascript
import Rhinontech from '@rhinon/botsdk';

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
});
`




Framework Integration

$3

`jsx
import { useEffect } from 'react';
import Rhinontech from '@rhinon/botsdk';

export default function Chatbot() {
useEffect(() => {
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
}, []);

return null;
}
`




$3

For Next.js applications, you need to handle SSR properly:

Step 1: Create a client component wrapper

`tsx
// components/Chatbot/ChatbotWrapper.tsx
'use client';

import dynamic from 'next/dynamic';

const Chatbot = dynamic(() => import('./Chatbot'), {
ssr: false,
});

export default function ChatbotWrapper() {
return ;
}
`

Step 2: Create the main Chatbot component

`tsx
// components/Chatbot/Chatbot.tsx
import { useEffect } from 'react';
import Rhinontech from '@rhinon/botsdk';

export default function Chatbot() {
useEffect(() => {
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
}, []);

return null;
}
`

Step 3: Add to your layout

`tsx
// app/layout.tsx
import ChatbotWrapper from '@/components/Chatbot/ChatbotWrapper';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (


{children}



);
}
`




$3

`typescript
// app.component.ts
import { Component, AfterViewInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
selector: 'app-root',
standalone: true,
template: '',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
constructor(@Inject(PLATFORM_ID) private platformId: object) {}

ngAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
import('@rhinon/botsdk').then((RhinontechModule) => {
const Rhinontech = RhinontechModule.default;
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
});
}
}
}
`




$3

`vue



`




Configuration Options

The SDK accepts the following configuration options:

`typescript
interface RhinontechConfig {
app_id: string; // Required: Your unique chatbot app ID
admin?: boolean; // Optional: Enable admin mode
container?: HTMLElement; // Optional: Custom container element
chatbot_config?: {
isBgFade?: boolean; // Optional: Enable background fade effect
// Add more config options as needed
};
}
`

$3

`javascript
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
`

$3

`javascript
Rhinontech({
app_id: 'YOUR_APP_ID',
admin: false,
container: document.getElementById('custom-container'),
chatbot_config: {
isBgFade: true
}
});
`




API Reference

$3

Initializes and returns a chatbot instance.

Parameters:
- config (RhinontechConfig): Configuration object for the chatbot

Returns:
- ChatBotElement: The chatbot custom element instance




Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)




TypeScript Support

This package includes TypeScript type definitions. No additional @types package is required.

`typescript
import Rhinontech, { RhinontechConfig, ChatBotElement } from '@rhinon/botsdk';

const config: RhinontechConfig = {
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
};

const chatbot: ChatBotElement = Rhinontech(config);
`




Troubleshooting

$3

If you encounter HTMLElement is not defined or similar errors:

1. Ensure you're using dynamic imports with ssr: false
2. Wrap the initialization in useEffect or equivalent lifecycle method
3. Use the 'use client' directive for Next.js App Router

$3

1. Verify your app_id` is correct
2. Check browser console for errors
3. Ensure the SDK is initialized after DOM is loaded
4. Check if there are any CSP (Content Security Policy) restrictions

Examples

Check out our examples repository for complete implementation examples in various frameworks.

Support

For issues, questions, or contributions:

- 📧 Email: support@rhinontech.com
- 🐛 Issues: GitHub Issues
- 📚 Documentation: docs.rhinontech.com

License

MIT License - see LICENSE file for details

Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

---

Made with ❤️ by Rhinon Tech