@prajun_v/zilai-vc

Universal Web Components for Virtual Card applications.

Installation

npm install @prajun_v/zilai-vc

Usage

React / Angular / Vue / Vanilla JS

Import the package in your main entry file (e.g., main.tsx, app.module.ts, or index.js):

import '@prajun_v/zilai-vc';

Then use the custom tag in your HTML, passing the required attributes:

<zilai-floating-widget
  company-id="your-company-id"
  access-token="your-auth-token"
  api-base="https://your-zilai-api.example.com"
  logo-url="/path/to/logo.png"
></zilai-floating-widget>

Attributes

Required

| Attribute | Description | |---|---| | company-id | The active company identifier sent with chat requests | | access-token | Auth token used to authorize chat requests | | api-base | Base URL of the ZilAI chat backend | | logo-url | URL of the logo shown in the floating button and chat header |

Optional — appearance & placement

| Attribute | Default | Description | |---|---|---| | assistant-name | ZilAI | Display name used in the welcome message, button tooltip, and header fallback text. | | widget-size | 70 | Diameter of the round floating button in px (min 40). The inner ring and logo scale proportionally. | | position | bottom-right | Corner the button and chat window anchor to: bottom-right, bottom-left, top-right, or top-left. | | offset-x | 20 | Distance from the left/right edge in px. | | offset-y | 20 | Distance from the top/bottom edge in px. |

Example giving the host app control over size and starting position:

<zilai-floating-widget
  company-id="your-company-id"
  access-token="your-auth-token"
  api-base="https://your-zilai-api.example.com"
  logo-url="/path/to/logo.png"
  widget-size="100"
  position="bottom-left"
  offset-x="40"
  offset-y="40"
></zilai-floating-widget>

Note: the optional attributes set the initial size and position. The button remains draggable, and these values are read once at mount — changing them later requires remounting the element (e.g. via a changing key in React).

Development

1. Install dependencies:

   npm install

2. Build the package:

   npm run build

3. Run in watch mode:

   npm run dev