@projintel-ai/chat-widget

v1.1.7

Published

7 months ago

Standalone chat widget script for ProjIntel AI SDK (API: https://api.projintel.ai)

0High
0Medium
0Low

sujit_kumar_bindhani

ai chat widget project-ai

🚀 Why ProjIntel AI?

Securely access your project knowledge instantly. ProjIntel AI connects to your Jira, Trello, GitLab, Bitbucket , GitHub, Notion, and Asana to answer questions instantly.

🔍 Unified Knowledge: precise answers citing sources from all your tools.
⚡ Instant Integration: Add a powerful AI assistant to your site in under 2 minutes.
🎨 Fully Customizable: Matches your brand's look and feel perfectly.
🔒 Enterprise Secure: Role-based access and secure data handling.

Ready to get started?
Sign up at panel.projintel.ai to create your project and get your API Key today!

A standalone, embeddable chat widget that can be added to any website with a single script tag or React component.

Quick Start

Method 1: React (Recommended)

Install the package:

npm install @projintel-ai/chat-widget

Import and use the Widget component:

import { Widget } from '@projintel-ai/chat-widget';

function App() {
  return (
    <Widget 
      projectId="YOUR_PROJECT_ID"
      apiKey="YOUR_API_KEY"
      // Optional: Pass user identity for secure mode
      user={{
        id: "user_123",
        email: "[email protected]"
      }}
    />
  );
}

This component manages its own lifecycle, automatically destroying the widget when unmounted (e.g., on logout).

Method 2: Data Attributes (Simplest for HTML)

Add this single script tag to your HTML <head> or before </body>:

<script 
  src="https://widget.projintel.ai/widget.js"
  data-project-id="your-project-id"
  data-api-key="your-api-key"
  data-position="bottom-right"
></script>

That's it! The widget will automatically:

Validate your API key and project ID
Fetch organization details from the backend
Show a floating chat button

Note: Base URL defaults to https://api.projintel.ai (backend API). You can override it with data-base-url if you are using an on-premise instance. Organization ID is fetched automatically.

Method 3: Global Config Object

<script>
  window.ProjIntelAIChatConfig = {
    projectId: 'your-project-id',
    apiKey: 'your-api-key',
    baseUrl: 'https://api.projintel.ai', // Optional - Defaults to production API
    position: 'bottom-right',
    buttonColor: '#4f46e5'
  };
</script>
<script src="https://widget.projintel.ai/widget.js"></script>

Method 4: Manual Initialization

<script src="https://widget.projintel.ai/widget.js"></script>
<script>
  window.ProjIntelAIChatInstance = new window.ProjIntelAIChatWidget({
    projectId: 'your-project-id',
    apiKey: 'your-api-key'
    // baseUrl defaults to https://api.projintel.ai
  });
</script>

Configuration Options

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | projectId | string | Yes | - | Your project ID | | apiKey | string | Yes | - | Your API key | | baseUrl | string | No | https://api.projintel.ai | Backend API base URL | | position | string | No | bottom-right | Button position: bottom-right, bottom-left, top-right, top-left | | buttonColor | string | No | #4f46e5 | Button background color (hex) |

Note: organizationId is automatically fetched from the backend using your project ID and API key.

Data Attributes

When using Method 1, you can configure via data attributes:

data-project-id → projectId (required)
data-api-key → apiKey (required)
data-base-url → baseUrl (optional - defaults to https://api.projintel.ai)
data-position → position (optional)
data-button-color → buttonColor (optional)

API

Destroy Widget

window.ProjIntelAIChatInstance.destroy()

Removes the widget from the page.

Features

✅ Zero Dependencies - Works on any website
✅ Auto-initialization - Just add the script tag
✅ Customizable - Position, colors, and more
✅ Responsive - Works on mobile and desktop
✅ Source Citations - Shows sources for AI responses
✅ Modern UI - Beautiful, clean interface

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

TypeScript Support

If you are using TypeScript, you can add these type definitions to your src/vite-env.d.ts or src/types/global.d.ts file to get full type safety:

export {};

declare global {
  interface ProjIntelAIConfig {
    projectId: string;
    apiKey: string;
    baseUrl?: string;
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
    user?: {
      id: string;
      email?: string;
      name?: string;
    };
  }

  interface ProjIntelAI {
    init: (config: ProjIntelAIConfig) => void;
    identify: (user: { id: string; email?: string; name?: string }) => void;
  }

  interface Window {
    ProjIntelAI?: ProjIntelAI;
  }
}

Contact & Support

For help, feedback, or feature requests, please reach out to us:

Email: [email protected]
Website: projintel.ai

License

MIT