Click any text to edit it right here · click an image or link to jump to its setting
- Replace the placeholder links: Header link, Button link, Apple Calendar (.ics file) link, Help centre link.
Booking Confirmation Email
Responsive · Dark mode
Verify Email Address
Responsive · Dark mode
One-Time Passcode (2FA) Email
Responsive · Dark mode
Password Reset Email
Responsive · Dark mode
Magic Link Sign-in Email
Responsive · Dark mode
New Sign-in Security Alert
Responsive · Dark modeBooking Confirmation Email — Free Responsive HTML Email Template
Transactional · v1.0.0 · Updated 2026-11-03 · Gmail, Outlook & Apple Mail · Dark mode
What's included
Features
About this template
Booking Confirmation Email — Free Reservation Confirmation Template
Booking Confirmation Email is the message a customer gets in the minute after they press "Book". At that moment they want three things: proof that the slot is really theirs, the details in one glance, and a way to get it into their calendar before they forget. This template is built around exactly that, for spas, salons, fitness studios, classes, tours, restaurants and any business that takes bookings online.
A date tile people recognise
The booking sits in a ticket-style card. On the left is a calendar tile with the month in your brand colour, the day in large type and the weekday underneath; on the right are the service, time, who it is with or how many guests, the address and a directions link. Below a dashed tear line sit the booking reference in monospace (easy to read out over the phone) and what was paid: a deposit, the full amount or what is still due on the day. On phones the tile sits above the details.
Add to calendar, three ways
Most no-shows start with a booking that never made it into a calendar. The template has three small outlined buttons, Google, Outlook and Apple (.ics), and you can leave any of them empty to hide it. A Google "TEMPLATE" link and an Outlook "compose" link open a pre-filled event; a hosted .ics file covers Apple Calendar and most desktop apps.
What to bring, and the cancellation deadline
An optional "Before you arrive" list covers the questions people would otherwise phone about: when to arrive, what is provided, what to tell you. The footer line states the free-cancellation deadline as a date and time, not "24 hours before", so nobody has to do the maths.
Send it from your booking tool
Paste the HTML into Postmark, SendGrid, Resend or Amazon SES, or into the custom-email field of a booking platform, and replace the sample values with its variables. It is transactional, so it carries no unsubscribe link. Pair it with the Appointment Reminder a day before the visit, and use Booking Rescheduled when the time changes.
Extend with AI
Take This Email Further With AI
Give this prompt to an AI assistant to write your own version of the Booking Confirmation Email email: draft ten subject lines and preheaders, adapt the copy for a customer segment, translate it, convert it to MJML or React Email, or write the plain-text version. Then paste the result back into the editor above to check it in desktop, mobile and dark mode.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a responsive HTML email: “Booking Confirmation Email”, a transactional email.
Purpose: A booking confirmation sent the moment someone books: a calendar-style date tile beside the service, time, guests and location, the booking reference and deposit paid, add-to-calendar links for Google, Outlook and Apple (.ics), a "Manage booking" button, a what-to-bring list and the free-cancellation deadline.
Inbox text:
- Subject line: “You’re booked: Deep Tissue Massage, Sat Nov 14 at 2:30 PM”
- Preheader (hidden preview text): “Booking ref KS-40218. Add it to your calendar, see what to bring, or change it up to 24 hours before.”
Content, top to bottom:
- Message & button
- Booking details
- Add to calendar
- What to bring
Headline: “You’re all set, {{first_name}}”. Main button: “Manage booking”.
Put the key facts first (order or account details, amounts, dates) in a clear summary, with no marketing clutter.
Build it like a professional email developer:
- Table-based layout, 600px wide on desktop and fluid on mobile (width 100%, max-width 600px).
- Inline CSS on every element, with one small style block only for media queries and dark mode (prefers-color-scheme).
- A bulletproof, Outlook-safe call-to-action button (padded table cell with a VML fallback), never an image.
- Colours: brand and button #0f766e, button text #ffffff, page background #eef4f2. Web-safe font stack with a fallback after the brand font.
- Every image has alt text and explicit width and height. Use PNG icons, never SVG, because Gmail and Outlook drop them.
- Hidden preheader text, a plain-text version, and a legal footer with the postal address, the reason the person is receiving it and a working unsubscribe link.
Finish with a short checklist of what to test in Gmail, Outlook for Windows, Apple Mail, mobile and dark mode.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Why use it
Why Use the Booking Confirmation Email Template
How it’s different
How It’s Different From Other Free Email Templates
Step by step
How to Use
- 1Pick your email platformChoose Mailchimp, Klaviyo, HubSpot or Brevo under Merge tags so first names and unsubscribe links export in its syntax, or keep plain {{first_name}} tokens.
- 2Edit the contentFill in the message & button, booking details, add to calendar and what to bring, or click any text in the preview to jump to its field. Switch the add to calendar and what to bring on or off.
- 3Add your brandUpload or paste your logo, set the brand colour and the light and dark palettes, pick fonts, or apply your saved brand kit.
- 4Preview and checkSwitch between desktop, mobile and dark mode, and fix anything the pre-send checks flag, such as placeholder links or missing alt text.
- 5Export or forkCopy the HTML into Postmark, SendGrid, Amazon SES, Resend or your own code, copy the plain-text version, download a ZIP with images, or fork it into My Code.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The service, date, time, location and who it is with, a booking reference, what was paid or is still due, a way to manage or cancel, add-to-calendar links and the cancellation policy. Send it within a minute of the booking so the customer knows it worked.
Each is a plain link. Google uses a calendar.google.com "action=TEMPLATE" link with the title and times, Outlook uses an outlook.live.com compose link, and Apple uses a hosted .ics file. Generate the links per booking in your booking tool or code, or leave a field empty to hide that button.
This one is sent straight after booking and confirms the reservation, payment and reference. The Appointment Reminder goes out a day or two before the visit and asks the customer to confirm, reschedule or cancel. Most businesses send both.
Yes. Leave the "Paid / deposit" field empty to remove that line, and switch off "What to bring" to drop the checklist. The booking card, button and cancellation note adjust on their own.
No. It confirms a transaction the customer started, so under US CAN-SPAM it is transactional. Keep promotions out of it so it stays that way, and include your business name and address, which the footer already has.
It saves an editable copy of your Booking Confirmation Email in My Code, the UI Snippets code editor: the email markup goes in the HTML panel and its CSS (mobile and dark-mode rules plus fonts) in the CSS panel, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial email, with no sign-up and no watermark. Everything runs in your browser, and your edits are saved locally.