How can I use JavaScript hooks in Amelia event booking form

Amelia provides JavaScript hooks that let you react to user actions and booking flow events on the front end. These hooks help you track interactions, validate input, and apply custom logic in the event booking experience without modifying core plugin files.

Hooks require programming knowledge, and support is limited to general guidance.

These hooks are triggered only on the events list booking form: [ameliaeventslistbooking].

Hook parameters

All JavaScript hooks receive the following parameters:

success – Callback function used to continue the process. Used only for the beforeBooking hook.
error – Callback function used to stop the process. Used only for the beforeBooking hook.
data – Object containing event and booking data related to the current step.

Hooks

When is the event booking form fully loaded?

The ViewContent hook is triggered after the form has finished loading.

				
					window.ameliaActions = {
  ViewContent: function (success = null, error = null, data) {
    console.log('ViewContent HOOK')
    console.log(data)
    console.log('------------')
  }
}

When is an event selected or changed?

The SelectEvent hook is triggered when the event is selected or changed in the form.

				
					window.ameliaActions = {
  SelectEvent: function (success = null, error = null, data) {
    console.log('SelectEvent HOOK')
    console.log(data)
    console.log('------------')
  }
}

How can I customize the event tickets list?

The EventTickets hook is triggered when event tickets are displayed on the event form. You can use it to reorder tickets, adjust the list, or apply custom logic before tickets are shown.

				
					window.ameliaActions = {
  EventTickets: function (success = null, error = null, data) {
    console.log('EventTickets HOOK')
    console.log(data)
    console.log('------------')

    let tickets = data.event.customTickets

    // ===========================
    //  SORT OPTIONS (choose one)
    // ===========================

    // --- Sort by NAME ASC ---
    // tickets = tickets.sort((a, b) => a.name.localeCompare(b.name, undefined, {sensitivity: 'base'}))

    // --- Sort by NAME DESC ---
    // tickets = tickets.sort((a, b) => b.name.localeCompare(a.name, undefined, {sensitivity: 'base'}))

    // --- Sort by ID ASC ---
    // tickets = tickets.sort((a, b) => a.id - b.id)

    // --- Sort by ID DESC ---
    // tickets = tickets.sort((a, b) => b.id - a.id)

    // --- Sort by PRICE ASC ---
    // tickets = tickets.sort((a, b) => a.price - b.price)

    // --- Sort by PRICE DESC ---
    // tickets = tickets.sort((a, b) => b.price - a.price)

    data.setTickets(tickets)
  }
}

When is the customer information step initialized?

The InitInfoStep hook is triggered when the customer information step is loaded.

				
					window.ameliaActions = {
  InitInfoStep: function (success = null, error = null, data) {
    console.log('InitInfoStep HOOK')
    console.log(data)
    console.log('------------')
  }
}

How can I add custom validation before payment?

The customValidation hook is triggered when the customer information step is validated, before the payment step is loaded.

				
					window.ameliaActions = {
  customValidation: function (success = null, error = null, data) {
    console.log('customValidation HOOK')
    console.log('------------')
    console.log(data)

    const customValidator = (rule, value, callback) => {
      if (value.includes('SOME_REGEX')) {
        callback(new Error())
      } else {
        callback()
      }
    }

    // example for email input field
    data.rules.email.push({message: 'CUSTOM MESSAGE', validator: customValidator})

    // example for a custom field
    var customFieldId = 2
    data.rules['cf' + customFieldId].push({message: 'CUSTOM MESSAGE', validator: customValidator})
  }
}

When is the payment step initialized?

The InitiateCheckout hook is triggered when the payment step is loaded.

				
					window.ameliaActions = {
  InitiateCheckout: function (success = null, error = null, data) {
    console.log('InitiateCheckout HOOK')
    console.log(data)
    console.log('------------')
  }
}

How can I run logic before an event booking is created?

The beforeBooking hook is triggered when the Confirm button is clicked, but before the booking is completed. This hook is not available for Mollie and WooCommerce payments.

				
					window.ameliaActions = {
  beforeBooking: function (success = null, error = null, data) {
    console.log('Before booking is created HOOK')
    console.log(data)
    console.log('------------')

    // call success() to allow booking completion
    success()
  }
}

When is an on-site event booking completed?

The Schedule hook is triggered after an on-site booking is completed, before the congratulations step is loaded.

				
					window.ameliaActions = {
  Schedule: function (success = null, error = null, data) {
    console.log('Schedule HOOK')
    console.log(data)
    console.log('------------')
  }
}

When is an online event booking completed?

The Purchased hook is triggered after an online booking is completed, before the congratulations step is loaded.

				
					window.ameliaActions = {
  Purchased: function (success = null, error = null, data) {
    console.log('Purchased HOOK')
    console.log(data)
    console.log('------------')
  }
}