@rhinon/botsdk
v0.6.5
Published
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.
Downloads
470
Readme
@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:
# using npm
npm install @rhinon/botsdk
# using yarn
yarn add @rhinon/botsdk
# using pnpm
pnpm add @rhinon/botsdkQuick Start
Basic Usage (Vanilla 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
React
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;
}Next.js
For Next.js applications, you need to handle SSR properly:
Step 1: Create a client component wrapper
// components/Chatbot/ChatbotWrapper.tsx
'use client';
import dynamic from 'next/dynamic';
const Chatbot = dynamic(() => import('./Chatbot'), {
ssr: false,
});
export default function ChatbotWrapper() {
return <Chatbot />;
}Step 2: Create the main Chatbot component
// 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
// app/layout.tsx
import ChatbotWrapper from '@/components/Chatbot/ChatbotWrapper';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<ChatbotWrapper />
</body>
</html>
);
}Angular
// 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
}
});
});
}
}
}Vue.js
<template>
<div id="app">
<!-- Your app content -->
</div>
</template>
<script>
import { onMounted } from 'vue';
import Rhinontech from '@rhinon/botsdk';
export default {
name: 'App',
setup() {
onMounted(() => {
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
});
}
}
</script>Configuration Options
The SDK accepts the following configuration options:
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
};
}Basic Configuration
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});Advanced Configuration
Rhinontech({
app_id: 'YOUR_APP_ID',
admin: false,
container: document.getElementById('custom-container'),
chatbot_config: {
isBgFade: true
}
});API Reference
Rhinontech(config: RhinontechConfig): ChatBotElement
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.
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
SSR/Next.js Issues
If you encounter HTMLElement is not defined or similar errors:
- Ensure you're using dynamic imports with
ssr: false - Wrap the initialization in
useEffector equivalent lifecycle method - Use the
'use client'directive for Next.js App Router
Chatbot Not Appearing
- Verify your
app_idis correct - Check browser console for errors
- Ensure the SDK is initialized after DOM is loaded
- 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: [email protected]
- 🐛 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