@rhinon/botsdk-beta
Advanced tools
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.
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.
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/botsdk
import Rhinontech from '@rhinon/botsdk';
// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
});
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;
}
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>
);
}
// 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
}
});
});
}
}
}
<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>
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
};
}
Rhinontech({
app_id: 'YOUR_APP_ID',
chatbot_config: {
isBgFade: true
}
});
Rhinontech({
app_id: 'YOUR_APP_ID',
admin: false,
container: document.getElementById('custom-container'),
chatbot_config: {
isBgFade: true
}
});
Rhinontech(config: RhinontechConfig): ChatBotElementInitializes and returns a chatbot instance.
Parameters:
config (RhinontechConfig): Configuration object for the chatbotReturns:
ChatBotElement: The chatbot custom element instanceThis 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);
If you encounter HTMLElement is not defined or similar errors:
ssr: falseuseEffect or equivalent lifecycle method'use client' directive for Next.js App Routerapp_id is correctCheck out our examples repository for complete implementation examples in various frameworks.
For issues, questions, or contributions:
MIT License - see LICENSE file for details
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
FAQs
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.
We found that @rhinon/botsdk-beta demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Socket was named to the Rising in Cyber 2026 list, recognizing 30 private cybersecurity startups selected by CISOs and security executives.
Research
Socket detected 84 compromised TanStack npm package artifacts modified with suspected CI credential-stealing malware.
Security News
A dispute over fsnotify maintainer access set off supply chain alarms around one of Go’s most widely used filesystem libraries.