Embedded Appointment Booking

Authenticated Booking

Authenticated booking requires a known Enduser, and allows the client to book without providing any contact information. The booked appointment is automatically associated with their profile.

Steps

1. Get the enduserId
   1. Create a new Enduser with a POST request (see Create Enduser in API Docs)
   2. Look up an existing Enduser by email, phone or externalId 
2. Generate an authToken for the enduser (API call)
3. Format a booking URL to embed in an iframe as follows:
   1. {{your_portal_url}}/book-an-appointment/{{booking_page_id}}?token={{enduser_auth_token}}&embedded=true
4. Listen for the "Booking Success" message to identify a completed booking 

The following example code is a React hook which handles a "message" event from the iframe to determine when a booking within the iframe has been completed

useEffect(() => {
  const handleMessage = (m: MessageEvent) => {
    if (m?.data?.type === 'Booking Success' && typeof m?.data?.bookedEventId === 'string') {
      // handle booked event
    }
  }

  window.addEventListener('message', handleMessage)
  return () => { window.removeEventListener('message', handleMessage) }
}, [])