@rhinon/botsdk-beta

v0.0.8

Published

16 days ago

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.

0High
0Medium
0Low

rhinon

@rhinon/botsdk

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/botsdk

Quick 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 useEffect or equivalent lifecycle method
Use the 'use client' directive for Next.js App Router

Chatbot Not Appearing

Verify your app_id is 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