@deepfrog/pangents-widget

Pangents AI Chat Widget - An embeddable chatbot widget for web applications.

Installation

npm install @deepfrog/pangents-widget
# or
yarn add @deepfrog/pangents-widget
# or
pnpm add @deepfrog/pangents-widget

Usage

React Component

import { Widget } from '@deepfrog/pangents-widget';

function App() {
  return (
    <Widget
      pangentsApiKey="Ph75vjKOsJbDuPyxR8-wW0_GYYm7ytVF0XQid2GXEZQ"
      tenantId="69386fa4a5248bcd50a4fdd2"
      email="[email protected]"    // Optional: pre-fill login email
      environment="production"    // Optional: 'development' | 'staging' | 'production'
      zIndex={9999}               // Optional: control overlay stacking order
      theme={{
        primaryColor: '#1e40af',
        headerBg: '#1e40af',
        headerText: '#ffffff',
        bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
      }}
      position="bottom-right"
      margin="20px"               // Optional: adjust bubble margin
      paddingWidgetContainer="10px 20px" // Optional: adjust popup container margin
    />
  );
}

Vanilla JavaScript (Script Tag)

<script type="module">
  import Chatbot from 'https://chat-widget-gamma-azure.vercel.app/widget.js';

  Chatbot.init({
    pangentsApiKey: '<api_key>',
    tenantId: '<tenant_id>',
    email: '[email protected]',   // Optional: pre-fill login email
    environment: 'production',   // Optional: 'development' | 'staging' | 'production'
    zIndex: 9999,                // Optional: control overlay stacking order
    theme: {
      primaryColor: '#1e40af',
      headerBg: '#1e40af',
      headerText: '#ffffff',
      bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
    },
    position: 'bottom-right',
    margin: '10px 20px',           // Optional: adjust bubble margin
    paddingWidgetContainer: '10px 20px',  // Optional: adjust popup container margin
  });
</script>

CDN Usage

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/@deepfrog/pangents-widget/dist/widget.min.js';

  Chatbot.init({
    pangentsApiKey: '<api_key>',
    tenantId: '<tenant_id>',
    email: '[email protected]',      // Optional: pre-fill login email
    environment: 'production',      // Optional: 'development' | 'staging' | 'production'
    zIndex: 9999,                   // Optional: control overlay stacking order
    theme: {
      primaryColor: '#1e40af',
      headerBg: '#1e40af',
      headerText: '#ffffff',
      bubbleIcon: 'https://app.ultrashiptms.ai/icon.ico?25f91bedca5c761d',
    },
    position: 'bottom-right',
    margin: '10px 20px 30px 40px',    // Optional: adjust bubble margin
    paddingWidgetContainer: '10px 20px',     // Optional: adjust popup container margin
  });
</script>

Configuration Options

| Option | Type | Required | Description | |--------|------|----------|-------------| | pangentsApiKey | string | Yes | Your Pangents API key | | tenantId | string | Yes | Your tenant ID | | email | string | No | Optional email to pre-fill the login form | | environment | string | No | API environment: 'development', 'staging', or 'production'. Defaults to 'development' (or VITE_API_BASE_URL env var if set). | | theme | object | No | Theme customization options | | position | string | No | Widget position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'. The popup will slide in from the corresponding side. | | margin | string | No | CSS margin for the bubble button. Supports all CSS margin formats: '10px', '10px 20px', '10px 20px 30px', '10px 20px 30px 40px' | | paddingWidgetContainer | string | No | CSS margin for the popup container. Supports all CSS margin formats. | | zIndex | number | No | CSS z-index for the widget (default: 9999) |

Environment → API Endpoint Mapping

| environment | API Base URL | |---------------|--------------| | development | https://dev.backend.pangents.ai | | staging | https://stage.backend.pangents.ai | | production | https://app.backend.pangents.ai |

If environment is not provided, the widget falls back to the VITE_API_BASE_URL environment variable, then defaults to the development endpoint.

Theme Options

interface Theme {
  primaryColor?: string;    // Primary accent color
  headerBg?: string;        // Header background color
  headerText?: string;      // Header text color
  bubbleIcon?: string;      // Bubble icon
  userBubble?: string;      // User message bubble color
  botBubble?: string;       // Bot message bubble color
  fontFamily?: string;      // Font family
}

API Methods

Chatbot.init(config)

Initialize the widget with configuration.

Chatbot.updateConfig(config)

Update widget configuration dynamically.

Example: Fetch config from an API and update at runtime

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/npm/@deepfrog/pangents-widget/dist/widget.min.js';

  Chatbot.init({
    pangentsApiKey: '<api_key>',
    tenantId: '<tenant_id>'
  });

  async function loadWidgetConfig() {
    const res = await fetch('https://api.example.com/widget-config?tenant=<tenant_id>');
    if (!res.ok) throw new Error('Failed to load widget config');
    const remote = await res.json();

    Chatbot.updateConfig({
      pangentsApiKey: remote.pangentsApiKey ?? '<api_key>',
      tenantId: remote.tenantId ?? '<tenant_id>',
      email: remote.email,
      theme: remote.theme,
      position: remote.position,
      margin: remote.margin,
      paddingWidgetContainer: remote.paddingWidgetContainer,
      zIndex: remote.zIndex
    });
  }

  loadWidgetConfig();
</script>

// ESM/bundlers
import Chatbot from '@deepfrog/pangents-widget/widget';

Chatbot.init({
  pangentsApiKey: '<api_key>',
  tenantId: '<tenant_id>'
});

const res = await fetch('/api/widget-config');
if (!res.ok) throw new Error('Failed to load widget config');
const cfg = await res.json();

Chatbot.updateConfig({
  pangentsApiKey: cfg.pangentsApiKey,
  tenantId: cfg.tenantId,
  email: cfg.email,
  theme: cfg.theme,
  position: cfg.position,
  margin: cfg.margin,
  paddingWidgetContainer: cfg.paddingWidgetContainer,
  zIndex: cfg.zIndex
});

Chatbot.updateTheme(theme)

Update only the theme configuration.

Chatbot.destroy()

Remove the widget from the page.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build standalone widget
npm run build:widget

# Build both
npm run build

# Run tests
npm run test

# Run linting
npm run lint

Publishing

The package is automatically published to npm when a new version tag is pushed:

# Patch release (1.0.0 -> 1.0.1)
npm run release:patch

# Minor release (1.0.0 -> 1.1.0)
npm run release:minor

# Major release (1.0.0 -> 2.0.0)
npm run release:major

Or manually trigger a release via GitHub Actions.

License

MIT