Bookings: appointments on your site

Add a booking calendar to your own site with one Amabrik snippet. Connect Google or Microsoft 365, set your services and availability, and take appointments.

The Bookings widget puts an appointment calendar on your own site, in your own brand, with the same single Amabrik snippet you use for every other widget. A visitor picks a service, picks a real open slot, fills in a short form, and the booking is done, all without leaving your page. Connect your Google Calendar or your Microsoft 365 account and the widget reads your live availability, so a time you’re already busy never shows as open, and it writes every confirmed booking straight onto your calendar. It can add a Google Meet, Microsoft Teams, or Zoom link to each appointment, and it can charge a deposit or the full amount with your own Stripe.

One thing to know up front: Amabrik never stores your bookings. When a calendar is connected, the event lives in your calendar. When it isn’t, each booking is sent to your CRM, a webhook, or by email, and then it’s gone. There is no booking list on our side and no second copy of your customers’ details to manage.

This page walks through turning the widget on, connecting your calendar, setting up services and hours, choosing where the meeting happens, payments, then the full editor tab by tab, and translations.

Turn it on

Open the dashboard, go to Widgets, and click the Bookings card. If you have no booking yet, Amabrik takes you straight into creating one. If you already have one or more, you’ll see the list, with a “New booking” button that starts the same flow.

A live desktop and mobile preview sits beside the editor, so you see every change as you make it, and you can preview any step of the booking flow (service, team, date, form, payment) with the step switcher above the preview. The Save button is sticky and stays visible while you scroll. When you’re ready, the Install button gives you the one snippet to paste on your site. It works on WordPress, Shopify, Webflow, Framer, or a custom build.

You choose how the widget sits on the page in the Display tab:

Inline panel: the booking panel sits in the page where you place it. You paste a small marker (<div data-amabrik-booking="..."></div>) where you want it, and the panel renders there.
Button and popup: a single floating button opens the booking in a modal. Nothing else to place; you only paste the main snippet. You can set the button to the bottom right or bottom left corner.

Connect your calendar

Open the Connect tab, Calendar section. You have three choices for how bookings are handled:

Collect and forward: no calendar is connected. Each booking is sent to your integration (your CRM, a webhook for Zapier, Make, n8n, or Google Sheets, or by email), and the visitor gets an add-to-calendar file. Slots come from the hours you set, not from a live calendar.
Google Calendar: reads your real availability and writes the confirmed event to your calendar, with a Google Meet link if you choose Meet as the location.
Microsoft 365 (Outlook): reads your real availability and writes the confirmed event to your calendar, with a Microsoft Teams link if you choose Teams as the location.

When you pick Google or Microsoft 365, a Connect button appears. Click it and a small popup window opens to sign you in. Your tokens are encrypted on our server and never reach the browser; Amabrik stores no bookings, since the events are created in your calendar.

Connect Google Calendar (step by step, June 2026)

In the Connect tab, choose Google Calendar, then click Connect Google Calendar.
A Google sign-in popup opens. Choose the Google account whose calendar you want to use (the one with your real availability and where new bookings should land).
Google shows a consent screen listing what the app can do: see and edit events on your calendars. Review it and click Continue (or Allow).
The popup closes on its own and the editor shows Connected with the account email. Availability and bookings now sync with this calendar.

Amabrik reads your free and busy times through Google’s freeBusy check, so it only ever sees whether a block of time is taken, not the contents of your events. Confirmed bookings are written to your primary calendar.

To switch accounts or stop syncing, click Disconnect and connect again.

Connect Microsoft 365 / Outlook (step by step, June 2026)

In the Connect tab, choose Microsoft 365 / Outlook, then click Connect Microsoft 365.
A Microsoft sign-in popup opens. Sign in with the Microsoft 365 or Outlook account whose calendar you want to use.
Microsoft shows a permissions screen (“Sign you in” plus read and write access to your calendar). Review it and click Accept.
The popup closes and the editor shows Connected with the account email. Availability and bookings now sync with this calendar.

A note for business and work 365 accounts: since 2026 Microsoft treats calendar read and write as a sensitive permission, so on some company tenants an administrator has to approve the connection once before staff can connect. If you see an “approval required” message, ask whoever manages your Microsoft 365 to approve it, then connect again. Personal Outlook accounts approve it themselves on the consent screen.

Amabrik reads your availability through Microsoft Graph’s getSchedule (busy or free only, not event details) and writes confirmed bookings to your calendar.

Set up your services

Open the Content tab, Services section. Each service is a thing people can book, with its own duration. For every service you set:

Name (for example, Consultation).
Duration in minutes. This is how long the appointment runs and how the open slots are sized.
Price (display), an optional text label shown to the visitor (for example, CHF 120). This is just a label.
Description, an optional short line under the service.
Price to charge, which only appears when payments are turned on. This is the real amount charged at checkout, in your Stripe account’s currency. Leave it empty for a free service.

With a single service, the service step is skipped and visitors go straight to the calendar. With two or more, they pick a service first. A paid service still shows the payment step.

Durations and buffers

Each service carries its own duration. The booking window itself is shaped in the Schedule tab:

Slot interval: how far apart start times are offered (for example, every 15 or 30 minutes).
Min notice (lead time): the smallest gap between now and the earliest bookable slot, so nobody books a slot two minutes from now. Set it in minutes (for example, 120 for two hours’ notice).
Bookable window: how many days ahead people can book.

The widget only offers a slot if the full duration fits inside your working hours and the slot doesn’t overlap anything busy on your connected calendar. The gap your connected calendar already holds around an event acts as a real buffer, since any overlapping time is removed from the offered slots automatically.

Availability and hours

In the Schedule tab:

Business timezone: slots are generated in this timezone. This is the anchor, so set it to where you actually work.
Show times in the visitor’s timezone: when on, each visitor sees the slots converted to their own timezone, so a client in another country books the right moment without doing the math.
Weekly hours: turn each day on or off and set one or more time ranges per day (for example, 09:00 to 12:00 and 14:00 to 18:00). Add a range with “Add a range” and remove extra ranges with the trash button. Slots are generated only inside these ranges.

When a calendar is connected, your live free and busy times are layered on top of these hours, so a slot inside your working hours that’s already taken in your calendar never shows.

Staff (team members)

Open the Content tab, Team section, and turn on Let visitors pick a team member for salons, spas, clinics, or any staff-based booking. Then add each team member with a name, an optional role, and an optional photo URL (https). When team is on, the visitor gets a team step (with an “Any available” option you can label) before picking a time.

Where the appointment happens (meeting links)

Open the Connect tab, Meeting location section, and choose where the appointment takes place. The visitor sees this in the confirmation, and a video link is generated automatically for the online options:

Not specified: no location shown.
In person: at your location. Put the address in the confirmation message so it travels with the booking.
Phone call: you call the visitor on the number they give, so keep the Phone field on in the details form.
Google Meet: a Meet link is created automatically for each booking, but only when Google Calendar is connected. Meet links are tied to Google’s calendar event, so this option needs the Google connection above.
Microsoft Teams: a Teams link is created automatically for each booking, but only when Microsoft 365 is connected. Teams links are tied to the Microsoft calendar event, so this option needs the Microsoft connection above.
Zoom: a unique Zoom meeting is created for every booking once you connect your Zoom account.

How each link connects

Google Meet rides along with the calendar event. When you connect Google Calendar and pick Meet, Amabrik asks Google to attach a Meet link as it creates the event. Nothing else to set up.
Microsoft Teams works the same way through Microsoft 365: connect Microsoft, pick Teams, and the event is created as an online Teams meeting with a join link.
Zoom is separate from your calendar, because Zoom is its own account. When you choose Zoom, a Connect Zoom button appears under the option. Click it, a popup opens, sign in with your Zoom account, and grant access. After that, Amabrik creates a fresh Zoom meeting on your account for each booking and adds the join link to the confirmation (and to the calendar event when a calendar is also connected). Your Zoom tokens are encrypted on our server and never reach the browser. To stop, click Disconnect. For the full Zoom app setup, see the separate Zoom integration guide.

You can mix and match: connect Google Calendar for availability and still use Zoom for the meeting, for example. Meet and Teams need their matching calendar; Zoom works with any calendar choice, including Collect and forward.

Payments at booking

Open the Connect tab, Payments section, and turn on Take payments with Stripe to charge for paid services before a booking is confirmed.

Charge up front: a percentage of the service price. 100% takes the full amount; 30% takes a 30% deposit and the rest is settled with the client directly.
Set each service’s real charge in Content > Services > Price to charge. Leave it empty for a free service.
Click Connect Stripe, sign in with your own Stripe account, and grant access. The money goes straight to your Stripe account; Amabrik never holds it and your Stripe keys never reach the browser. The visitor pays in your Stripe account’s currency.

The card is entered inside Stripe’s own secure checkout, so the widget never sees card details. A paid slot is one people are far likelier to actually show up for, which is the simplest way to cut no-shows.

Set it up, tab by tab

The editor uses the same small set of tabs as every Amabrik widget, with named accordion sections inside each (the first open, the rest collapsed):

Content

Text: the heading and subheading shown on every step, the launcher button label (popup layout only), each step’s title (service, team, date and time, details), the confirm button, the back link, and the confirmation screen title and message. This is where you’d put your in-person address, in the confirmation message.
Services: your bookable services, as described above.
Team: turn on staff selection and add team members.
Details form: what the visitor fills in after picking a time. It’s the same field builder as the Forms widget (drag to reorder, click a field to edit). The curated field types here are name, email, phone, text, long text, number, dropdown, choice, checkboxes, consent, heading, and paragraph. The booking summary (service, date, time) is attached to every submission automatically.

Style

Colors and style: the accent color, the background (solid, gradient, or image), the surface, text, and border colors, the typography, and the corner radius. Every color is a full-width row that opens a color picker. The whole booking renders inside a Shadow DOM, so it inherits nothing from your site’s CSS and nothing leaks out.

Schedule

Timezone and window: business timezone, show-in-visitor-timezone, slot interval, min notice, and bookable window.
Weekly hours: per-day on/off with one or more time ranges.

Connect

Calendar: Collect and forward, Google Calendar, or Microsoft 365, and the connect button.
Meeting location: in person, phone, Google Meet, Microsoft Teams, or Zoom, plus the Zoom connect button when Zoom is chosen.
Where bookings go (shown only in Collect and forward mode): connect your CRM and/or a webhook for Zapier, Make, n8n, or Google Sheets.
Payments: Stripe deposit or full payment.

Display

Layout: pick a layout template. You can switch layout anytime without recreating the booking; your services, colors, hours, and text are kept.
On-page footprint: inline panel, or button and popup (with a corner position for the floating button).

Advanced

Notifications: the confirmation email to the client and the notification email to you. These are sent through your own SMTP server, never through Amabrik (we never store the booking). The owner notification carries the client’s details; the client confirmation is the auto-reply with the booking details. Works in any mode, calendar connected or not.
Spam protection: an optional, privacy-friendly proof of work (ALTCHA) the visitor’s browser solves invisibly before a booking is sent. No CAPTCHA images, no tracking. Off by default.
Languages: default language, auto-detect, and per-language translations (see below).
Direction: reading direction, Auto, LTR, or RTL. Auto switches to right-to-left for Arabic, Hebrew, and similar languages, and mirrors the whole layout.
Custom CSS: target the booking Shadow DOM with your own rules (.ab-bk-panel, .ab-bk-slot, .ab-bk-cta, and so on).

Translations and languages

Open the Advanced tab, Languages section. Set your default language, whose text you edit in the Content tab, and turn on Auto-detect the visitor’s language to show the booking in the visitor’s browser language when there’s a match, otherwise the default.

Add a language from the “Add a language” picker, then click Translate on it to fill in the per-language text: heading, subheading, every step title, the “Any available” label, the back link, the confirm button, and the confirmation title and message, plus the details form fields. The whole flow, from the slot picker to the confirmation, shows in the visitor’s language, so a client anywhere books as easily as one next door.

Tips

If you offer online and in-person versions of the same thing, make them two services.
Set a sensible min notice so you’re never booked for the next ten minutes, and a bookable window that matches how far ahead you actually plan.
Use Collect and forward with a webhook if you want bookings to flow into a spreadsheet or another tool while you still manage your own calendar by hand.
Turn on Show times in the visitor’s timezone for any audience outside your own country.
For online meetings, the calendar you connect decides Meet versus Teams; Zoom is independent and works with either.
Use the preview step switcher to check every step (including the payment step) before you publish.

FAQ

Can two people book the same slot, or can I get double booked?

No. When a calendar is connected, the widget reads your live free and busy times right before showing slots, so a time that’s taken in your calendar never appears as open, and each confirmed booking is written straight back to that calendar. Slots only show inside your working hours and only if the full duration fits.

How are time zones handled?

You set a business timezone, and slots are generated in it. Turn on “Show times in the visitor’s timezone” and each visitor sees the slots converted to their own timezone, while the booking still lands correctly on your calendar in yours. The conversion accounts for daylight saving changes.

Does it send reminders?

Amabrik sends the confirmation (the client auto-reply with the booking details and any video link) and your owner notification, both through your own SMTP. When a calendar is connected, the event is created on both your calendar and the attendee’s, so the usual calendar reminders apply through Google or Microsoft. Amabrik itself doesn’t run a separate reminder schedule, since it stores no bookings.

What happens to cancellations and reschedules?

Because the event lives in your calendar (not on Amabrik), you cancel or reschedule it there, the same as any calendar event, and the attendee is notified by your calendar. In Collect and forward mode, you handle changes in whatever tool received the booking.

Do I have to connect a calendar?

No. In Collect and forward mode the widget uses the hours you set and forwards each booking to your CRM, a webhook, or by email, with an add-to-calendar file for the visitor. You only get live availability and automatic event creation once you connect Google or Microsoft 365.

Can I take a deposit instead of the full price?

Yes. Turn on Stripe payments, set “Charge up front” to a percentage (for example, 30% for a deposit), and set each paid service’s “Price to charge.” The amount goes straight to your Stripe account.

Where does my customers’ data go?

Into your calendar (when connected) and your integration (CRM, webhook, or email). Amabrik never stores or logs the booking, and there’s no booking list on our side. Calendar and payment tokens are encrypted on our server and never sent to the browser.

Which is better for online meetings, Meet, Teams, or Zoom?

Use whatever your clients already have. Google Meet needs Google Calendar connected, Microsoft Teams needs Microsoft 365 connected, and Zoom works with any setup once you connect your Zoom account. A unique link is created per booking and shown in the confirmation.