Putting booking on your own website

There are three ways to get a customer to your booking flow, and they all lead to the same thing.

The hosted page

bookodile.com/your-shop. Nothing to install, works on any phone, and it is the link to put in an Instagram bio, a Google Business profile, or a text message.

It carries your name, your logo, your brand colour, your services and your opening hours. If you have no website at all, Bookodile also builds one from the same setup, at yourname.bookodile.com — see Your website. Every Book button on that website opens this page, and a service's own Book button opens it with that service already chosen (how that looks).

Its address is set in Settings → Website & booking page: the part after bookodile.com/ is your address name, and changing it shows the new address before you save. The old address keeps working and leads to the new one, so nothing already printed breaks.

Addresses from before 16 October 2026 have /book/ in them — bookodile.com/book/your-shop. They keep working for good and open the same page, so a printed QR code or an old email never needs replacing.

Preview on the same page opens your booking page beside AI Chat, as a customer sees it. You can book all the way to the end there: nothing is saved, nobody is emailed and no time is held.

The embedded widget

The same booking flow in an iframe on your own site. Copy the snippet from Settings → Website & booking page, under Booking on your own website, paste it into your page, and customers book without leaving you.

One deliberate difference from the hosted page: the embed is always light.

The hosted page follows the visitor's device — dark phone, dark booking page. The embed does not, and that is on purpose. An iframe follows the visitor's operating system rather than the page it is sitting in, so a shop with a white website would get a black rectangle punched into it for every visitor with dark mode on, with no way to fix it. The embed stays light so it matches your site.

Everything else about the two is identical — same services, same availability, same rules, same confirmation.

The QR code

Generated for you in Settings → Website & booking page, and it points at your booking page. It goes on a mirror, a window, a receipt, a business card, the back of a chair.

The reason it works is timing: a customer who has just been served is the most likely person in the world to book again, and they are holding their phone.

What the customer needs

Nothing. No account, no app, no password. That is true on all three routes.

Branding

Your logo, brand colour and your announcements are shared across all three. The brand colour is checked for contrast, and on the dark version of the hosted page a very dark brand colour is lightened enough to stay readable rather than disappearing. A black or grey brand colour goes the other way: on the dark page its buttons and the selected time turn white, with black text, so they read as the thing to press.

You can upload a separate logo for dark backgrounds if your usual one is dark ink on transparent. Without one, a dark logo is shown on a small white tile wherever the background is dark — the hosted page in dark mode, for example — so it stays visible.

Linking your logo back to your website

A customer who reaches the hosted page from a button on your website has no way back to it unless you give them one. In Settings → Website & booking page, Where the logo takes customers sets where the logo at the top of the page goes when tapped — usually your own website, but any web address works, such as the page the button sits on.

It is optional. Leave it empty and the logo goes to your Bookodile website's home page while that website is live — published, switched on and on the internet (Your website). With no live Bookodile website, an empty field means the logo is not a link. An address you type always wins over the Bookodile website, so a business keeping its old website for a while types that one in.

• No logo? It still works. The header then shows your business name, and the name is the link.
• Where it applies: the header of the hosted booking page, the confirmation screen after booking, and your public reviews, events and waiting-list pages.
• Not in the embedded widget. That already sits on your website, so there is nothing to go back to.
• Type the address the way you would anywhere — yourwebsite.com is enough; https:// is added for you. Only web addresses are accepted, not email addresses or phone numbers.
• If your Business settings already hold a website, the field offers it with one tap.
• It opens in the same tab, the way a link on your own site would.
• Each location has its own booking page, so each location sets its own link.

A hair salon links the logo to its price list, where the Book now button lives. A personal trainer with no logo links their name back to their Instagram profile, which is where most clients found them.

Worked example

A physiotherapy practice with a one-page website.

They embed the widget under "Book an appointment", so patients never leave the site. The same booking page URL goes in their Google Business profile, where most new patients actually find them. A QR code sits on the reception desk for rebooking on the way out.

Three routes, one calendar, one set of availability rules.

Limits

• The embed is always light, whatever the visitor's device is set to.
• The logo link does not apply inside the embed, which already sits on your website.
• The widget cannot be restyled beyond your brand settings. No custom CSS.
• One booking page per branch. A second location has its own URL, its own services and its own hours.
• The QR code points at the booking page, not at a specific service.
• No setting gives you a link to one service. The links that open the booking page with a service chosen are your Bookodile website's Book buttons for a service and the booking links in the review-request and win-back emails.