For businesses

Add Bookr to your website

Put Bookr's booking flow inside the website you already have. It uses the same bookings, calendar and payouts as the app, so a booking on your site lands in Bookr straight away.

Embedding is on the Pro plan. On any plan you can link a “Book now” button to your Bookr page instead. See Not on Pro yet? below.

Set it up in three steps

Add your website address in the app. Open Bookr → Your page → Your website, and add the address of the site you're putting the booking on, e.g. https://example.co.uk.
Copy your code. On the same screen, pick how you want it to appear, then tap Copy code.
Paste it into your site, anywhere your website builder lets you add HTML or an embed. Instructions for your platform ↓

Step 1 is not optional. Bookr only shows your booking page on websites you have registered, so nobody else can put it on their site. On a site you haven't added, the box says so instead of showing your page.

Four ways it can appear

All four use the same one-line code. You choose with data-shape, and you can change your mind later without touching your website again.

1 · In the page (`data-shape="inline"`)

The booking flow sits in your page like any other section, and grows and shrinks to fit each step so there is never a scrollbar inside a box. Best for a dedicated “Book” page.

2 · A floating button (`data-shape="button"`)

A “Book now” button pinned to the corner of every page. Tapping it opens the booking flow over your site. Nothing in your layout has to change. Use data-label to change the wording and data-position="left" to move it.

3 · Your own button (`data-shape="trigger"`)

Keep the button you already designed. Add data-bookr-open to it and it opens the booking flow.

<a href="#" data-bookr-open>Book an appointment</a>

4 · Straight to one service or person

Works with any of the above. Put booking for one service on the page that sells it, so the haircut page books the haircut.

<a href="#" data-bookr-open data-bookr-service="SERVICE-ID">Book this</a>

Build your code

The app fills this in for you. If you'd rather do it here, enter your Bookr link name and pick your options.

Your Bookr link name

mybookr.app/

How it appears
Look
Accent

…

Or get an AI to install it

If your site was built with an AI, paste the instructions below into the chat. It will put the booking in the right place.

Do step 1 first. Add your website address in the Bookr app under Your page → Your website. An AI can't do that part. It's the check that stops anyone else putting your booking page on their site.

…

If it tells you it can't add custom code, that usually means the page is a rich-text block rather than an HTML one — ask it for an embed, custom HTML or code block, or use the floating-button option, which needs no space in your layout.

Pasting it into your website

The booking appears where you paste it. There's nothing else to set up.

Squarespace

Edit the page where you want bookings.
Add a Code Block.
Paste the code, then Apply and save.

Wix

Open the editor and click Add Elements (+) → Embed Code → Embed HTML.
An HTML box appears on the page. Click it, then Enter Code.
Paste the code, click Update, and drag the box where you want it.
Drag the box taller than you think it needs. This is the one Wix quirk that matters: a Wix HTML box does not grow with the thing inside it, so make it around 700px tall or the booking will be cut off.
Publish. Embeds don't run in the Wix editor preview. Publish and open the real page to see it.

If the fixed height annoys you, use data-shape="button" instead: the floating button opens the booking over the whole page, so the height of the box stops mattering.

WordPress

Edit the page or post.
Add a Custom HTML block.
Paste the code and update.

Shopify

On a normal page (a “Book” page):

Online Store → Themes → Customize.
In the page dropdown at the top, choose the page you want (or Pages → Add page first).
Add section → Custom Liquid.
Paste the code into the Custom Liquid box and Save.

To put the floating button on every page, use data-shape="button" and paste it into Themes → Edit code → layout/theme.liquid, just before </body>. Duplicate your theme first so you can roll back.

Shopify's rich-text editor strips <script>, so pasting into a normal page's text box will not work. It has to be Custom Liquid or theme code.

Webflow / Framer

Drop an Embed / Code element onto the page.
Paste the code inside it.
Publish.

Any HTML site

Paste the code into your page's HTML where you want booking to appear.
That's it.

Changing it later

You should never have to touch your website twice. Your colour, the light/dark look, which services show and which websites are allowed all live in the app, under Your page → Your website. Change them there and every site you've pasted the code onto updates on its own, usually within the hour.

The only reasons to edit your website again are changing where the booking sits on the page, or switching between the four ways it can appear.

For whoever built your site

Hand this section to your web person if you have one. The widget reports what it's doing, so your existing analytics keep working:

window.addEventListener('bookr:booked', function (e) {
  // e.detail = { ref, amountPence, currency }
  // fire your own conversion tracking, or send them somewhere
});

// Open the booking flow from your own code:
window.Bookr.open({ service: 'SERVICE-ID' });

// Built your own slot picker from the API (mybookr.app/developers)? Hand the chosen time
// to Bookr to confirm and pay. If that slot is free the flow opens on the details step;
// if not, the customer sees the calendar as normal.
window.Bookr.open({ service: 'SERVICE-ID', start: '2026-10-06T08:00:00Z' });

The booking flow runs in an iframe on mybookr.app, so card details never touch your site and your site stays out of PCI scope. Payments are handled by Stripe exactly as they are on your Bookr page.

Not on Pro yet?

You can send customers straight to your booking page on any plan. Add a “Book now” button that links to it:

https://mybookr.app/your-handle

It opens your booking page in the browser. Pro adds the embed, so customers can book without leaving your site.

If something isn't right

It says “Almost there” — the website you pasted it on isn't registered yet. Add it in the app under Your page → Your website. Give it a minute, then reload.
It says booking has moved — embedding is part of Bookr Pro. Your booking page still works; the box is telling customers where to go.
Nothing appears at all — you probably pasted into a text box rather than an HTML / embed block. In a text box the code shows as text instead of running. Check for a block called Code, Custom HTML, or Embed.
It's the wrong height — the booking resizes itself as the customer moves through it. If it's stuck, your website builder may be blocking scripts; try the floating-button shape instead, which needs no space in your layout.
The colour looks wrong — set it in the app rather than in the code, so it stays right everywhere.
Always make one test booking after publishing, and check it lands in your Bookr app. Then cancel it. The service price is refunded; the Booking Protection Fee is not.

Still stuck? Get in touch with the address of the page you put it on and we'll look at it for you.

For more answers see Help, or see For businesses to find out more.