FloatMessage
Engagement6 min read

Let visitors book appointments from any page

The book-appointment template gives visitors a real calendar grid + slot picker, right inside your floating message. They pick a time, fill in their details, and walk away with a confirmation email + a calendar invite. You see every booking in your dashboard. Here's the full setup.

1

Create the message

In the FloatMessage dashboard, click New Message and pick the Book Appointment template. Give it a name like "30-min discovery call" or "Strategy session" — visitors won't see this, but you'll thank yourself if you ever run more than one booking widget.

2

Set your slot length and buffer

In the Content & Usage tab, choose how long each appointment is (15, 30, 45, 60, 90, or 120 minutes) and whether to add a buffer afterward (useful if you need time to reset or write up notes between visitors).

Tip: A buffer of 5–10 minutes between back-to-back bookings keeps the schedule from feeling claustrophobic and makes you actually start the next call on time.
3

Define your weekly hours

Toggle each weekday on or off, then set the open and close times. Hours are in your timezone — set explicitly in the Owner timezone dropdown. Visitors see slots in their own local time (the embed converts).

  • Days you don't check show as closed in the calendar — visitors can't pick them.
  • You can later block specific dates (holidays, conferences) without changing your weekly hours.
4

Configure the booking window

Two knobs control how far in advance visitors may book:

  • Earliest lead time — how close to "now" visitors may book. Set this to 1 hour if you don't want surprise meetings starting in 5 minutes.
  • Future window — how far ahead they may book. 30 days is a good default; tighten it if your schedule shifts a lot.
5

Add custom fields (optional)

By default visitors fill in name + email. Click + Add field to ask anything else: a phone number, a one-line "What would you like to discuss?", a company name. Each field has a name, label, type (text / email / phone / long text), and a required toggle.

Tip: Resist the urge to add 6 fields. Booking conversion is highest with 3 or fewer. Anything optional belongs in the notes field.
6

Set up confirmations and notifications

Three toggles in the Confirmation and Notifications sections:

  • Email me at — owner notification address. Every booking pings this inbox with the visitor's details and a one-click reply-to address.
  • Webhook URL — optional. We POST a JSON payload of every booking to this URL. Hook it up to your CRM, Slack, or Zapier.
  • Show .ics download / provider links — control whether the visitor success view offers Google / Outlook / Office 365 deep links and a universal .ics download. Both default on.
7

Save, embed, and test

Hit Save. The message becomes live on every page where the FloatMessage embed script is loaded (subject to your URL/device/geo targeting). Run through it yourself with a test email and confirm:

  • The slot list matches your weekly hours.
  • The confirmation view shows the .ics + provider buttons (if enabled).
  • You receive the owner notification email.
  • The booking appears in Dashboard → Appointments.
8

Manage bookings in the dashboard

The Appointments page is a month-grid calendar with daily booking counts. Click a day to see the booking list — visitor name + email, slot range, message name, and any custom fields they filled. From there you can copy their email, hit Email to open a mailto: draft, or Cancel the booking (which frees the slot back up so someone else can grab it).

Listen for bookings in JS

After a successful booking, the embed emits an appointment_booked event. Useful for tracking conversion in GA4, Tag Manager, or your own analytics:

FloatMessage.on("appointment_booked", function (detail) {
  // detail = { messageId, bookingId, slotStart, slotEnd }
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "appointment_booked",
    bookingId: detail.bookingId,
    slotStart: detail.slotStart,
  });
});

Next up