tia-chatbot

v1.7.6

Published

16 days ago

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

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

Prerequisites (CDN)

Since the widget is built as a library interacting with React, you must include React and ReactDOM before the widget script.

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

Initialization

Use the mountChainlitWidget function to initialize the widget with your configuration.

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <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>
  <!-- TIA Widget Script -->
  <script src="https://unpkg.com/tia-widget@latest/dist/tia-widget.iife.js"></script>
  
  <script> 
    window.mountChainlitWidget({
      chainlitServer: "https://v2.tia.ascenthr.ai", // Your Chainlit Server URL
      accessToken: "<access-token>",                  // Your Access Token
      theme: "light",                                 // Optional: Theme
      customCssUrl: "https://example.com/style.css",  // Optional: Custom CSS URL
      button: {                                       // Optional: Custom Button Config
        imageUrl: "https://example.com/logo.png",
        className: "p-0"
      }
    });
  </script>
</body>
</html>

Backward Compatibility (Old Method)

The previous initialization methods (window.TIAWidget.init and data attributes) still work.

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | chainlitServer | string | https://v2.tia.ascenthr.ai | The API endpoint URL for the chatbot. | | accessToken | string | undefined | The Bearer token for authentication. | | serverUrl | string | undefined | Alias for chainlitServer. | | token | string | undefined | Alias for accessToken. | | containerId | string | 'tia-widget-root' | The ID of the DOM element where the widget will be mounted. | | onError | function | console.error | Error handler function. |

Publishing to NPM

npm run build
npm publish

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

License

MIT