Ticket Form
Reference
Create Ticket

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.

AttributeTypeDefault value
themestringlight

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.

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

AttributeTypeDefault value
headlinestringCreate 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.

AttributeTypeDefault value
descriptionstringPlease 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.

AttributeTypeDefault value
buttonTextstringCreate 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.

AttributeTypeDefault value
isOpenbooleanfalse

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.

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

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

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

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

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

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

MethodTypeReturn value
open()Functionvoid

Example

JavaScript
ticketform.open();

Close

This will close the Ticket Form.

MethodTypeReturn value
close()Functionvoid

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.

PropertyTypeDefault value
optionsRecord<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.

CallbackTypeReturn value
onReady()Functionvoid

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.

CallbackTypeReturn value
onError(error: Error)Functionvoid

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.

CallbackTypeReturn value
onCreateTicket(values: FieldValue[])FunctionPromise<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;
};

Aidbase Docs © 2024