Ticket Form - Embedding in your app

Embedding the ticket system in your app is similar to adding the Chatbot using the low-code solution.
We can embed the ticket elements using either HTML or React.

Specifically, we need to add two elements:

The form to create a ticket
A table showing the tickets

Create a ticket

To create a ticket, we need to add the <ab-create-ticket> element.

HTML

<script async type="text/javascript" src="https://client.aidbase.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.

Here, the USER-ID should be the ID used to identify the user in your app.
This ID will be used to retrieve and display the tickets for this user after it has been created.

This will render a button saying "Create ticket".
When the user clicks on it, the ticket form will open in a modal.

See all the available attributes in the Ticket Form Reference.

Display tickets in a table

To display the tickets in a table, we need to add the <ab-tickets-table> element.

HTML

<script async type="text/javascript" src="https://client.aidbase.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.

HTML

<script async type="text/javascript" src="https://client.aidbase.ai/tickets-table.ab.js"></script>
 
<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  userID="USER-ID"
  status="OPEN,ASSIGNED,NEED_MORE_INFO"
></ab-tickets-table>

See all available options in the Ticket Form Reference.

Display single ticket

To display a single ticket, we need to add the <ab-ticket> element.

HTML

<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 Aidbase 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.

HTML

<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  userID="USER-ID"
  username="John Doe"
  email="john@doe.com"
  profileImageURL="https://example.com/profile-image.png"
></ab-tickets-table>

Hosted ticket form Form fields