Chat Widget Integration

Add an AI-powered chat widget to your website that provides instant, intelligent responses to customer questions. The chat uses RAG (Retrieval-Augmented Generation) to answer based on your uploaded documentation, with streaming responses for a smooth user experience.

What You Get

🤖

AI-Powered Responses

OpenAI-powered chat with context from your knowledge base

⚡

Streaming Responses

Real-time SSE streaming for instant, word-by-word responses

🔒

Anonymous Sessions

Short-lived tokens (5-min TTL) with auto-renewal, no login required

📝

Markdown Support

Rich text formatting, code blocks with syntax highlighting

1. Installation

The chat widget uses marked to render Markdown content from AI responses. Install it first:

npm install marked

2. Quick Start (Copy-Paste)

Choose your framework and copy the component directly into your project:

Create src/components/SupportChat.tsx in your project:

Loading components from GitHub...

3. Add to Your Page

Import and use the component anywhere in your application:

Then use it in any page:

import SupportChat from './components/SupportChat';

export default function App() {
  return (
    <>
      <SupportChat 
        projectId="your-project-id"
        theme="fleety"
        dockPosition="bottom-right"
      />
    </>
  );
}

⚠️ Important: Replace your-project-id with your actual project ID from the Fleety dashboard.

💡 Log in to see your personalized integration code with your project ID.

3. Configuration Options

Customize the widget's appearance and behavior:

Prop
Type
Default
Description
projectId
string
required
Your Fleety project ID
theme
string
'fleety'
'fleety' | 'material' | 'midnight'
dockPosition
string
'bottom-right'
'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'

Example with custom configuration:

<SupportChat 
  projectId="your-project-id"
  theme="midnight"
  dockPosition="bottom-left"
/>

How It Works

1

Session Initialization

When a user opens the chat, the widget calls https://api.fleety.dev/v1/init-session with your project ID and receives a short-lived anonymous token (5-minute TTL).

2

Auto Token Renewal

The token automatically renews after 4 minutes (before expiration) in the background. Users never notice interruptions.

3

Message Sending

User messages are sent to https://api.fleety.dev/v1/chat with the anonymous token and full conversation history for context.

4

RAG + AI Response

Fleety retrieves relevant chunks from your knowledge base, injects them as context, and streams the OpenAI response back in real-time.

Advanced: Custom Authentication

💡 Project ID Usage

Fleety project IDs are designed for frontend integration. You can safely use them in client-side code for fast, simple implementation. However, be aware:

  • Token usage: Malicious actors could potentially drain your Fleety tokens by using your exposed project ID
  • Risk level: For most small-to-medium apps, this risk is quite low and the convenience outweighs the concern
  • Mitigation: Use the "Allowed Origins" feature to restrict which domains can use your project ID

For high-traffic production apps: Consider calling the Fleety API from your backend server instead. Store your project ID as an environment variable and proxy requests through your server to have full control over usage.

By default, the chat works for anyone (anonymous sessions). If you want to restrict access to logged-in users only:

<script>
  import SupportChat from '$lib/components/SupportChat.svelte';
  import { user } from '$lib/stores/auth'; // Your auth store
</script>

{#if $user}
  <SupportChat projectId="your-project-id" />
{:else}
  <p>Please log in to access support</p>
{/if}

💡 Tip: You can also modify the component to send user context (like email or user ID) to your backend for tracking who uses support.

Advanced: Component Customization

Since you have the full component source, you can customize it however you like:

🎨 Styling

Modify colors, fonts, sizes in the <style> section to match your brand.

💬 Messages

Change welcome messages, placeholder text, error messages to fit your tone.

🔧 Behavior

Add custom analytics, modify token renewal logic, or integrate with your monitoring tools.

📊 Tracking

Add event tracking for user interactions, message sending, or error occurrences.

API Endpoints Used

POST
https://api.fleety.dev/v1/init-session

Initialize anonymous chat session

View Request 
{
  "project_id": "your-project-id"
}
POST
https://api.fleety.dev/v1/chat

Send chat message with conversation history

View Request 
{
  "messages": [
    { "role": "user", "content": "Hello" },
    { "role": "assistant", "content": "Hi! How can I help?" },
    { "role": "user", "content": "What are your prices?" }
  ]
}

Headers:
Authorization: Bearer <anonymous-token>

Next Steps

Upload Knowledge Base → Add documentation for AI-powered responses Add Ticket System → Let users create support tickets API Reference → Build custom integrations