Multi-location Business

A business with multiple schedules (locations). The customer picks a location first, then sees only the staff and services available there.

Demo Barbershop has 2 locations in NYC. Click the info icon next to a staff member to see an example host-supplied mini-profile modal.

React code

import { useState } from "react";
import { BookingWidget } from "@openings-link/react-ui";
import type { MemberOpenings } from "@openings-link/react";

function MyBookingPage() {
  // Pass `onStaffInfoClick` to opt into the info icon next to each
  // staff member. When the user clicks it, you render your own
  // mini-profile UI — bio, photos, reviews, etc.
  //
  // Omit the prop and no info icon is rendered.
  const [infoMember, setInfoMember] = useState<MemberOpenings | null>(null);

  return (
    <>
      <BookingWidget
        business="demo"
        appointmentMetadata={{ demo: "multi-location" }}
        theme={{ accent: "#8B5CF6", radius: 10 }}
        onStaffInfoClick={setInfoMember}
        on={{
          onBookingComplete: (result) => {
            console.log("Booked!", result);
          },
        }}
      />
      {infoMember && (
        <MyStaffProfileModal
          member={infoMember}
          onClose={() => setInfoMember(null)}
        />
      )}
    </>
  );
}