How to redirect customers to a "Thank You" page

This guide builds on from Tracking events from your Appointedd booking tools on your website with JavaScript. Read that first if you haven't already set up the listener script on your page.

⚠️ This guide is technical in nature and assumes a basic level of knowledge of HTML and JavaScript.

How it works

You embed the Appointedd Booking Tools SDK on the page where your booking tool lives (either popover or embedded mode).
You register a listener for the BOOKING_CREATED event.
When that event fires, your JavaScript redirects the browser to your thank you page using window.location.href.

The code depends on whether your booking tool is in popover mode or embedded mode - snippets for both are below.

Popover mode

If your booking tool opens as a popover, add this script to the page:

<script src="https://booking-tools-sdk.appointedd.com/appointedd-booking-tools-sdk-v1.js"></script>
<script language="javascript" type="text/javascript">
  var registered = false;

  function init() {
    if (registered) return;
    registered = true;

    window.Appointedd.popovers.on("BOOKING_CREATED", function(event) {
      console.log("Booking created!", event.data);

      // Redirect the user to your thank you page.
      window.location.href = "/thank-you";
    });
  }

  if (window.Appointedd) {
    init();
  } else {
    window.addEventListener(
      "appointedd-booking-tools-sdk-v1",
      function(event) {
        if (event.detail.type === "sdk.ready") init();
      }
    );
  }
</script>

Embedded mode

If your booking tool is embedded directly into the page (not a popover), add this script instead:

<div id="iFrameContainer"></div>
<script src="https://booking-tools-sdk.appointedd.com/appointedd-booking-tools-sdk-v1.js"></script>
<script language="javascript" type="text/javascript">
  var registered = false;

  function init() {
    if (registered) return;
    registered = true;

    var bookingTool = Appointedd.renderWidget("iFrameContainer", {
      widgetId: "[YOUR_WIDGET_ID]"
    });

    bookingTool.on("BOOKING_CREATED", function(event) {
      console.log("Booking created!", event.data);

      // Redirect the user to your thank you page.
      window.location.href = "/thank-you";
    });
  }

  if (window.Appointedd) {
    init();
  } else {
    window.addEventListener(
      "appointedd-booking-tools-sdk-v1",
      function(event) {
        if (event.detail.type === "sdk.ready") init();
      }
    );
  }
</script>

Remember to replace [YOUR_WIDGET_ID] with your own widget ID, and /thank-you with the actual path (or full URL) of your thank you page.

Using booking details on the thank you page

The BOOKING_CREATED event includes a data.booking object with details about the booking that was just made - for example the customer's name, email, the service booked, and the start/end times.

You can pass some of this information along to your thank you page via URL query parameters, so the page can display a personalised confirmation message.

<script language="javascript" type="text/javascript">
  window.Appointedd.popovers.on("BOOKING_CREATED", function(event) {
    var booking = event.data && event.data.booking;

    if (booking) {
      var params = new URLSearchParams({
        bookingId: booking.id || "",
        firstName: (booking.customer && booking.customer.firstName) || "",
        service: booking.service_name || ""
      });

      window.location.href = "/thank-you?" + params.toString();
    } else {
      // Fall back to a plain redirect if booking data isn't available.
      window.location.href = "/thank-you";
    }
  });
</script>

On the thank you page itself, you can read these query parameters with plain JavaScript to personalise the message:

<script language="javascript" type="text/javascript">
  var params = new URLSearchParams(window.location.search);
  var firstName = params.get("firstName");

  if (firstName) {
    document.getElementById("thank-you-message").textContent =
      "Thanks for booking, " + firstName + "!";
  }
</script>

⚠️ Only pass non-sensitive information (like a first name or service name) in the URL. Avoid putting things like full email addresses or phone numbers in query parameters, since URLs can end up in browser history, logs, or shared links.

A note on popover mode redirects

In popover mode, the booking tool is running inside an iframe layered over your page. Redirecting with window.location.href from your parent page's listener (as shown above) will navigate the whole page away, which is the expected behaviour for a "thank you page" redirect - the customer will simply leave the popover behind and land on your thank you page.

If instead you only want to close the popover and show a message on the same page (rather than a full navigation), you can combine this with the CLOSE_APPOINTEDD_POPOVER event or simply reveal a hidden "thank you" section on the current page instead of redirecting.

Full reference

For the complete list of events, their data payloads, and general setup instructions, see our guide here: Tracking events from your Appointedd booking tools on your website with JavaScript.