Ticket System Integration
Add a powerful support ticket widget to your website, allowing customers to submit and track tickets. The system includes real-time updates, status tracking, and persistent local storage.
What You Get
Ticket Creation
Users create tickets with titles and descriptions, tracked via unique slugs
Live Updates
Auto-polling for new messages every 5 seconds
Persistent Storage
Tickets saved in localStorage for easy access across sessions
Custom Themes
Three built-in themes (fleety, light, dark) to match your brand
AI-Assisted Creation
The AI chat can automatically create tickets when it can't solve an issue
Visual badges show unread admin messages
Badge indicators for unread messages keep users informed
1. Get the Component
Choose your framework and copy the component:
Create src/components/SupportTicketWidget.tsx in your project:
Loading components from GitHub...
2. Add to Your Page
Import and use the component anywhere in your application:
import SupportTicketWidget from './components/SupportTicketWidget';
export default function App() {
return (
<>
<SupportTicketWidget
projectId="YOUR_PROJECT_ID"
dockPosition="bottom-left"
theme="fleety"
/>
</>
);
}💡 Log in to see your personalized integration code with your project ID.
3. Configuration Options
Customize the widget's position and theme:
| Prop | Type | Default | Description |
|---|---|---|---|
projectId | string | Required | Your Fleety project ID |
dockPosition | string | bottom-left | Position: bottom-left, bottom-right, top-left, top-right |
theme | string | fleety | Theme options: fleety (yellow), light, dark |
How It Works
Ticket Creation
Users create tickets with a title and description. A unique slug is generated for tracking.
Local Storage
Created tickets are saved to browser localStorage, allowing users to track their tickets across sessions.
Message Threading
Users and admins exchange messages within a ticket. Messages are timestamped and attributed.
WebSocket Updates
When viewing a ticket, the widget uses WebSocket connections for instant message delivery. Admin responses appear immediately without any delay.
Read Receipts
Messages track who has read them, showing users when admins have seen their messages.
Status Tracking
Tickets show their current status (open, in progress, resolved, closed) with color-coded badges.
Managing Tickets (Admin)
As an admin, you can manage all tickets from the Fleety dashboard:
💡 Tip: Use ticket statuses to organize your workflow: open (new), in_progress (working on it), resolved (fixed, awaiting confirmation), closed (complete).
🔄 AI Learning from Tickets
One of Fleety's most powerful features is the automatic feedback loop between your ticketing system and AI chat. When users encounter issues that the AI can't solve, the AI can automatically create tickets for them. Once you resolve these tickets, the solutions automatically improve your AI's knowledge base.
User Asks AI
A user asks the chat AI a question, but the AI doesn't have the answer in its current knowledge base or is uncertain about the solution.
AI Creates Ticket
The AI recognizes its limitations and automatically offers to create a support ticket for the user, or the user can manually create one. The ticket includes all context from the conversation.
Admin Resolves
You provide the solution in the ticket conversation and mark it as resolved.
AI Learns
Resolved tickets are automatically fed back into the RAG system, updating the AI's knowledge base with the new information.
Future Prevention
The next time a user asks the same or similar question, the AI can answer it directly using the knowledge from the resolved ticket. You never have to solve the same issue twice.
💡 Best Practices for Knowledge Base Updates
- • Be thorough: When resolving tickets, provide complete explanations that the AI can learn from
- • Use clear language: Write your responses as if documenting the solution for future reference
- • Include context: Add relevant details about when and why certain solutions apply
- • Review your knowledge base: Periodically check what's been added and refine unclear entries
💬 The result? Your AI support becomes smarter over time, handling more queries automatically while your team focuses on genuinely novel issues. It's continuous improvement built into your support workflow.
Production Considerations
- • Ensure your production domain is in the project's allowed origins