Add Bookr to your website

Put your live Bookr booking page right on your own site — Squarespace, Wix, WordPress, Shopify, or any website. It's the same bookings and the same calendar as the app, so there's nothing to sync: a customer books on your site, and it lands in Bookr instantly.

Get your code (3 steps)

1. Open the Bookr app and go to Your Page.
2. Find Embed on your website and tap Copy code.
3. Paste it into your own site, wherever it lets you add HTML or an embed.

Embedding is a Shop-plan feature. On any plan you can still link a “Book now” button — see Not on Shop yet? below.

What the code looks like

The app generates a small <script> for you. You don't need to understand it — just recognise it so you know you've copied the whole thing. It drops in an <iframe> of your booking page and auto-fits its height as customers move through it (it listens for a bookr.resize message). Your own handle and accent colour are filled in automatically:

<script>
(function () {
  var container = document.createElement('div');
  var iframe = document.createElement('iframe');
  iframe.src = 'https://mybookr.app/embed/your-handle?accent=%232563EB';
  iframe.title = 'Book online';
  iframe.loading = 'lazy';
  iframe.style.width = '100%';
  iframe.style.border = '0';
  iframe.style.minHeight = '640px';
  container.appendChild(iframe);
  document.currentScript.parentNode.insertBefore(container, document.currentScript);
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://mybookr.app') return;
    if (e.data && e.data.type === 'bookr.resize' && e.data.height) {
      iframe.style.height = e.data.height + 'px';
    }
  });
})();
</script>

(your-handle is your mybookr.app/your-handle name — the real code already has yours in it.)

Paste it on your platform

Wherever you paste it, the booking page appears in place — nothing else to configure.

Make it match your site

The accent colour comes from your Bookr accent automatically, so the embed matches your brand out of the box. If you want to force the light or dark look to suit your site, add &theme=light or &theme=dark to the iframe src in the snippet:

iframe.src = 'https://mybookr.app/embed/your-handle?accent=%232563EB&theme=light';

Not on Shop yet?

You can still send customers straight to your booking page on any plan — just add a “Book now” button that links to your page:

https://mybookr.app/your-handle

It opens your full booking page in the browser. When you're ready to have bookings happen inline on your own site, upgrade to Shop and paste the embed snippet instead.

Troubleshooting

• Nothing shows up — confirm you're on the Shop plan (embedding is a Shop feature), and that you pasted into an HTML / embed block, not a plain text box. Pasted into text, the code shows as text instead of running.
• The height looks cut off — make sure you pasted the whole snippet, including the resize script at the bottom. That script is what lets the page grow to fit each step.
• Always do one test booking after you publish, so you can see the page load and confirm a real booking lands in your Bookr app.

That's the whole thing — copy, paste, test, done. For more answers see Help, or read the full pitch on For businesses.