Tickets Table - Reference

Bundle / Package

The tickets table is available through our CDN as a single JavaScript file or through NPM as a React component package.

HTML

<script async type="text/javascript" src="https://client.aidbase.ai/tickets-table.ab.js"></script>

Attributes / Props

You can include attributes in the <ab-tickets-table> tag to customize the tickets table. Most of these configurations are available from the Aidbase Dashboard, but you can override their values here.

Below is a full example of the <ab-tickets-table> tag with all available attributes.

HTML

<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  theme="dark"
  color="#8B5CF6"
  status="OPEN,ASSIGNED"
  userID="a64427d6"
  username="John Doe"
  email="john@doe.com"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
  referenceID="a738d158892b"
></ab-tickets-table>

Theme

This will render the ticket table in either light or dark mode.
Can be either light or dark.

Attribute	Type	Default value
theme	string	light

Example

HTML

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" theme="dark"></ab-tickets-table>

Color

This will display the ticket table in a specific color.
Colors are included in the button, in focused states, and other places.

Attribute	Type	Default value
color	string	#8B5CF6

Example

HTML

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" color="#8B5CF6"></ab-tickets-table>

Status

This will filter the tickets table to only show tickets with the specified status.

Attribute	Type	Default value
status	string \| string[]	N/A

Status

// Status can be a single string or an array of strings with the following values
'OPEN' | 'ASSIGNED' | 'NEED_MORE_INFO' | 'RESOLVED' | 'CLOSED';

Example

HTML

<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  status="OPEN,ASSIGNED,NEED_MORE_INFO"
></ab-tickets-table>

User ID

Provide the User ID of the user who created the tickets.
If this is not provided, the table will be empty.

Additionally, this User ID will be used when the user comments on a ticket.

Attribute	Type	Default value
userID	string	N/A

Example

HTML

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" userID="a64427d6"></ab-tickets-table>

If you want to identify the user by a username, you can pass it here.
This username will be used when the user comments on a ticket.

Attribute	Type	Default value
username	string	N/A

Example

HTML

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" username="John Doe"></ab-tickets-table>

Email

If you want to identify the user by an email address, you can pass it here.

Attribute	Type	Default value
email	string	N/A

Example

HTML

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" email="john@doe.com"></ab-tickets-table>

Profile Image URL

If you want to include a profile image for the user, you can pass the URL here. This will be used when the user comments on a ticket.

Attribute	Type	Default value
profileImageURL	string	N/A

Example

HTML

<ab-tickets-table
  ticketFormID="YOUR-TICKET-FORM-ID"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
></ab-tickets-table>

Reference ID

If you want to include a reference ID for the user, you can pass it here. This will be used when the user comments on a ticket.

Attribute	Type	Default value
referenceID	string	N/A

Example

HTML

<ab-tickets-table ticketFormID="YOUR-TICKET-FORM-ID" referenceID="a738d158892b"></ab-tickets-table>

Callbacks

You can pass callbacks to the ticket table to listen to certain events.

Example

HTML

<ab-tickets-table
  id='my-ticket-table'
  ticketFormID='YOUR-TICKET-FORM-ID'
  // ...additional attributes
></ab-tickets-table>

JavaScript

// Get the DOM node of the ticket table
const ticketTable = document.getElementById('my-ticket-table');
 
// Assign a callback to the ready event
ticketTable.onReady = () => {
  console.log('Ticket Table is ready!');
};

On Ready

When the DOM element is registered on the page, the ticket table will make an initial request to the Aidbase API to fetch the configuration for the ticket table.

When the configuration is fetched and validated, the ticket table will be ready to use.
The onReady() callback will be called immediately after the ticket table is ready.

Callback	Type	Return value
onReady()	Function	void

Example

ticketTable.onReady = () => {
  console.log('Ticket Table is ready!');
};

On Error

If the ticket table encounters an error during the process described above, the onError() callback will be called.

Callback	Type	Return value
onError(error: Error)	Function	void

Example

ticketTable.onError = (error) => {
  console.error('Something went wrong: ' + error);
};

Create Ticket Ticket