Creating a New Support Ticket
The structured submission form where administrators create new support tickets on behalf of customers or for internal use. Captures all essential metadata including title, description, priority, category, customer assignment, agent assignment, and tags.
Structured Ticket Creation
When a customer reports an issue via phone, email, or chat and you need to formally log it in the system, the New Ticket form provides a structured, validated workflow. Unlike tickets submitted through the Feedback Widget (which are automatically created), this form gives administrators full control over every metadata field from the moment of creation — ensuring proper categorization, assignment, and priority from the very first second.
Form Layout
The form uses a responsive two-column layout: the left panel (2/3 width) contains the primary content fields, and the right sidebar (1/3 width) contains metadata, assignment, and tagging controls.
Form Fields Reference
| Field | Type | Required | Default | Description |
|---|---|---|---|---|
| Title | Text Input | ✅ Yes | — | A concise summary of the issue (e.g., "Cannot complete checkout on mobile"). Validated via Zod schema. |
| Description | Textarea (10 rows) | ✅ Yes | — | Detailed explanation of the problem, reproduction steps, or customer context. Non-resizable. |
| Priority | Select Dropdown | ✅ Yes | Medium | Options: Low, Medium, High, Urgent, Critical. Determines SLA timelines and visual urgency. |
| Category | Select Dropdown | ✅ Yes | General | Options: General, Technical, Billing, Account, Feature Request, Bug Report, Integration, Security. |
| Customer | User Select | ❌ No | — | Searchable dropdown to link the ticket to a registered customer. Uses the UserSelect component with real-time search. |
| Assigned To | User Select | ❌ No | — | Searchable dropdown to assign a support agent. Can be left empty for later assignment during triage. |
| Tags | Multi-Select | ❌ No | [] | Color-coded labels from the TicketTag registry. Select multiple tags for custom classification. |
📝 Content Section (Left Panel)
The main content area is wrapped in a bordered card with a "Ticket Details" header accompanied by a ticket icon. Here you enter the Title — a clear, searchable summary — and the Description — the full context of the issue. Both fields are validated client-side using Zod schema and display inline error messages if validation fails.
⚡ Metadata Section (Right Sidebar)
The sidebar is divided into three stacked cards: Priority & Category in the first card, People (Customer & Assigned Agent) in the second card, and Tags in the third card. Each card is clearly labeled with an icon header for visual separation.
✅ Form Validation & Submission
The form uses react-hook-form with Zod resolver for client-side validation. All required fields must be filled before submission. Upon successful creation, a success toast notification appears and you are automatically redirected to the new ticket's detail page (/admin/tickets/{id}). If creation fails, an error toast is displayed with the specific error message.
🔙 Navigation Controls
A Back arrow button in the top-left returns you to the main tickets list. A Cancel button at the bottom-right of the sidebar also navigates back. The Submit button in the header shows a loading spinner with "Saving..." text during submission and is disabled to prevent duplicate submissions.
Step-by-Step: Creating a Ticket from a Phone Call
- Navigate to
/admin/tickets/newor click the "New Ticket" button on the tickets list page. - Enter Title: Type a clear summary, e.g., "Payment failed during checkout — Error 500".
- Enter Description: Write the full context: what the customer reported, steps to reproduce, any error codes mentioned.
- Set Priority: Select "High" if the customer is losing revenue, or "Critical" if it affects multiple customers.
- Set Category: Choose "Billing" for payment issues or "Technical" for application errors.
- Assign Customer: Search for the reporting customer by name or email in the Customer field.
- Assign Agent: Pick the most appropriate support agent from the team, or leave empty for triage later.
- Add Tags: Optionally add tags like "VIP" or "Regression" for enhanced filtering.
- Click Submit: The system validates all fields, creates the ticket with a unique tracking number, and redirects you to the detail page.
Enterprise Use Case: Escalated Phone Complaint
A VIP enterprise customer calls your support hotline furious that their API integration has been silently failing for the past 3 hours, causing missed orders worth $50,000. The support agent on the phone immediately opens /admin/tickets/new. They set the Title to "API Integration Failure — Silent Errors for 3 Hours", write a comprehensive Description including the exact API endpoint, error responses, and business impact. They set Priority to "Critical", Category to "Integration", search and assign the Customer to the enterprise's main account, and Assign the ticket directly to the senior API engineer. They also add the "VIP" and "Revenue-Impact" tags. The ticket is created in under 90 seconds, the SLA clock starts immediately, and the engineer receives an instant notification — all while the customer is still on the phone.
Comments
Leave a comment