Hello  Eric,

Thank you for reaching out to us.

Can you please elaborate on what you are referring to as "we cannot read the data layer"?

Looking forward to your reply.

Hello Eric

This could be done with the following hooks:

<script>
window.ameliaActions = {
  ViewContent: function (success = null, error = null, data) {
    //triggered when the form loads
    console.log('ViewContent HOOK')
    console.log(data)
    console.log('------------')
  },
  SelectService: function (success = null, error = null, data) {
    //triggered when the service is selected/changed in the form
    console.log('SelectService HOOK')
    console.log(data)
    console.log('------------')
  },
  SelectEmployee: function (success = null, error = null, data) {
    //triggered when the employee is selected/changed in the form
    console.log('SelectEmployee HOOK')
    console.log(data)
    console.log('------------')
  },
  SelectLocation: function (success = null, error = null, data) {
    //triggered when the location is selected/changed in the form
    console.log('SelectLocation HOOK')
    console.log(data)
    console.log('------------')
  },
  SelectCategory: function (success = null, error = null, data) {
    //triggered when the category is selected/changed in the form
    console.log('SelectCategory HOOK')
    console.log(data)
    console.log('------------')
  },
  SelectPackage: function (success = null, error = null, data) {
    //triggered when the package is selected/changed in the form
    console.log('SelectPackage HOOK')
    console.log(data)
    console.log('------------')
  },
  InitiateCheckout: function (success = null, error = null, data) {
    //triggered once the customer lands on the "info" page where they fill in their details
    console.log('InitiateCheckout HOOK')
    console.log(data)
    console.log('------------')
  },
  Schedule: function (success = null, error = null, data) {
    //triggered once the 'on-site' booking is completed
    console.log('Schedule HOOK')
    console.log(data)
    console.log('------------')
  },
  Purchased: function (success = null, error = null, data) {
    //triggered once an online booking is completed
    console.log('Purchased HOOK')
    console.log(data)
    console.log('------------')
  },
  beforeBooking: function (success = null, error = null, data) {
    //triggered when the "Confirm" button is clicked but before the booking is completed.
    //This hook currently doesn't work for Mollie and WooCommerce payments
    console.log('Before booking is created HOOK')
    console.log(data)
    console.log('------------')
  },
}
</script>

These are the same hooks used in Google Analytics and Facebook Pixel integrations, but if you need some other hooks added, please let us know which ones and explain what they would contain and when they should be triggered.

Hello Eric,

Thank you for the update on this.

Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

If you need help with adding custom JS to the page, please take a look at this article.