Single-location Business

A business with a pre-selected schedule. The location step is skipped automatically — the customer goes straight to picking a service and time.

Same barbershop, but only the East Village location is returned. 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() {
  // `onStaffInfoClick` lets you plug in your own staff mini-profile.
  // Pass a handler → info icon appears next to each staff member.
  // Omit the prop → no icon is rendered.
  const [infoMember, setInfoMember] = useState<MemberOpenings | null>(null);

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