support-ticket

Customer Support Ticket Widget

A comprehensive support ticket management widget with agent assignment, message history, and ticket actions.

Features

• Ticket Overview: Status, priority, subject, and creation date
• Agent Assignment: Assigned support agent with contact information
• Message History: Conversation thread with timestamps
• Support Information: Contact details and assistance options
• Status Tracking: Visual status indicators and priority levels

Usage

1. Copy the widget structure from widget-structure.jsx
2. Copy the sample data from data.json
3. Paste into the Widget Builder
4. Customize ticket data and agent information

Data Structure

{
  "ticket": {
    "id": "TKT-2024-001",       // Unique ticket ID
    "subject": "Issue title",   // Ticket subject
    "description": "Details...", // Ticket description
    "status": "Open",           // Ticket status
    "priority": "High",         // Priority level
    "createdAt": "2024-01-15",  // Creation timestamp
    "agent": {
      "id": "agent_123",        // Agent ID
      "name": "Agent Name",     // Agent name
      "email": "agent@...",     // Agent email
      "avatar": "https://..."   // Agent avatar
    },
    "messages": [
      {
        "sender": {
          "name": "Sender Name", // Message sender
          "avatar": "https://..." // Sender avatar
        },
        "content": "Message...", // Message content
        "timestamp": "2h ago"    // Message time
      }
    ]
  }
}

Display Features

• Ticket Status: Visual status indicators (Open, Resolved, Closed)
• Agent Information: Shows assigned agent details and contact info
• Message History: Displays conversation thread
• Priority Levels: Color-coded priority indicators
• Support Contact: Contact information for assistance

Status Types

• Open: Yellow/warning badge
• Resolved: Green/success badge
• Closed: Gray/secondary badge

Priority Levels

• High: Red text color
• Medium: Orange text color
• Low: Gray text color

Customization

• Add ticket categories or tags
• Include SLA tracking and deadlines
• Add internal notes for agents
• Implement ticket assignment workflows
• Add satisfaction surveys
• Include knowledge base suggestions