@rhinon/botsdk-vite

@rhinon/botsdk-vite

Modern chatbot widget SDK built with React, TypeScript, Tailwind CSS, and Vite. Features Shadow DOM for complete style isolation.

Installation

npm install @rhinon/botsdk-vite

Usage

ES Modules (Recommended)

import { initRhinontech } from '@rhinon/botsdk-vite'

// Initialize the chatbot
initRhinontech({
  app_id: 'YOUR_APP_ID'
})

UMD (Browser)

<script src="https://unpkg.com/@rhinon/botsdk-vite/dist/rhinonbot.umd.js"></script>
<script>
  RhinonBot({
    app_id: 'YOUR_APP_ID'
  })
</script>

TypeScript

import { initRhinontech, type RhinontechConfig } from '@rhinon/botsdk-vite'

const config: RhinontechConfig = {
  app_id: 'YOUR_APP_ID',
  admin: false,
  container: document.body // optional
}

initRhinontech(config)

API

initRhinontech(config: RhinontechConfig): ChatBotElement

Initializes and returns a chatbot element.

Configuration Options

interface RhinontechConfig {
  app_id?: string      // Your application ID
  admin?: boolean      // Admin mode (optional)
  container?: HTMLElement // Container element (defaults to document.body)
}

ChatBotElement

The custom element class. You can also use it directly:

<chat-bot></chat-bot>
<script>
  const bot = document.querySelector('chat-bot')
  bot.setConfig({ app_id: 'YOUR_APP_ID' })
</script>

Features

• ✅ Shadow DOM - Complete style isolation
• ✅ TypeScript - Full type definitions included
• ✅ React 18 - Built with latest React
• ✅ Tailwind CSS - Modern utility-first styling
• ✅ Vite - Fast build tooling
• ✅ ESM & UMD - Works in any environment

Development

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Publishing to npm

• Update version in package.json
• Build the package: npm run build
• Publish: npm publish --access public

License

MIT