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.

Ask questions before booking

Under Questions before booking you can ask prospects a few things before they see your times, for example which language they want the demo in. Each question is a list of choices they tap; there are no typed answers. You can add up to 5 questions with 2–9 choices each. Tick can be skipped to make a question optional. The answers show on the calendar event, in Upcoming calls and in the WhatsApp alert.

Try changes before prospects see them:

1. Edit the questions and press Save as draft. You will see Draft saved — prospects still see the live questions, and a bar saying Draft — not live.
2. Press Preview draft. The real booking dialog opens with your draft, marked Preview — nothing is booked. Answer, pick a time and fill in the form. At the end it says nothing was booked and no code was sent.
3. Press Publish to make the draft live on your site and in the WhatsApp chat (Questions are live), or Discard draft to throw it away.

While a draft exists, Save booking settings saves your question edits into the draft too, so changing working hours never publishes them by accident. Preview needs a connected calendar.

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. If the project asks questions, the dialog opens on A few questions first. See available times stays disabled until every required question is answered. Their answers then show on the left, with a Change link.

2. 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.

3. 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.

4. They see We sent a code to ••••7975. Your slot is held for 10 minutes. (the last 4 digits of their number). They enter the Code and press Confirm booking.

   • No SMS? After 30 seconds, Didn't get it? Resend code sends a new one (New code sent to ••••7975). The old code stops working, and the slot is held for another 10 minutes.

5. 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 asks your questions first, then 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. Use Resend code, or start again if the hold ran out.
• Too many codes sent to this number — try again later: 5 codes went to that number within an hour.