Callbacks & Custom Confirmation

Compare built-in confirmation with host-owned confirmation, then try a widget where callbacks open simple modals.

The examples use mock data, so no real appointment is created.

Completion Mode Comparison

Inline mode shows the built-in confirmation scene. External mode keeps the callback but lets the host app own the confirmation modal or page.

Callback Modal Playground

This widget wires every lifecycle callback to a simple host-owned modal. Step changes are recorded in the event log so they do not interrupt the flow.

Recent callback events

Interact with the widget to see callbacks here.

React code

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

function BookingWithCallbacks() {
  const [modal, setModal] = useState(null);

  const showModal = (title, body) => setModal({ title, body });

  return (
    <>
      <BookingWidget
        business="demo"
        completionMode="external"
        onConsultationRequest={(member, services) => {
          showModal(
            "Consultation request",
            `Open your own intake flow for ${member.name}.`,
          );
        }}
        onStaffInfoClick={(member) => {
          showModal("Staff info", `Open your own profile modal for ${member.name}.`);
        }}
        on={{
          onBookingComplete: (result) => {
            showModal(
              "Custom confirmation",
              `Appointment ${result.appointmentId} is booked.`,
            );
          },
          onRescheduleComplete: (result) => {
            showModal("Rescheduled", `New time: ${result.date} ${result.time}.`);
          },
          onServiceRequestComplete: (result) => {
            showModal("Request sent", result.serviceRequestId);
          },
          onStepChange: (from, to) => {
            console.log(`Step changed from ${from} to ${to}`);
          },
          onError: (error) => {
            showModal("Booking error", error.message);
          },
          onVerificationSent: (method) => {
            showModal("Verification sent", `Code sent by ${method}.`);
          },
          onVerificationComplete: (customerId) => {
            showModal("Customer verified", customerId);
          },
          onScheduleSelect: (schedule) => {
            showModal("Schedule selected", schedule.title);
          },
          onServiceSelect: (service) => {
            showModal("Service selected", service.title);
          },
          onSlotSelect: ({ time, member }) => {
            showModal("Slot selected", `${time} with ${member.name}.`);
          },
        }}
      />
      {modal && <MyModal modal={modal} onClose={() => setModal(null)} />}
    </>
  );
}