glitchgrab 1.59.0 → 1.59.1

package/README.md

@@ -1037,6 +1037,25 @@ interface CallsOptions {
 }
 ```
 
+## How do I do something once a visitor books a demo?
+
+Open the dialog yourself and pass `onBooked`. `intro` puts one line of your own
+above the dialog's title, so the visitor knows why you are asking.
+
+```tsx
+const { openBookingDialog } = useGlitchgrab();
+
+openBookingDialog({
+  intro: "Book a short call — the live demo opens the moment you're booked.",
+  onBooked: ({ bookingId }) => {
+    // Runs once, after the phone code when one is asked. The details come from
+    // the browser: look `bookingId` up with listBookings() on your server
+    // before you trust it.
+    startDemo(bookingId);
+  },
+});
+```
+
 ## How do I change demo booking settings from my admin panel?
 
 The same server key reads and writes the project's demo booking settings —

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { f as GlitchgrabProviderProps, U as UseGlitchgrabReturn, R as ReportButtonProps, F as FeedbackButtonProps, g as GlitchgrabSession, C as CaptureErrorOptions, e as GlitchgrabFeedback, a as BreadcrumbType, B as Breadcrumb, b as CapturedContext, D as DeviceInfo, c as FeedbackPayload, d as FeedbackResult, L as LeadInput, h as LeadResult, i as ReportPayload, j as ReportResult } from './types-BpTLWJ1y.mjs';
-export { G as GlitchgrabConfig, k as ReportSeverity, l as ReportType, m as RuntimeInfo } from './types-BpTLWJ1y.mjs';
+import { h as GlitchgrabProviderProps, U as UseGlitchgrabReturn, R as ReportButtonProps, B as BookedDemo, F as FeedbackButtonProps, i as GlitchgrabSession, C as CaptureErrorOptions, g as GlitchgrabFeedback, c as BreadcrumbType, b as Breadcrumb, d as CapturedContext, D as DeviceInfo, e as FeedbackPayload, f as FeedbackResult, L as LeadInput, j as LeadResult, k as ReportPayload, l as ReportResult } from './types-BlMF6wzX.mjs';
+export { a as BookingDialogOptions, G as GlitchgrabConfig, m as ReportSeverity, n as ReportType, o as RuntimeInfo } from './types-BlMF6wzX.mjs';
 import * as React from 'react';
 import { ReactNode } from 'react';
 
@@ -81,7 +81,7 @@ declare function BookDemoButton({ label, className, children, }: {
     }) => ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-declare function BookingDialog({ token, baseUrl, open, onClose, preview, availabilityUrl, }: {
+declare function BookingDialog({ token, baseUrl, open, onClose, preview, availabilityUrl, intro, onBooked, }: {
     token: string;
     baseUrl: string;
     open: boolean;
@@ -97,6 +97,10 @@ declare function BookingDialog({ token, baseUrl, open, onClose, preview, availab
      * holds no `gg_` token for the project. Same response shape.
      */
     availabilityUrl?: string;
+    /** The host's one line above the title — see `BookingDialogOptions.intro`. */
+    intro?: string;
+    /** Fired once when a booking is confirmed — see `BookingDialogOptions.onBooked`. */
+    onBooked?: (booking: BookedDemo) => void;
 }): react_jsx_runtime.JSX.Element | null;
 
 /**
@@ -498,4 +502,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-export { BookDemoButton, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, type GlitchgrabComment, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabReportThread, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReportThread, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, postGlitchgrabReportComment, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReportThread, useGlitchgrabReports };
+export { BookDemoButton, BookedDemo, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, type GlitchgrabComment, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabReportThread, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReportThread, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, postGlitchgrabReportComment, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReportThread, useGlitchgrabReports };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { f as GlitchgrabProviderProps, U as UseGlitchgrabReturn, R as ReportButtonProps, F as FeedbackButtonProps, g as GlitchgrabSession, C as CaptureErrorOptions, e as GlitchgrabFeedback, a as BreadcrumbType, B as Breadcrumb, b as CapturedContext, D as DeviceInfo, c as FeedbackPayload, d as FeedbackResult, L as LeadInput, h as LeadResult, i as ReportPayload, j as ReportResult } from './types-BpTLWJ1y.js';
-export { G as GlitchgrabConfig, k as ReportSeverity, l as ReportType, m as RuntimeInfo } from './types-BpTLWJ1y.js';
+import { h as GlitchgrabProviderProps, U as UseGlitchgrabReturn, R as ReportButtonProps, B as BookedDemo, F as FeedbackButtonProps, i as GlitchgrabSession, C as CaptureErrorOptions, g as GlitchgrabFeedback, c as BreadcrumbType, b as Breadcrumb, d as CapturedContext, D as DeviceInfo, e as FeedbackPayload, f as FeedbackResult, L as LeadInput, j as LeadResult, k as ReportPayload, l as ReportResult } from './types-BlMF6wzX.js';
+export { a as BookingDialogOptions, G as GlitchgrabConfig, m as ReportSeverity, n as ReportType, o as RuntimeInfo } from './types-BlMF6wzX.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 
@@ -81,7 +81,7 @@ declare function BookDemoButton({ label, className, children, }: {
     }) => ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-declare function BookingDialog({ token, baseUrl, open, onClose, preview, availabilityUrl, }: {
+declare function BookingDialog({ token, baseUrl, open, onClose, preview, availabilityUrl, intro, onBooked, }: {
     token: string;
     baseUrl: string;
     open: boolean;
@@ -97,6 +97,10 @@ declare function BookingDialog({ token, baseUrl, open, onClose, preview, availab
      * holds no `gg_` token for the project. Same response shape.
      */
     availabilityUrl?: string;
+    /** The host's one line above the title — see `BookingDialogOptions.intro`. */
+    intro?: string;
+    /** Fired once when a booking is confirmed — see `BookingDialogOptions.onBooked`. */
+    onBooked?: (booking: BookedDemo) => void;
 }): react_jsx_runtime.JSX.Element | null;
 
 /**
@@ -498,4 +502,4 @@ declare function computeSignature(params: {
 declare function shouldSkipDuplicate(signature: string, windowMs?: number, now?: number): boolean;
 declare function clearDedupCache(): void;
 
-export { BookDemoButton, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, type GlitchgrabComment, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabReportThread, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReportThread, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, postGlitchgrabReportComment, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReportThread, useGlitchgrabReports };
+export { BookDemoButton, BookedDemo, BookingDialog, Breadcrumb, BreadcrumbType, CaptureErrorOptions, CapturedContext, DeviceInfo, FeedbackButton, FeedbackButtonProps, FeedbackPayload, type FeedbackQuery, FeedbackResult, GLITCHGRAB_SHORTCUT, GLITCHGRAB_SHORTCUT_MAC, type GlitchgrabComment, GlitchgrabErrorBoundary, GlitchgrabFeedback, GlitchgrabProvider, GlitchgrabProviderProps, type GlitchgrabReport, type GlitchgrabReportThread, GlitchgrabSession, LeadInput, LeadResult, ReportButton, ReportButtonProps, ReportPayload, ReportResult, UseGlitchgrabReturn, addBreadcrumb, captureContext, captureDeviceInfo, captureError, clearAppContext, clearBreadcrumbs, clearDedupCache, computeSignature, enhanceText, fetchGlitchgrabFeedback, fetchGlitchgrabReportThread, fetchGlitchgrabReports, getAppContext, getBreadcrumbs, getShortcutLabel, initBreadcrumbs, matchesShortcut, postGlitchgrabReportComment, sanitizeUrl, sendFeedback, sendLead, sendReport, setContext, setContexts, shouldSkipDuplicate, useGlitchgrab, useGlitchgrabActions, useGlitchgrabFeedback, useGlitchgrabReportThread, useGlitchgrabReports };

package/dist/index.js

@@ -8617,6 +8617,69 @@ function getTypeIcon(type, color, size = 24) {
 
 // src/booking-dialog.tsx
 var import_react5 = require("react");
+
+// src/phone.ts
+var COUNTRIES = [
+  { iso: "IN", name: "India", dial: "91" },
+  { iso: "AE", name: "UAE", dial: "971" },
+  { iso: "US", name: "US / Canada", dial: "1" },
+  { iso: "GB", name: "UK", dial: "44" },
+  { iso: "SG", name: "Singapore", dial: "65" },
+  { iso: "AU", name: "Australia", dial: "61" },
+  { iso: "SA", name: "Saudi Arabia", dial: "966" },
+  { iso: "QA", name: "Qatar", dial: "974" },
+  { iso: "NP", name: "Nepal", dial: "977" },
+  { iso: "BD", name: "Bangladesh", dial: "880" },
+  { iso: "LK", name: "Sri Lanka", dial: "94" },
+  { iso: "DE", name: "Germany", dial: "49" }
+];
+var ZONE_COUNTRY = {
+  "Asia/Kolkata": "91",
+  "Asia/Calcutta": "91",
+  "Asia/Dubai": "971",
+  "Europe/London": "44",
+  "Asia/Singapore": "65",
+  "Asia/Riyadh": "966",
+  "Asia/Qatar": "974",
+  "Asia/Kathmandu": "977",
+  "Asia/Katmandu": "977",
+  "Asia/Dhaka": "880",
+  "Asia/Colombo": "94",
+  "Europe/Berlin": "49"
+};
+function defaultDialForZone(zone) {
+  if (ZONE_COUNTRY[zone]) return ZONE_COUNTRY[zone];
+  if (zone.startsWith("America/")) return "1";
+  if (zone.startsWith("Australia/")) return "61";
+  return "91";
+}
+function splitTypedPhone(typed, dial) {
+  const trimmed = typed.trim();
+  const digits = trimmed.replace(/\D/g, "");
+  if (trimmed.startsWith("+")) {
+    const match = [...COUNTRIES].sort((a, b) => b.dial.length - a.dial.length).find((c) => digits.startsWith(c.dial));
+    if (match) return { dial: match.dial, national: digits.slice(match.dial.length) };
+  }
+  if (dial === "91" && digits.length === 12 && digits.startsWith("91")) return { dial, national: digits.slice(2) };
+  if (dial === "91" && digits.length === 11 && digits.startsWith("0")) return { dial, national: digits.slice(1) };
+  return { dial, national: digits };
+}
+function phoneProblem(dial, national) {
+  const digits = national.replace(/\D/g, "");
+  if (!digits) return "Enter your mobile number";
+  if (dial === "91") {
+    if (digits.length !== 10) return `An Indian mobile has 10 digits \u2014 this has ${digits.length}`;
+    if (!/^[6-9]/.test(digits)) return "An Indian mobile starts with 6, 7, 8 or 9";
+    return null;
+  }
+  if (digits.length < 6 || digits.length > 12) return "Check the number \u2014 it looks too short or too long";
+  return null;
+}
+function toE164(dial, national) {
+  return `+${dial}${national.replace(/\D/g, "")}`;
+}
+
+// src/booking-dialog.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function readQuestions(value) {
   if (!Array.isArray(value)) return [];
@@ -8759,7 +8822,9 @@ function BookingDialog({
   open,
   onClose,
   preview = false,
-  availabilityUrl
+  availabilityUrl,
+  intro,
+  onBooked
 }) {
   var _a, _b, _c, _d, _e;
   const wide = useMediaQuery(WIDE_QUERY, true);
@@ -8782,6 +8847,8 @@ function BookingDialog({
   const [name, setName] = (0, import_react5.useState)("");
   const [email, setEmail] = (0, import_react5.useState)("");
   const [phone, setPhone] = (0, import_react5.useState)("");
+  const [dial, setDial] = (0, import_react5.useState)(() => defaultDialForZone(localZone()));
+  const [phoneTouched, setPhoneTouched] = (0, import_react5.useState)(false);
   const [note, setNote] = (0, import_react5.useState)("");
   const [questions, setQuestions] = (0, import_react5.useState)([]);
   const [answers, setAnswers] = (0, import_react5.useState)({});
@@ -8892,8 +8959,12 @@ function BookingDialog({
   const view = step !== "slots" ? step : !pageLoaded ? "loading" : questions.length > 0 && !asked ? "questions" : "slots";
   const roomy = step === "slots";
   async function startBooking() {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     if (!selected) return;
+    if (phoneError) {
+      setPhoneTouched(true);
+      return;
+    }
     if (preview) {
       setPreviewEnded(true);
       return;
@@ -8907,7 +8978,7 @@ function BookingDialog({
         body: JSON.stringify({
           name,
           email,
-          phone,
+          phone: toE164(dial, phone),
           note,
           answers: Object.fromEntries(given.map((q) => [q.id, q.answer])),
           startsAt: selected.startsAt,
@@ -8926,6 +8997,7 @@ function BookingDialog({
       if (json.data.confirmed) {
         setMeetUrl((_b2 = json.data.meetUrl) != null ? _b2 : null);
         setStep("done");
+        reportBooked(json.data.bookingId, (_c2 = json.data.meetUrl) != null ? _c2 : null);
         return;
       }
       setBookingId(json.data.bookingId);
@@ -8936,8 +9008,16 @@ function BookingDialog({
       setBusy(false);
     }
   }
+  function reportBooked(id, meet) {
+    if (!onBooked || !id || !selected) return;
+    try {
+      onBooked({ bookingId: id, startsAt: selected.startsAt, name, email, phone: toE164(dial, phone), meetUrl: meet });
+    } catch (e) {
+      console.error("[glitchgrab] onBooked threw", e);
+    }
+  }
   async function confirmBooking() {
-    var _a2;
+    var _a2, _b2;
     if (!bookingId) return;
     setBusy(true);
     setError(null);
@@ -8954,13 +9034,15 @@ function BookingDialog({
       }
       setMeetUrl(json.data.meetUrl);
       setStep("done");
+      reportBooked(bookingId, (_b2 = json.data.meetUrl) != null ? _b2 : null);
     } catch (e) {
       setError("Couldn't reach the booking service");
     } finally {
       setBusy(false);
     }
   }
-  const canSubmitDetails = name.trim() && email.includes("@") && phone.replace(/\D/g, "").length >= 8;
+  const phoneError = phoneProblem(dial, phone);
+  const canSubmitDetails = Boolean(name.trim() && email.includes("@"));
   const selectedEnd = selected ? (_e = selected.endsAt) != null ? _e : new Date(new Date(selected.startsAt).getTime() + page.slotMinutes * 6e4).toISOString() : null;
   const monthDate = new Date(keyToUtc(`${month}-01`));
   const muted = { color: t.muted };
@@ -9107,6 +9189,14 @@ function BookingDialog({
             children: "Preview \u2014 nothing is booked"
           }
         ),
+        intro && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            "data-glitchgrab-booking-intro": true,
+            style: { fontSize: 13, fontWeight: 600, lineHeight: 1.45, paddingRight: 32, color: t.ink, overflowWrap: "anywhere" },
+            children: intro
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 20, fontWeight: 600, lineHeight: 1.25, paddingRight: 32, overflowWrap: "anywhere" }, children: page.title }),
         page.description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, lineHeight: 1.5, overflowWrap: "anywhere", ...muted }, children: page.description }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 4, fontSize: 14 }, children: [
@@ -9549,14 +9639,17 @@ function BookingDialog({
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { t, label: "Your name", value: name, onChange: setName, autoComplete: "name" }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { t, label: "Email", value: email, onChange: setEmail, type: "email", autoComplete: "email" }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            Field,
+            PhoneField,
             {
               t,
-              label: "Mobile number",
-              value: phone,
-              onChange: setPhone,
-              type: "tel",
-              autoComplete: "tel",
+              dial,
+              national: phone,
+              onChange: (nextDial, national) => {
+                setDial(nextDial);
+                setPhone(national);
+              },
+              onBlur: () => setPhoneTouched(true),
+              error: phoneTouched ? phoneError : null,
               hint: requireOtp ? "We send a code here to confirm, then a reminder before the call." : "We send a reminder here before the call."
             }
           ),
@@ -9844,6 +9937,64 @@ function Field({
     hint && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
   ] });
 }
+function PhoneField({
+  t,
+  dial,
+  national,
+  onChange,
+  onBlur,
+  error,
+  hint
+}) {
+  const box = {
+    boxSizing: "border-box",
+    padding: "9px 12px",
+    background: t.input,
+    color: t.text,
+    border: `1px solid ${error ? t.danger : t.border}`,
+    borderRadius: 8,
+    fontFamily: "inherit",
+    fontSize: 14,
+    outline: "none"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "block", fontSize: 13, fontWeight: 500, color: t.text }, children: [
+    "Mobile number",
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 8, marginTop: 6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "select",
+        {
+          "aria-label": "Country code",
+          value: dial,
+          onChange: (e) => onChange(e.target.value, national),
+          style: { ...box, flex: "0 0 auto", paddingRight: 8, cursor: "pointer" },
+          children: COUNTRIES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: c.dial, children: [
+            c.iso,
+            " +",
+            c.dial
+          ] }, c.iso))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: "tel",
+          autoComplete: "tel",
+          inputMode: "numeric",
+          placeholder: dial === "91" ? "98765 43210" : "Mobile number",
+          value: national,
+          "aria-invalid": Boolean(error),
+          onChange: (e) => {
+            const next = splitTypedPhone(e.target.value, dial);
+            onChange(next.dial, next.national);
+          },
+          onBlur,
+          style: { ...box, flex: "1 1 auto", minWidth: 0, width: "100%" }
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { role: "alert", style: { marginTop: 6, fontSize: 12, fontWeight: 500, color: t.danger }, children: error }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { marginTop: 6, fontSize: 12, fontWeight: 400, color: t.muted }, children: hint })
+  ] });
+}
 
 // src/rejection.ts
 var DETAILS_MAX_LENGTH = 1e3;
@@ -10434,8 +10585,18 @@ function GlitchgrabProviderInner({
   const [signedUsers, setSignedUsers] = (0, import_react6.useState)("OFF");
   const aiBlockedUnsigned = signedUsers === "ENFORCE" && !signature;
   const [booking, setBooking] = (0, import_react6.useState)("closed");
-  const openBookingDialog = (0, import_react6.useCallback)(() => setBooking("live"), []);
-  const openBookingPreview = (0, import_react6.useCallback)(() => setBooking("preview"), []);
+  const [bookingOptions, setBookingOptions] = (0, import_react6.useState)({});
+  const openBookingDialog = (0, import_react6.useCallback)((options) => {
+    setBookingOptions({
+      intro: typeof (options == null ? void 0 : options.intro) === "string" ? options.intro : void 0,
+      onBooked: typeof (options == null ? void 0 : options.onBooked) === "function" ? options.onBooked : void 0
+    });
+    setBooking("live");
+  }, []);
+  const openBookingPreview = (0, import_react6.useCallback)(() => {
+    setBookingOptions({});
+    setBooking("preview");
+  }, []);
   (0, import_react6.useEffect)(() => {
     let cancelled = false;
     fetch(`${baseUrl}/api/v1/sdk/project`, {
@@ -10534,6 +10695,8 @@ function GlitchgrabProviderInner({
             baseUrl: baseUrl != null ? baseUrl : DEFAULT_BASE_URL2,
             open: booking !== "closed",
             preview: booking === "preview",
+            intro: bookingOptions.intro,
+            onBooked: bookingOptions.onBooked,
             onClose: () => setBooking("closed")
           }
         ),
@@ -10675,12 +10838,13 @@ function BookDemoButton({
   children
 }) {
   const { openBookingDialog } = useGlitchgrab();
-  if (children) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: children({ onClick: openBookingDialog }) });
+  const open = () => openBookingDialog();
+  if (children) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: children({ onClick: open }) });
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
       type: "button",
-      onClick: openBookingDialog,
+      onClick: open,
       className,
       style: className ? void 0 : {
         padding: "10px 18px",