Booking Widget Javascript Events

If you are embedding IntakeQ's booking widget on your website, you can use javascript to listen to widget events and perform your own logic. The most common scenario is to use the "Appointment Booked" event in order to track it using an analytics tool, like Google Analytics. Let's look at how to listen to these events.

"Widget Loaded" Event

As you probably guessed, this event is triggered when the booking widget has been loaded successfully on the page. In order to listen to this event, simply add an "intakeqWidgetLoaded" event listener to the same page where the booking widget has been embedded.

<script>
document.addEventListener("intakeqWidgetLoaded", function(e) {
    //YOUR CODE HERE
});
</script>

This event can be used to record events like 'Viewed Widget' in your analytics tool.

"Appointment Booked" Event

This even is triggered whenever a website visitor has completed the process of booking an appointment. In order to listen to this event, simply add an "intakeqAppointmentBooked" event listener to the same page where the booking widget has been embedded.

<script>
document.addEventListener("intakeqAppointmentBooked", function(e) {
    console.log(e.detail)
});
</script>

Note that this event will provide the appointment details in the "detail" property of the event argument. By executing the code above, you should get a result similar to this in your console:

{
  "MemberId": "5330eb98c5771921282d2ab1",
  "ClientName": "John Smith",
  "ClientEmail": "john.smith@gmail.com",
  "ClientPhone": "(123) 123-4567",
  "ClientNote": null,
  "Date": "2018-06-21T16:00:00Z",
  "Duration": 60,
  "ServiceId": "e3f20995-3133-4c89-b456-b347a3eb7c7f",
  "Paid": false,
  "FormSent": false,
  "ClientQuestionnaireId": null,
  "Status": 2, // 2 = Confirmed, 1 = Waiting Confirmation
  "PaymentInfo": null,
  "ServiceName": "Follow Up",
  "Price": 75,  
  "LocationId": "1",
  "LocationName": "Office",
  "LocationAddress": "105 Dulgaren St, Hamilton, ON L8W 3Y8, Canada",
  "CouponCode": null,
  "Discount": 0,
  "ClientTimezoneId": "Eastern Standard Time",
  "LocalTimezoneId": "Eastern Standard Time",
  "ClientAppointmentPackageId": null,
  "InvoiceId": null,
  "InvoiceNumber": 0,
  "InvoiceStatus": 0,
  "AdditionalClients": [],
  "DepositPaymentInfo": null,
  "RealDuration": 20,
  "EndDate": "2018-06-21T17:00:00Z",
  "ConfirmationSent": true,
  "LocalDate": "2018-06-21T12:00:00",
  "AmountDue": 75,
  "TotalAmountPaid": 0,
  "Id": "5b29a168cd4cac07d8441b3f",
  "dateFormatted": "Jun 21, 2018 at 12:00 PM",
}

"Package Sign Up" Event

This even is triggered whenever a website visitor has completed the process of signing up for a package. In order to listen to this event, simply add an "intakeqPackageSignUp" event listener to the same page where the booking widget has been embedded.

<script>
document.addEventListener("intakeqPackageSignUp", function(e) {
    console.log(e.detail)
});
</script>

This event will provide the package details in the "detail" property of the event argument. By executing the code above, you should get a result similar to this in your console:

{   
   AmountDue: 250,
   AppointmentPackageId: "cc412280-e736-4c80-9f0e-eeac91db49e0",
   ClientId: "14115df3-f133-4aca-b768-4dd7f2d809a1",
   ClientPaymentPlanId: null,
   ClientQuestionnaireId: null, 
   ClientTimezoneId: "Eastern Time",
   CouponCode: null,
   DateCreated: "2020-09-10T16:24:42.6410862Z",
   Discount: 0,
   Email: "jackblack@email.com",
   Id: "5f5a534acd4cb03dbc075673",
   InitialPrice: 250,
   Items: [
      {
         AppointmentId: "5f5a534acd4cb03dbc075674",
         Date: "2020-09-17T17:00:00Z",
         LocationId: "1",
         MemberId: "5330eb98c5771921282d2ab1",
         ServiceId: "669a318d-a071-45f1-9ba0-1864569aa8ff"
      }
    ],
   MemberId: "5330eb98c5771921282d2ab1",
   NoteFromClient: null,
   PackageName: "Start Up Package",
   Paid: false,
   Price: 250,
   QuestionnaireId: "58b508e48ded891e58091053",
}

Important: Please note that if the client schedules at least one appointment as part of the package, the "Appointment Booked" event will also be triggered for the first scheduled appointment.