Embed Appointment Booking on Your Website

Add the Appointment Booking web component to your website so patients and leads can self-book appointments online.

Prerequisites

• Organization API key generated (same key used for Selfie Analysis component)
• Your website domain added to the Allowed Domains list

Steps

1. Get your Organization API key from Organization Settings → Web Components (same key as Selfie Analysis).
2. Ensure your website’s domain is in the Allowed Domains list.
3. Include the script tag in your website’s HTML:

   <script src="https://[platform-url]/components/booking.js" data-key="YOUR_API_KEY"></script>
4. Add the booking component element where you want it to appear:

   <hairscope-booking></hairscope-booking>

Notes

• The component displays:
  • Available services configured for the clinic
  • Calendar with available dates
  • Time slots for the selected date and service
• Patients can:
  • Book new appointments
  • Search for existing appointments (verified via OTP)
  • Reschedule their appointments
  • Cancel their appointments
• The component shows the same slot availability as the staff booking interface.
• Patients can confirm attendance via a link in their booking confirmation email or through the component.
• The component uses the same Organization API key as the Selfie Analysis component.
• The component will show “Access Denied” on domains not in the Allowed Domains list.