Specifically, we need to add two elements:
- The form to create a ticket
- A table showing the tickets
Create a ticket form
The form to create a ticket is a simple HTML and React form that can be added to your app.
To create a ticket, we need to add the CreateTicket(specify as component) component.
<script async type="text/javascript" src="https://client.lexi.ai/create-ticket.ab.js"></script>
<ab-create-ticket ticketFormID="YOUR-TICKET-FORM-ID" userID="USER-ID">
<button>Create ticket</button>
</ab-create-ticket>
You can find the Ticket Form ID in the Ticket Form settings under the Settings tab.
Display tickets ina table
To display the tickets in a table, we need to add the <ab-tickets-table></ab-tickets-table> element.
<script async type="text/javascript" src="https://client.lexi.ai/tickets-table.ab.js"></script>
<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" userID="USER-ID"></ab-tickets-table>
This will render a table showing the tickets for the user with the ID USER-ID.
If you want to only display tickets with a specific status, you can include these statuses using the status attribute.
import { TicketsTable } from '@aidbase/tickets-table';
<TicketsTable
ticketFormID="YOUR-TICKET-FORM-ID"
userID="USER-ID"
status="OPEN,ASSIGNED,NEED_MORE_INFO"
/>
Display a single ticket
To display a single ticket, we need to add the <ab-ticket></ab-ticket> element.
<script async type="text/javascript" src="https://client.aidbase.ai/ticket.ab.js"></script>
<ab-ticket ticketFormID="YOUR-TICKET-FORM-ID" ticketID="TICKET-ID">
<button>Open ticket</button>
</ab-ticket>
The TICKET-ID should be the ID of the ticket you want to display.
This ID can be found in on the Tickets page in the LEXI Dashboard for a given ticket.
It can also be retrieved through the payload of a webhook.
Additional user information
In addition to the userID, you can also include username, email and profileImageURL.
We recommend including as many of them as you have available.
<ab-tickets-table
ticketFormID="YOUR-TICKET-FORM-ID"
userID="USER-ID"
username="John Doe"
email="[email protected]"
profileImageURL="https://example.com/profile-image.png"
></ab-tickets-table>