Building a rescheduling flow

Using Timekit's action link feature, you can build a simple rescheduling flow that looks something like this:

1. Customer makes a booking
2. After booking is confirmed, customer receives a confirmation email
3. The confirmation email contains a "Reschedule" link, which the customer decides to click
4. Booking is cancelled
5. Customer is redirected to the booking widget with their customer details pre-populated

This tutorial begins at step 3, generating the link.

Generating the link

The first step is to generate the rescheduling link, which is actually just a cancellation link that redirects to a booking widget. Please refer to the guide on action links for how to generate the link itself.

The payload in the JWT token should look like this:

{
  "booking_id": "95b8c686-48b3-47af-b966-d64a6f726165",
  "action": "cancel"
}

The redirect query param should look something like:

?redirect=https%3A%2F%2Flink-to-booking-widget.example.com%2F%3Fname%3DJohn%2BDoe%26email%3Djohn%40example.com

We will use the query params name and email later in the guide to prepopulate the booking widget.

Prepopulating the booking widget

Our Booking.js widget has an option that allows it to pre-populate the customer info fields based on parameters in the URL query. We have a full guide on this that should have a look at. In short, the booking widget needs to be configured similar to this:

// Note: URL.searchParams is not supported in IE
let params = (new URL(document.location)).searchParams;

TimekitBooking().init({
  name:     'Doc Brown',
  email:    '[email protected]',
  apiToken: 'XT1JO879JF1qUXXzmETD5ucgxaDwsFsd',
  calendar: '22f86f0c-ee80-470c-95e8-dadd9d05edd2',
  avatar:   '../misc/avatar-doc.jpg',
  app:      'back-to-the-future',
  bookingFields: {
    name: {
      prefilled: params.get('name'),
      placeholder: 'Your name please'
    },
    email: {
      prefilled: params.get('email'),
      disabled: true
    }
  }
});

Now, when your customer lands on the booking widget, ready to reschedule, their information will be prepulated.