Start by reading this introduction article on how to make booking widget customizations. Once you feel comfortable making config code changes, you can continue here.

Whether you're using Google Analytics, Adwords, Mixpanel or something completely different, it can be very beneficial to track when your users reach a goal - such as booking a meeting!

If you're using our booking widget (also known as booking.js), you can achieve this by adding custom code when embedding it on your web page.

NB! Unfortunately, it's not possible to add the tracking code if you're using our hosted page at https://my.timekit.io

How it works

In short, what you need to do is register a callback called "createBookingSuccessful" and run your tracking script when that triggers.

callbacks: {
  createBookingSuccessful:  function(response) {
    // Your tracking code goes here
  }
}

Pro tip: You also have access to the booking data (the first argument passed to your callback function) so you can save the customer name or booking date as meta-data with your event.

Using Google Analytics (analytics.js), here's how to track an event that you can later use for setting up a goal:

ga('send', 'event', 'Booking', 'created', 'Lead Sales Call');

Mixpanel and other services might use other tracking mechanism, but as long as it works in JavaScript, you should be able use it 👍

Full example

Adding these two things together, you should get something like this:

<div id="bookingjs"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.timekit.io/booking-js/v2/booking.min.js"></script>
<script>
  window.timekitBookingConfig = {
    app_key: 'live_widget_key_yYXHsUurvCUctNYflzGDMqEJo6mol0Yo',
    project_id: '<your-project-id-here>',
    callbacks: {
      createBookingSuccessful:  function(response) {
        ga('send', 'event', 'Booking', 'created', 'Lead Sales Call');
      }
    }
  }
</script>

That's it! 🤘