tia-chatbot

v1.1.3

Published

12 days ago

TIA Chatbot Widget - A reusable CDN widget for integrating TIA chatbot into any website

Downloads

1,205

0High
0Medium
0Low

asctechapps

chatbot widget cdn react typescript ai

TIA Widget

A reusable CDN widget for integrating the TIA chatbot into any website.

Installation

Via NPM

npm install tia-widget

Via CDN

<script src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"></script>

Usage

Automatic Initialization (CDN)

Add the script tag with data attributes for auto-initialization:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <!-- Include React and ReactDOM for the widget -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
  <!-- Your website content -->

  <!-- TIA Widget Script -->
  <script
    src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"
    data-auto-init
    data-api-url="https://your-api-endpoint.com"
    data-container-id="custom-widget-container">
  </script>
</body>
</html>

Manual Initialization

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <!-- Include React and ReactDOM -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
  <!-- Your website content -->
  <div id="my-widget"></div>

  <!-- TIA Widget Script -->
  <script src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"></script>
  <script>
    // Initialize the widget manually
    const widget = window.TIAWidget.init({
      apiUrl: 'https://your-api-endpoint.com',
      containerId: 'my-widget',
      onError: (error) => {
        console.error('TIA Widget Error:', error);
      }
    });

    // Optional: Unmount the widget later
    // widget.unmount();
  </script>
</body>
</html>

Programmatic Usage (NPM)

import { initTIAWidget } from 'tia-widget';

// Initialize the widget
const widget = initTIAWidget({
  apiUrl: 'https://your-api-endpoint.com',
  containerId: 'my-widget',
  onError: (error) => {
    console.error('Widget error:', error);
  }
});

// Later, unmount if needed
widget.unmount();

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiUrl | string | window.origin + routerBasename | The API endpoint URL for the TIA chatbot | | containerId | string | 'tia-widget-root' | The ID of the DOM element where the widget will be mounted | | onError | function | console.error | Error handler function |

Data Attributes (for CDN auto-init)

data-auto-init: Enables automatic initialization
data-api-url: Sets the API URL
data-container-id: Sets the container element ID

Publishing to NPM

npm run build:cdn
npm publish

Development

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Build for production
pnpm run build

# Build for CDN
pnpm run build:cdn

Requirements

React 18+
React DOM 18+

The widget bundles React and other dependencies, but for CDN usage, you need to include React and ReactDOM scripts separately.

License

MIT