Ticket Form
Reference
Ticket

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.

AttributeTypeDefault value
themestringlight

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.

AttributeTypeDefault value
colorstring#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.

AttributeTypeDefault value
triggerElementIDstringN/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.

AttributeTypeDefault value
userIDstringN/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.

AttributeTypeDefault value
usernamestringN/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.

AttributeTypeDefault value
emailstringN/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.

AttributeTypeDefault value
profileImageURLstringN/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.

AttributeTypeDefault value
referenceIDstringN/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

MethodTypeReturn value
open()Functionvoid

Example

JavaScript
ticket.open();

Close

This will close the ticket modal.

MethodTypeReturn value
close()Functionvoid

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.

CallbackTypeReturn value
onReady()Functionvoid

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.

CallbackTypeReturn value
onError(error: Error)Functionvoid

Example

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

Aidbase Docs © 2024