Create Ticket - Reference

Bundle / Package

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

Attributes / Props

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

HTML

<ab-create-ticket
  ticketFormID="YOUR-TICKET-FORM-ID"
  theme="dark"
  color="#8B5CF6"
  headline="Create an issue ticket"
  description="Please let us know if something isn't working as expected."
  buttonText="Create ticket"
  isOpen="true"
  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>Create ticket</button>
</ab-create-ticket>

Theme

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

Attribute	Type	Default value
theme	string	light

Example

HTML

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

Color

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

Headline

This will display a headline above the Ticket Form.

Attribute	Type	Default value
headline	string	Create an issue ticket

Example

HTML

<ab-create-ticket ticketFormID="YOUR-TICKET-FORM-ID" headline="Create an issue ticket">
  <button>Create ticket</button>
</ab-create-ticket>

Description

This will display a description below the headline.

Attribute	Type	Default value
description	string	Please let us know if something isn't working as expected.

Example

HTML

<ab-create-ticket
  ticketFormID="YOUR-TICKET-FORM-ID"
  description="Please let us know if something isn't working as expected."
>
  <button>Create ticket</button>
</ab-create-ticket>

Button text

This will display a custom text on the button.

Attribute	Type	Default value
buttonText	string	Create ticket

Example

HTML

<ab-create-ticket ticketFormID="YOUR-TICKET-FORM-ID" buttonText="Create ticket">
  <button>Create ticket</button>
</ab-create-ticket>

Is open

This will determine if the Ticket Form is open or closed by default.

Attribute	Type	Default value
isOpen	boolean	false

Example

HTML

<ab-create-ticket ticketFormID="YOUR-TICKET-FORM-ID" isOpen="true">
  <button>Create ticket</button>
</ab-create-ticket>

Trigger element ID

We recommend adding the button as a child element of the <ab-create-ticket> element.
However, sometimes you may want to trigger the Ticket Form 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-create-ticket
  ticketFormID="YOUR-TICKET-FORM-ID"
  triggerElementID="create-ticket-button"
></ab-create-ticket>
 
<!-- Somewhere else on your webpage -->
<button id="create-ticket-button">Create ticket</button>

User ID

If you want to identify the user, you can pass a unique ID here.

ℹ️

If you do not provide a user ID, Aidbase will generate a random ID for you.
This can be used to identify the user in the Aidbase Dashboard.

Attribute	Type	Default value
userID	string	N/A

Example

HTML

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

Username

If you want to identify the user by a username, you can pass it here.

Attribute	Type	Default value
username	string	N/A

Example

HTML

<ab-create-ticket ticketFormID="YOUR-TICKET-FORM-ID" username="John Doe">
  <button>Create ticket</button>
</ab-create-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-create-ticket ticketFormID="YOUR-TICKET-FORM-ID" email="john@doe.com">
  <button>Create ticket</button>
</ab-create-ticket>

Profile image URL

If you want to display a profile image for the user, you can pass the URL here.
This will be displayed as the avatar next to each comment of the user.

Attribute	Type	Default value
profileImageURL	string	N/A

Example

HTML

<ab-create-ticket
  ticketFormID="YOUR-TICKET-FORM-ID"
  profileImageURL="https://cdn.some-page.com/profile-sm.png"
>
  <button>Create ticket</button>
</ab-create-ticket>

Reference ID

If you want to identify the user by a separate reference ID, you can pass it here.

ℹ️

If you provide a reference ID and do not provide a user ID, the reference ID will be used as the user ID.

Attribute	Type	Default value
referenceID	string	N/A

Example

HTML

<ab-create-ticket ticketFormID="YOUR-TICKET-FORM-ID" referenceID="a738d158892b">
  <button>Create ticket</button>
</ab-create-ticket>

Methods

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

Example

HTML

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

JavaScript

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

Open

This will open the Ticket Form.

Method	Type	Return value
open()	Function	void

Example

JavaScript

ticketform.open();

Close

This will close the Ticket Form.

Method	Type	Return value
close()	Function	void

Example

JavaScript

ticketform.close();

Properties

You can query the DOM node of the Ticket Form and assign values to its properties.

HTML

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

JavaScript

// Get the DOM node of the Ticket Form
const ticketform = document.getElementById('my-ticket-form');
 
// Assign a value to the isOpen property
ticketform.isOpen = true;

Options

For fields of the type Select and Multiselect you can assign options to the field.

Property	Type	Default value
options	Record<string, FieldOption[]>	N/A

FieldOption Type Interface

interface FieldOption {
  value: string;
  label: string;
  isSelected?: boolean;
}

Example

JavaScript

ticketform.options = {
  // For the sake of the example, let's say this field is a select field.
  // We are programmatically assigning extra options to the field.
  yvgmh: [
    { value: 'mom', label: 'Mom' },
    { value: 'dad', label: 'Dad' },
    { value: 'sister', label: 'Sister' },
    { value: 'other', label: 'Other' },
  ],
};

Callbacks

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

Example

HTML

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

JavaScript

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

On Ready

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

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

Callback	Type	Return value
onReady()	Function	void

Example

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

On Error

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

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

Example

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

On Create Ticket

The onCreateTicket() callback is a special function that acts as a middleware for the Ticket Form.

This function is called when the user submits the Ticket Form.
All values from the form are provided in the values argument which is a list of FieldValue objects.

This function should return a list of FieldValue objects.
These returned values will be shipped to the Aidbase API and stored as a new Ticket.

Callback	Type	Return value
onCreateTicket(values: FieldValue[])	Function	Promise<FieldValue[]>

FieldValue Type Interface

interface FieldValue {
  id: string;
  name?: string;
  description?: string;
  type?: FieldType;
  value: string | string[] | number | boolean | Date | File[] | FieldOption[] | null;
  error?: string;
}
 
interface FieldOption {
  value: string;
  label: string;
  isSelected?: boolean;
}

Example

JavaScript

ticketform.onCreateTicket = (values) => {
  // For the sake of the example, let's say
  // this field is a number field asking for a dollar amount
  const fieldID = 'uc8xt';
 
  const newFieldValues = values.map((fieldValue) => {
    if (fieldValue.id === fieldID) {
      return {
        ...fieldValue,
 
        // In this example we want to display the amount in cents.
        // So we're multiplying the value by 100 to convert it from dollars to cents
        value: fieldValue.value * 100,
      };
    }
 
    return fieldValue;
  });
 
  return newFieldValues;
};

Implement a custom wrapper Tickets Table