Ticket - Reference

Bundle / Package

The ticket element 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/ticket.ab.js"></script>

Attributes / Props

You can include attributes in the <ab-ticket> tag to customize the ticket. 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-ticket> tag with all available attributes.

HTML

<ab-ticket
  ticketFormID="YOUR-TICKET-FORM-ID"
  ticketID="TICKET-ID"
  theme="dark"
  color="#8B5CF6"
  triggerElementID="create-ticket-button"
  userID="a64427d6"
  username="John Doe"
  email="john@doe.com"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
  referenceID="a738d158892b"
>
  <button>Show ticket</button>
</ab-ticket>

Theme

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

Attribute	Type	Default value
theme	string	light

Example

HTML

<ab-ticket ticketFormID="YOUR-TICKET-FORM-ID" ticketID="TICKET-ID" theme="dark">
  <button>Show ticket</button>
</ab-ticket>

Color

This will display the ticket 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-ticket ticketFormID="YOUR-TICKET-FORM-ID" ticketID="TICKET-ID" color="#8B5CF6">
  <button>Show ticket</button>
</ab-ticket>

Trigger element ID

We recommend adding the button as a child element of the <ab-ticket> element.
However, sometimes you may want to trigger the ticket modal from another element.

In this case, you can add the ID of the element you want to use as a trigger.

Attribute	Type	Default value
triggerElementID	string	N/A

Example

HTML

<ab-ticket
  ticketFormID="YOUR-TICKET-FORM-ID"
  ticketID="TICKET-ID"
  triggerElementID="show-ticket-button"
></ab-ticket>
 
<!-- Somewhere else on your webpage -->
<button id="show-ticket-button">Show ticket</button>

User ID

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

Attribute	Type	Default value
userID	string	N/A

Example

HTML

<ab-ticket ticketFormID="YOUR-TICKET-FORM-ID" ticketID="TICKET-ID" userID="a64427d6">
  <button>Show ticket</button>
</ab-ticket>

Username

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

Attribute	Type	Default value
username	string	N/A

Example

HTML

<ab-ticket ticketFormID="YOUR-TICKET-FORM-ID" ticketID="TICKET-ID" username="John Doe">
  <button>Show ticket</button>
</ab-ticket>

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-ticket ticketFormID="YOUR-TICKET-FORM-ID" ticketID="TICKET-ID" email="john@doe.com"></ab-ticket>

Profile image URL

If you want to display 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-ticket
  ticketFormID="YOUR-TICKET-FORM-ID"
  ticketID="TICKET-ID"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
>
  <button>Show ticket</button>
</ab-ticket>

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-ticket ticketFormID="YOUR-TICKET-FORM-ID" ticketID="TICKET-ID" referenceID="a738d158892b">
  <button>Show ticket</button>
</ab-ticket>

Methods

You can query the DOM node of the ticket and call methods on it.

Example

HTML

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

JavaScript

// Get the DOM node of the ticket
const ticket = document.getElementById('my-ticket');
 
// Programmatically open the ticket
ticket.open();

Open

This will open the ticket modal

Method	Type	Return value
open()	Function	void

Example

JavaScript

ticket.open();

Close

This will close the ticket modal.

Method	Type	Return value
close()	Function	void

Example

JavaScript

ticket.close();

Callbacks

You can pass callbacks to the Chatbot to listen to certain events.

Example

HTML

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

JavaScript

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

On Ready

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

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

Callback	Type	Return value
onReady()	Function	void

Example

ticket.onReady = () => {
  console.log('ticket is ready!');
};

On Error

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

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

Example

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

Tickets Table Theme