Putting booking on your website
Paste a snippet and your booking flow runs inside your own site, either in the page or as a popup over it.
Last updated 2 September 2026
The Website embed panel under Integrations → Website embed gives you a snippet to paste into your site, and the booking flow runs inside your page. Grab the snippet from a desktop.
In the page, or over it
- The first choice is How it opens. In the page puts the booking flow in a box on a page of your site, for a dedicated booking page. As a popup opens the flow over whatever page the customer is on, in the same tab; closing it puts them back where they were, scroll position and all.
- Popup suits Book now buttons scattered around your site. Paste the script line once, normally in your theme footer, and every link you already have to your Velobook pages starts opening the popup. You do not have to change those links.
- To turn a button that is not a link into a trigger, add `data-velobook-book` to it.
- To make one button open a particular surface, use `data-velobook-book="rentals"` (or `tours`, `workshops`, `fittings`, and so on).
- To open it from your own code, call `window.Velobook.open()`.
The popup takes over a link's click but leaves the link alone. If the script is blocked, or the customer middle-clicks to open a new tab, the link takes them to your Velobook page as before.
Choose which embed
Choose an embed has a tab for Combined plus one for each surface you offer, so a shop with no hire listings never sees a Rent tab. The choice is about which page of your site you are pasting into:
- Combined opens on your services and lets customers switch to your other bookable surfaces. For a single "Book online" page.
- A scoped embed (Services, Workshops, Rent, Tours, Plans, Fittings or Community days) shows that surface only, with no links out. Paste it on the matching page of your site.
- Narrower again for hire: add `data-item` to a Rent snippet and the embed shows a single bike. See hire from your Shopify product pages, which works on any site.
The booking flow normally opens by asking what brings the customer in. On a services-scoped embed that question is skipped: your page already answered it.
Paste it in
- 1Choose how it opens, pick your tab, and under Background choose Match my site's background (the default) or Use Velobook's paper background.
- 2Choose Copy to take the whole snippet, script tag included.
- 3For an in-the-page embed, paste it into the page where booking should appear. For a popup, paste it wherever your site builder puts code on every page, usually a footer or custom-code setting.
The embed measures itself and tells your page how tall it needs to be at each step. One scrollbar on your page, not two.
Paying, and coming back to your site
- Card payment happens on your payment provider's own secure page. Those pages refuse to run inside another site, so the customer leaves your page briefly to pay
- Fill in Send customers back to this page after paying at the bottom of the panel with the address of the page holding the embed, and they come straight back to it, to the confirmation
- Leave it empty and they finish on your Velobook booking page, which confirms the booking and offers a link back to your site
Older snippets were a dozen lines rather than one, and a page running one cannot be handed the payment result, so customers on it always finish on your Velobook page. Copy the current snippet and replace the old one. The current snippet is one line and improvements reach it without you pasting again.
Where the popup script goes
The script line has to load on every page that carries a booking button, so it goes in your site's site-wide code setting:
- Shopify: Online Store → Themes → Edit code → `layout/theme.liquid`, immediately before the closing `</body>` tag.
- Squarespace: Settings → Advanced → Code Injection → Footer.
- Wix: Settings → Custom Code → Add code to all pages, set to Body - end.
- WordPress: your theme's footer template, or any "insert headers and footers" plugin.
Adding a Book now button
The script does not put a button on your site. It makes the buttons you already have open a popup. If you have no booking button yet:
- 1In your website builder, add a button: a Button block on Squarespace or WordPress, a Button element on Wix, or a button block in the Shopify theme editor.
- 2Set its link to your booking address, shown in the Website embed panel. It looks like `velobook.app/your-shop`, or `velobook.app/your-shop/rent` for a hire button.
- 3Save and load the page. Clicking it should open the popup.
Use your builder's own button rather than raw HTML where you can: it picks up your site's fonts, colours and spacing. The optional line of HTML in the snippet is a fallback for sites with nowhere to add one, and renders as a plain link until you give it your theme's button class.
A menu item, an image, or a button your builder cannot point at a URL can still open the popup: add `data-velobook-book` to the element. To send one button straight to a surface, name it, as in `data-velobook-book="rentals"`. With your own JavaScript, `window.Velobook.open()` does the same.
The message button
The same page carries a second widget: a Message us button that lets a visitor start a conversation without booking. It has its own snippet and its own on switch, and is off until you turn it on. See the Message us button.