Book demos from your website

Visitors on your website can book a demo without leaving the page. They pick a free slot from your real Google Calendar, confirm with a code sent to their phone, and get a Google Meet invite. The demo is then recorded and transcribed automatically, like any other call.

They can also book over WhatsApp, where they answer the same questions in chat.

Before you start

• A Google Calendar connected to Glitchgrab (see Record calls automatically with Google Calendar). Without one, no times can be offered.
• The glitchgrab SDK on your site, with a gg_ token for the project (see Add Glitchgrab to your Next.js app).
• You own the project, or have Context access to it.

1. Set up booking for the project

Open Calls in the left sidebar and pick the Booking tab.

1. Pick the project (shown when you have more than one).
2. Tick Accept demo bookings for this project.
3. Book demos into this Google account: the calendar that receives the demos. This is useful when you run a client's product: you can book into their calendar.
4. Set the slots:
   • Slot length (min): how long a demo is.
   • Gap between calls (min): breathing room between demos.
   • Book up to (days ahead): how far ahead people can book.
   • Minimum notice (min): the soonest someone can book from now.
5. Working hours: tick each day and set its start and end time, in the timezone shown. Slots are offered only inside these hours, and only when your calendar is actually free.
6. WhatsApp code: a short word for the project (it starts as the project's name). It goes into the "Book on WhatsApp" link, so an incoming chat knows which project it is about. If you leave it empty, the WhatsApp option never appears.
7. Press Save booking settings. You will see Booking settings saved.

If no calendar is connected yet, the panel says No Google Calendar connected. Booking cannot offer times until you connect one — connect it in Settings, then come back.

Book into a client's calendar

To use a calendar you don't sign in to yourself, choose one of these:

• connect another Google account: works only in your own browser, while you are signed in as that account.
• get a link for the client to connect theirs: creates a link to send them (Link ready — send it to the client). They open it and see exactly what access is asked for: only free/busy times and creating demo events, never their email, contacts or other meetings. Then they press Continue with Google. They need no Glitchgrab account. The link works once and expires in 7 days.

2. Add the button to your site

import { BookDemoButton } from "glitchgrab";

<BookDemoButton />                    // a "Book a demo" button
<BookDemoButton label="Talk to us" />

// Your own button
<BookDemoButton>
  {({ onClick }) => <button onClick={onClick}>Book a demo</button>}
</BookDemoButton>

Or open it from anywhere with useGlitchgrab().openBookingDialog(). It must be inside GlitchgrabProvider.

What the visitor sees

1. Book a demo shows free times grouped by day, in the visitor's own timezone. It says Finding times… while loading, and No times available right now. when nothing is free.

   • If you set a WhatsApp code, it also shows 💬 Rather book on WhatsApp? with We'll ask the same questions in chat.

2. They tap a time and fill in:

   • Your name
   • Email
   • Mobile number, with the note We send a code here to confirm, then a reminder before the call.
   • Anything we should know? (optional)

   Then they press Send verification code.

3. They see We sent a 4-digit code to your phone. Your slot is held for 10 minutes. They enter the Code and press Confirm booking.

4. They see You're booked. A calendar invite goes to their email, and a WhatsApp reminder is sent before the call. Open the meeting link takes them to the Meet.

Booking over WhatsApp

A visitor who taps Rather book on WhatsApp? lands in a chat that already names your project. Glitchgrab walks them through the date and time with tap-to-pick lists, and confirms the same way.

From the confirmation or reminder message, they can tap Reschedule to pick a new time. The calendar event is moved (the Meet link stays the same), and the recording follows the new time. To cancel, they type cancel and confirm.

After a demo is booked

• The event appears in the chosen Google Calendar with a Meet link.
• The recording bot joins every booked demo on its own. You don't need to turn on auto-record. The demo is recorded under the project it was booked for, even if that calendar usually files calls under another project. It shows on Calls as soon as it is booked.
• Auto-record in Calls → Schedule still controls your other calendar meetings; it does not affect booked demos.
• After the demo: see Read a call's transcript and Turn a call into GitHub issues.

Messages visitors may see

• Couldn't load available times / Couldn't reach the booking service: try again in a moment.
• Couldn't hold that slot: someone just took it. Pick another time.
• Couldn't confirm that code: the code was wrong, or the 10 minutes passed. Start again.