API
Setting Up In Page Chat

Entelligence Chat Widget Documentation

Table of Contents

Overview

Entelligence Chat Widget is a customizable chat interface that can be integrated into any web application. It provides an AI-powered chat functionality that can be used with both React and vanilla JavaScript applications.

Key Features

  • 🔄 Universal compatibility (React & Vanilla JS)
  • 🎨 Light/Dark theme support
  • 📱 Responsive design
  • ⚡ Lightweight bundle
  • 🛠️ Easy configuration
  • 🔒 TypeScript support

API Key Generation

Before integrating the chat widget, you'll need to generate an API key:

  1. Visit the API Management Portal (opens in a new tab)
  2. Log in with your Entelligence account
  3. In the "API Keys" section, you'll see two options:
    • Click "Generate Secret" if you don't have a key
    • Copy your existing key if one is already generated

API Key Generation

Important:

  • Keep your API key secure and never expose it in client-side code
  • Use environment variables to store your API key
  • Each key is unique to your organization
  • You can regenerate your key at any time, but this will invalidate the old one

Using Your API Key

Once you have your API key, add it to your environment variables:

NEXT_PUBLIC_ENTELLIGENCE_API_KEY=your_generated_key_here

Installation

Quick Start with CDN

Choose your preferred integration method:

Direct Script Tags

<script src="https://d345f39z3arwqc.cloudfront.net/vanilla/entelligence-chat.js"></script>

Framework CDN Integration

React
<script src="https://d345f39z3arwqc.cloudfront.net/react/entelligence-chat-react.js"></script>
<script>
  const { EntelligenceChat } = window.EntelligenceReact;
  
  // Use in your React app
  function App() {
    return (
      <EntelligenceChat 
        analyticsData={{
          apiKey: 'your-api-key',
          repoName: 'your-repo',
          organization: 'your-org'
        }}
      />
    );
  }
</script>
Vue
<!-- In your Vue component template -->
<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>
 
<script>
import 'https://d345f39z3arwqc.cloudfront.net/vanilla/entelligence-chat.js'
 
export default {
  mounted() {
    EntelligenceChat.init({
      apiKey: 'your-api-key',
      repoName: 'your-repo',
      organization: 'your-org'
    });
  }
}
</script>
Angular
<!-- In your Angular component -->
<script>
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: '<div></div>'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const script = document.createElement('script');
    script.src = 'https://d345f39z3arwqc.cloudfront.net/vanilla/entelligence-chat.js';
    script.onload = () => {
      (window as any).EntelligenceChat.init({
        apiKey: 'your-api-key',
        repoName: 'your-repo',
        organization: 'your-org'
      });
    };
    document.body.appendChild(script);
  }
}
</script>

NPM Package

Install the package using npm:

npm install @entelligence-ai/chat-widget

Using yarn

yarn add @entelligence-ai/chat-widget

Using pnpm

pnpm add @entelligence-ai/chat-widget

Framework Integration

React

React applications can use the dedicated React component with full TypeScript support.

Installation

npm install @entelligence-ai/chat-widget

Basic Usage

import { EntelligenceChat } from '@entelligence-ai/chat-widget/react';
import '@entelligence-ai/chat-widget/style.css';
 
function App() {
  return (
    <EntelligenceChat 
      analyticsData={{
        repoName: "your-repo",
        organization: "your-org",
        apiKey: "your-api-key",
        theme: "light" // or "dark"
      }} 
    />
  );
}

With Custom Configuration

import { EntelligenceChat } from '@entelligence-ai/chat-widget/react';
import '@entelligence-ai/chat-widget/style.css';
import type { InitType } from '@entelligence-ai/chat-widget/react';
 
const config: InitType = {
  analyticsData: {
    repoName: "your-repo",
    organization: "your-org",
    apiKey: process.env.NEXT_PUBLIC_ENTELLIGENCE_API_KEY!,
    theme: "dark",
    disableArtifacts: true,
    limitSources: 3
  }
};
 
function App() {
  return <EntelligenceChat {...config} />;
}

Next.js

Next.js requires special handling for SSR compatibility. Here's the recommended approach:

Component Setup

// components/chat-popup.tsx
"use client";
 
import { EntelligenceChat } from '@entelligence-ai/chat-widget/react';
import '@entelligence-ai/chat-widget/style.css';
 
interface ChatPopupProps {
  apiKey?: string;
  repoName?: string;
  organization?: string;
}
 
export const ChatPopup = ({ apiKey, repoName, organization }: ChatPopupProps) => {
  return <EntelligenceChat analyticsData={{ apiKey, repoName, organization }} />;
};

Dynamic Import Setup

// app/layout.tsx
import dynamic from 'next/dynamic';
 
const DynamicChatPopup = dynamic(
  () => import('../components/chat-popup').then(mod => mod.ChatPopup),
  { ssr: false }
);
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <DynamicChatPopup 
          apiKey={process.env.NEXT_PUBLIC_ENTELLIGENCE_API_KEY}
          repoName="your-repo"
          organization="your-org"
        />
      </body>
    </html>
  );
}

Note: This approach:

  • Separates component logic from dynamic import
  • Prevents hydration errors
  • Better code organization
  • Easier to maintain and test

Vanilla JavaScript Integration

The library can be used directly in vanilla JavaScript projects without any framework.

Using CDN

<!DOCTYPE html>
<html>
<head>
  <title>Entelligence Chat</title>
</head>
<body>
  <!-- Add the script at the end of body -->
  <script src="https://d345f39z3arwqc.cloudfront.net/vanilla/entelligence-chat.js"></script>
  <script>
    // Initialize the chat
    EntelligenceChat.init({
      apiKey: 'your-api-key',
      repoName: 'your-repo',
      organization: 'your-org'
    });
  </script>
</body>
</html>

Using NPM

import { EntelligenceChat } from '@entelligence-ai/chat-widget';
 
// Initialize the chat
EntelligenceChat.init({
  apiKey: 'your-api-key',
  repoName: 'your-repo',
  organization: 'your-org'
});

Configuration Options

OptionTypeRequiredDefaultDescription
repoNamestringYes-Your repository name
organizationstringYes-Your organization name
apiKeystringYes-Your API key
theme'light' | 'dark'No'light'UI theme

TypeScript Support

The library includes full TypeScript definitions. Here are the main types you'll work with:

interface InitType {
  analyticsData: {
    repoName: string;
    organization: string;
    apiKey: string;
    theme?: 'light' | 'dark';
  };
}
 
// For React component
interface EntelligenceChatProps extends InitType {}
 
// For vanilla JS
interface EntelligenceChat {
  init: (config: InitType) => void;
}

Styling

The library includes built-in styles that can be imported:

// In React/Next.js
import '@entelligence-ai/chat-widget/style.css';

Theme Customization

The widget supports both light and dark themes out of the box:

// Light theme
<EntelligenceChat 
  analyticsData={{
    theme: "light",
    // ... other config
  }} 
/>
 
// Dark theme
<EntelligenceChat 
  analyticsData={{
    theme: "dark",
    // ... other config
  }} 
/>

Environment Variables

For secure usage, it's recommended to use environment variables for sensitive data:

Next.js (.env.local)

NEXT_PUBLIC_ENTELLIGENCE_API_KEY=your_api_key_here

React (.env)

REACT_APP_ENTELLIGENCE_API_KEY=your_api_key_here

Usage with Environment Variables

<EntelligenceChat 
  analyticsData={{
    repoName: "your-repo",
    organization: "your-org",
    apiKey: process.env.NEXT_PUBLIC_ENTELLIGENCE_API_KEY!,
    theme: "light"
  }} 
/>

Build Configuration

If you're using build tools, ensure they're configured to handle the package correctly:

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  optimizeDeps: {
    include: ['@entelligence-ai/chat-widget']
  },
  build: {
    commonjsOptions: {
      include: [/@entelligence-ai\/chat-widget/]
    }
  }
});

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: /@entelligence-ai\/chat-widget/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Advanced Usage

Custom Component Implementation

The library supports both React components and vanilla JavaScript implementations. Here's how the internals work:

React Component Structure

// src/react.tsx
import { InitType } from "./types";
 
export const EntelligenceChat = ({ analyticsData }: InitType) => {
  return (
    <div className="entelligence-chat-container">
      {/* Chat implementation */}
    </div>
  );
};

Type Definitions

// src/types/index.ts
export interface InitType {
  analyticsData: {
    repoName: string;
    organization: string;
    apiKey: string;
    theme?: 'light' | 'dark';
  };
}

Environment Configuration

Create an .env file in your project root:

# .env
ENTELLIGENCE_API_KEY=your_api_key_here
ORGANIZATION=your_organization
REPO_NAME=your_repo_name

Build Configuration

The library uses a dual-build system for React and Vanilla JS:

// vite.config.ts
export default defineConfig(({ mode }) => {
  const isReactBuild = mode === 'react'
  
  return {
    build: {
      lib: {
        entry: isReactBuild ? 
          resolve(__dirname, 'src/react/index.ts') : 
          resolve(__dirname, 'src/main-vanilla.tsx'),
        formats: ['es', 'umd'],
        fileName: (format) => `entelligence-chat${isReactBuild ? '-react' : ''}.${format}.js`
      },
      rollupOptions: {
        external: ['react', 'react-dom', 'react/jsx-runtime'],
        output: {
          globals: {
            'react': 'React',
            'react-dom': 'ReactDOM',
            'react/jsx-runtime': 'ReactJSXRuntime'
          }
        }
      }
    }
  }
});

Troubleshooting

Common Issues and Solutions

1. Styles Not Loading

If styles aren't appearing, ensure you've imported the CSS file:

import '@entelligence-ai/chat-widget/style.css';

If using Next.js, make sure the component is client-side:

'use client';
import { EntelligenceChat } from '@entelligence-ai/chat-widget/react';

2. SSR Issues

For Next.js SSR issues, use the following pattern:

import dynamic from 'next/dynamic';
 
const EntelligenceChat = dynamic(
  () => import('@entelligence-ai/chat-widget/react').then(mod => mod.EntelligenceChat),
  { ssr: false }
);
Entelligence PR ReviewsInsights