How to use XS Bookly

Overview

XS Bookly is a booking platform for businesses. You get a branded widget to embed on any website, an admin panel to manage everything, and optional Stripe payments and Google Calendar sync at booking time.

Getting started

Create an account

1. Go to Create account and enter your business name, email, and password (minimum 8 characters).
2. You are signed in automatically and taken to the dashboard.
3. Follow the setup checklist below before sharing your widget with customers.

Sign in later

Use Sign in with your email and password. Sessions last 7 days. Sign out from the account menu in the dashboard header.

Setup checklist

Complete these steps in order for a working booking flow:

1. 1
   Add services

   Define what customers can book — name, description, and price.

2. 2
   Set availability

   Choose which days and times each service can be booked.

3. 3
   Add ZIP codes

   Optional. Required only if your flow includes a ZIP Check step.

4. 4
   Configure branding

   Set your business name, logo, and primary color.

5. 5
   Connect Stripe

   Optional. Required if your flow collects payment.

6. 6
   Configure email

   Optional. Sends booking confirmations and notifications.

7. 7
   Build your flow

   Design the step-by-step journey in the Flow Builder.

8. 8
   Embed the widget

   Copy the iframe code and add it to your website.

Dashboard

The Overview page shows live stats: Total Bookings, Confirmed Bookings, Pending Bookings, Total Customers, and Total Revenue. Recent bookings appear in a table below.

Use the sidebar to navigate. Menu items are grouped under Main, Setup, and Account. Search menu items with the search box at the top.

Main

• Overview — live booking, customer, and revenue stats
• Bookings — view, filter, cancel, and export bookings
• Customers — see who booked and their history
• Enquiries — messages from customers outside your flow

Setup

• ZIP Codes — service-area coverage
• Services — your bookable offerings
• Availability — weekly time slots per service
• Flow Builder — design the widget journey
• Embed Code — API key and iframe snippet

Account

• Settings — branding, Stripe, email, Google Calendar, and account

Services

Add each service customers can book with a name, optional description, and price (use 0 for free bookings).

• Click Add service to create one, or edit/delete from the table.
• Inactive services stay in your catalog but are hidden from the widget.
• Import CSV — columns: Name, Description, Price, isActive (true/false).
• Export CSV — download your current list anytime.

Availability

Availability defines when each service can be booked — by day of week and time range. Generate slots once and they repeat every week.

• Add slot — pick service, day (Sun–Sat), start and end time.
• Bulk add — same hours across weekdays, weekends, or all days.
• Delete slots when your schedule changes.

Create availability before testing date or slot pickers in the Flow Builder. No slots means customers cannot book times.

ZIP Codes

Define the service areas where you accept bookings. ZIP codes power the ZIP Check step in your Flow Builder.

• Add ZIP codes one at a time or import a CSV list.
• Export CSV — download your current coverage anytime.
• Skip this section if your flow does not include a ZIP Check step.

Flow Builder

The Flow Builder defines the steps customers follow in your widget — like a step-by-step form.

Layout

• Steps panel (left) — reorder with arrows; click a step to edit.
• Editor (right) — title, options, and behavior for the selected step.
• Save order — after reordering steps.
• Preview flow — opens your live widget in a new tab.

Question types

Multiple choice routing

Each option on a Multiple Choice step can:

• Go to the next question
• Jump to a specific question
• Submit the form (thank-you, no payment)
• Show an enquiry form
• Disqualify the customer (end with a message)

Requirements for some steps

• Payment — Stripe must be configured in Settings.
• ZIP Check — at least one ZIP code must be added.
• Google Calendar — optional step for customers to add the booking to their calendar. Connect your account under Settings → Google Calendar to sync confirmed bookings to your calendar too.

Example paid booking flow

1. Welcome Screen
2. Slot Picker (service, date, time)
3. Email / Phone / Address (or collect in Payment step)
4. Payment (Stripe)
5. Thank You

Embed Code

Open Embed Code to copy your API key and iframe snippet.

<iframe
  src="https://your-domain.com/widget/YOUR_API_KEY"
  width="100%"
  height="700px"
  frameborder="0"
></iframe>

• Paste the code into your website where the widget should appear.
• Increase height (e.g. 800–1000px) if the flow feels cut off.
• Use Open in New Tab to test before embedding.
• The widget uses your branding from Settings. The API key is public by design — it only exposes booking endpoints, not dashboard access.

Settings

Branding

• Business name — shown in the widget and emails
• Logo URL — public URL to your logo image
• Primary color — buttons and progress bar accent

Stripe

Required for Payment steps. Enter your publishable key, secret key, and webhook secret. Leave secret fields blank to keep existing values when updating other settings. Use test keys while developing.

Email / SMTP

Optional. Sends booking confirmations to customers and notifications to your account email. For Gmail, use port 587 and an App Password.

Google Calendar

Optional. Connect your Google account to automatically add confirmed bookings to your calendar. Create a Google Cloud OAuth client, paste your Client ID and Secret, then click Connect Google Calendar. Customers can also add appointments to their own calendar via a Google Calendar step in your flow.

Account

View your sign-in email. Sign out from the account menu in the dashboard header.

Bookings & customers

Booking statuses

Filter bookings by status (HELD, CONFIRMED, CANCELLED, ABANDONED), cancel from the table, and export to CSV. Click a customer to see their full booking history.

Enquiries

When your flow routes customers to an enquiry form, submissions appear under Enquiries. Update status: NEW → CONTACTED → RESOLVED. Export enquiries to CSV from the page header.

Troubleshooting

Widget shows "Unable to load booking widget"

Check the API key in your iframe URL, ensure the backend is running, and look for network errors in the browser console.

No available time slots

Add availability for the service and day. Confirm the service is active. Preview the flow from Flow Builder.

Payment step missing or disabled

Configure Stripe in Settings and add a Payment step to your flow.

ZIP Check always fails

Add the customer's ZIP under ZIP Codes. Use the ZIP Check question type, not a plain text field.

Emails not sending

Verify SMTP host, port, and credentials. For Gmail use port 587 with an App Password.

Google Calendar not syncing

Complete Settings → Google Calendar with valid OAuth credentials and connect your account. Confirmed bookings are added automatically after payment succeeds.

Embed looks cut off

Increase the iframe height. The widget is responsive inside the frame.