@abdullohrashidov/widget-ia

v1.0.9

Published

2 months ago

Embeddable React Widget

Downloads

0High
0Medium
0Low

abdullohrashidov

React Chat Widget

AI Chat Widget

Features

Self-contained (React bundled, no dependencies)
Shadow DOM isolation (no CSS conflicts)
TypeScript support
WebSocket ready
Multi-platform support via clientKey
Dual builds: npm package + standalone script
Lightweight (183 KB package, 193 KB standalone)
Production-ready

Bundle Sizes

| File | Size | React | Usage | | ------------------------ | ------ | -------------------------- | ------------------------- | | index.js | 1.4 KB | External (peer dependency) | React/Next.js/Vue | | widget.css | 6.4 KB | - | Styles | | widget.standalone.js | 187 KB | Bundled | WordPress/HTML (optional) |

Installation

Option 1: Via npm (for React/Next.js apps)

npm install @abdullohrashidov/widget-ia

// Import the component
import { WidgetContainer } from "@abdullohrashidov/widget-ia";
// Import the styles
import "@abdullohrashidov/widget-ia/dist/widget.css";

function App() {
  return <WidgetContainer clientKey="your-platform-key" />;
}

For Next.js:

// app/page.tsx
"use client";

import { WidgetContainer } from "@abdullohrashidov/widget-ia";
import "@abdullohrashidov/widget-ia/dist/widget.css";

export default function Home() {
  return <WidgetContainer clientKey="health-dept-portal" />;
}

Option 2: Via CDN (for any website)

For websites without React, use the standalone version (React bundled):

<!DOCTYPE html>
<html>
  <body>
    <!-- Your content -->

    <!-- Add widget (standalone - no React needed) -->
    <script
      src="https://unpkg.com/@abdullohrashidov/widget-ia@latest/dist/widget.standalone.js"
      data-client-key="your-platform-key"
    ></script>
  </body>
</html>

Alternative: If your site already has React loaded globally:

<!-- Load React (if not already) -->
<script
  crossorigin
  src="https://unpkg.com/react@19/umd/react.production.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"
></script>

<!-- Then use smaller package version -->
<script
  src="https://unpkg.com/@abdullohrashidov/widget-ia@latest/dist/widget.js"
  data-client-key="your-platform-key"
></script>

Configuration

clientKey

The clientKey identifies which platform the widget is running on. Each platform should have a unique key.

Example:

<!-- Health Department Portal -->
<script src="..." data-client-key="health-dept-portal"></script>

<!-- Tax Filing System -->
<script src="..." data-client-key="tax-filing-system"></script>

API

React Component Props

interface WidgetContainerProps {
  clientKey: string; // Required: Platform identifier
}

Context Available

import { useContext } from "react";
import { WidgetContext } from "@abdullohrashidov/widget-ia";

function MyComponent() {
  const { clientKey, isOpen, setIsOpen } = useContext(WidgetContext);
  // Use context...
}

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build widget
npm run build:widget

# Build development version (with source maps)
npm run build:widget:dev

Browser Support

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+
All modern browsers with Shadow DOM support

License

MIT

Author

Abdullo Rashidov

Support

For issues and questions, please open an issue on GitHub.