Install the booking button on your website (script and button code)
20 min read
You do not need a programmer for this. You copy two short pieces of code from Rentalbuddy and paste them into your website: one piece loads Rentalbuddy, the other marks where the button goes. This guide shows where each one goes, why the page address you save matters, and what to check when the button doesn't show.
If you don't want to touch code at all, you can instead send customers to a Rentalbuddy-hosted booking page with a link or a QR code — see the guide on direct links and QR codes.
The two pieces, and why you need both
| Piece | What it does | Where it goes |
|---|---|---|
| Copy booking engine code (the script) | Loads Rentalbuddy on your website | Once, in your website's site-wide code area (footer / "before </body>") |
| Copy button code (the button) | Marks the spot where the button appears | On the page, in an HTML / Embed / Code block |
Neither works alone. The button code without the script leaves an empty spot; the script without the button code shows nothing. Copying only the button code is the most common mistake. The one exception: the links in your booking emails (open the lock, return, extend, move) only need the script on the page they open — but that page is the one you save as your website address, so keep the script site-wide.
Before you start
- The booking button is set up per location. Do this for each location that should be bookable from your website.
- Some website builders cannot run outside scripts at all (Google Sites is one operators have run into). In that case use Booking link or the Rentalbuddy website instead.
- Make sure the location is actually bookable — products, locks and open dates. The button can be installed perfectly and still have nothing to sell.
Step 1 and 2: choose "My own website" and "Embedded on your website"
- In the left menu open Locations and click the location.
- Open the Book button tab. The card is headed Get live in 2 minutes — "Choose how customers reach your booking."
- Under Where do customers book? choose My own website ("Use your existing site and send customers to booking from there."). The other option, Rentalbuddy website (marked Recommended), is a hosted page with no website of your own needed.
- Under How do customers book from your website? choose Embedded on your website (marked Advanced — "Add a booking button to your site. Customers book without leaving your website."). Booking link (marked Simple) instead gives you a link to your Rentalbuddy page to put in a menu or button; no code needed.
Is the button live? The status at the top
As soon as you choose Embedded on your website, the top of the steps shows whether your booking button has been seen on a website. Rentalbuddy knows because the button reports the page it loads on.
- "The booking button is live on yoursite.com/booking", with how long ago it was last seen. One line per website the button was seen on.
- "The booking button hasn't been seen on a website yet. Once it's in place, open that page once and it shows up here."
- Check again refreshes the status. A website seen before is updated about once an hour, so "last seen" can lag behind a little. Tests on your own computer (localhost) are not counted.
Under it: "To check a page, add ?rbCheck=1 to the end of its address: a small panel shows what is right and what is missing." Open the check on your website does that for the page address you saved. See Run the button check below.
Someone else runs your website? Get a link to send
Under "Someone else runs your website?" press Get a link to send. Rentalbuddy creates a link and copies it (Link copied): "Send them this link. It has the install steps for this location and shows when the button is live. No login needed." The page it opens is headed "Add the booking button to your website" and has the code to copy and the same live status. Send it to your web designer or agency instead of forwarding screenshots. You need permission to change locations to create the link.
Step 3: tell Rentalbuddy which website builder you use
Under Which website builder do you use? pick yours: WordPress — block editor (+ button to add blocks), WordPress — page builder (e.g. Elementor or similar), WordPress — I'm not sure, Wix, Squarespace, GoDaddy Website Builder, Webflow, Jimdo, IONOS (MyWebsite), or Other / I'm not sure.
The code is the same for every builder — the choice changes the instructions shown next to the next steps so they match your builder's menus. The next steps only appear after you pick one. Your choice is remembered in this browser.
Step 4: add the booking engine to your website (once)
In Add the booking engine to your website — "Loads Rentalbuddy on your website. Add this once per website address." — click Copy booking engine code. You get one line like:
<script defer src="https://plugin.rentalbuddy.io/static/js/main.js"></script>
Always use the copy button rather than typing it. Paste it into your website's site-wide code area, at the end of the page (often called custom code, header/footer code, tracking scripts, or "before </body>"). Then save and publish your site.
Where to look in common builders (the instructions on the tab have the details; menus change, so treat these as a starting point):
- WordPress — no built-in field. Install a small free plugin such as "Insert Headers and Footers" or "WPCode", paste into its Footer / "before
</body>" field, and clear any cache plugin afterwards. With Elementor or similar, don't paste it on a single page only. - Wix — Site & app settings → Custom code (sometimes under Tracking & Analytics), placement "Body – end", apply to All pages, then Publish.
- Squarespace — Settings → Advanced → Code injection → Footer. Not every Squarespace plan includes code injection.
- Webflow — Site settings → Custom code → Footer code, then publish.
- GoDaddy, Jimdo, IONOS — look in the site settings for header/footer HTML, custom code or tracking; some plans don't allow custom code.
Paste the script only once per website. One website with many pages: once, site-wide. Several separate websites: once on each. Several copies have in the past sent customers back to the start page after paying — if you are unsure, search your site-wide code fields for
rentalbuddyand keep just one.
Step 5: place the button and save your page address
In Place the button where it should show — "Add the button on the page where you want booking, then copy the snippet below."
The page address: "URL where book button is implemented"
Enter the full address of the page where the button will be, for example https://yoursite.com/booking.
- It is required for embedded booking — "Required for embedded booking."
- It must start with
https://orhttp://— otherwise "The URL must start with https:// or http://." - It must not contain a
?— "Your page address should not contain a ? (this often happens if you pasted a preview or test link)." Delete everything from the?onward. - If the location also has a Rentalbuddy page, Use Rentalbuddy URL fills in that page's address instead.
Why this address matters so much: every link Rentalbuddy sends in booking emails — open the lock / see the PIN code, return, extend, move start time — opens this page and the booking window on top of it. If the page doesn't have the script (and your button), customers land on it and never reach their PIN code or the return step. Links in emails already sent follow the address you have saved now, so correcting it fixes old emails too. Rentalbuddy drops a trailing / from the address when it builds these links; if your page only opens with the slash (the email link gives "Not found" or "Forbidden"), ask your web host to make it work without the slash too. More in the guide on booking links that go to the wrong page.
The address also counts for Apple Pay: Rentalbuddy registers it as a payment domain in your Stripe account automatically (a bare domain also gets its www. version) when you connect Stripe, when you save a new address, and every night. It only ever adds domains; one you switched off in Stripe stays off.
The button code
Click Copy button code on the Standard booking row. You get one line like:
<div id="rentalbuddy-checkout" data-site="your-location-id"></div>
Paste it on the page itself, at the exact spot where the button should appear, in an HTML / Embed / Code / Custom HTML block — not in a text block (then the code shows up as text on the page) and not in the site-wide settings. Save and publish the page.
Standard booking — "Works for products and events. If your location offers both, guests choose what to book; if you only offer one, they go straight into that flow." This is the right choice for almost everyone.
Each row also has Preview (opens your website with the booking window, so you can check the embedding — it needs a valid, saved address) and QR tools (QR code, Copy booking link, Download QR), covered in the guide on direct links and QR codes.
A separate membership button (Membership purchase)
If the location sells a membership, a Membership purchase row (marked Optional) appears under Standard booking: "The standard booking button sells memberships too. Use this one if you want a separate membership button or link on your website." Its button opens straight on your memberships. If no membership can be bought at this location, the row sits under Options for one type of booking marked Not available, with the reason — for example "Memberships are not switched on for this account." or "No membership is for sale at this location yet. Add a membership product to use this option." See the memberships guide for setting them up.
Options for one type of booking
The collapsed section Options for one type of booking holds Product booking and Event booking. Use them only if your location offers both products and events and you want a button that skips the choice and opens straight on one of them.
When the location stops selling that type
If a Membership purchase, Product booking or Event booking button (or link) is still on your website after the location stops selling that type, customers don't land on an empty list. The booking window opens as the Standard booking button would: on the choice between what the location sells, or straight into the only option. You can leave the old button in place, but replacing it with the Standard booking code avoids a button text that no longer fits.
Step 6: check that it works
- Press Save at the top of the location page.
- Open your live page in a private/incognito window, on a computer and on a phone, so you see what customers see without cache.
- Back on the Book button tab, press Check again. The status should now say "The booking button is live on …" with your website.
- If it doesn't, run the button check (below) on that page.
- Click Preview on the row you installed. If it says "Important! This preview uses the website address above. Save your location to store that address.", save first.
- Book once yourself with Make a test booking in the location's top bar, next to Save (it stays greyed out while the location can't take bookings yet or the tab has unsaved changes): choose Free test or Test with a real payment, press Create test link, then Open booking page. Open the access link in the test confirmation email too — it should open your page with the booking window. The test is cancelled automatically 30 minutes after you make it and is left out of your numbers. The setup guide describes the test booking in detail.
Run the button check (?rbCheck=1)
Open your booking page with ?rbCheck=1 added to the end of its address, for example https://yoursite.com/booking?rbCheck=1, or press Open the check on your website on the Book button tab. A small panel, Rentalbuddy button check, appears on your page and ticks off each part (the panel is in English):
| Line | What it checks |
|---|---|
| Script loaded | the booking engine code runs on this page |
| Button element found | the page has the button code (or says "No booking button element on this page.") |
| Location set | the button code names a location (data-site) |
| Location found | the location exists and can take bookings; "This location id does not exist — copy the code again from Rentalbuddy." means the code is wrong |
| Script included once | the booking engine code is on the page only once; "The booking script is included 2 times — keep one." |
| Reported to Rentalbuddy | the page could reach Rentalbuddy, so the Book button tab can show it as live |
Fix whatever is marked as failing, publish, and run the check again. If no panel appears at all, the booking engine code isn't loading on that page: it is missing, not published, or held back by a cookie banner.
Button styling and Button text (the button on your website)
Below the steps are Button styling and Button text. They affect only the button on your website — "These settings style the book button embedded on your own website — not the booking flow that opens when it is clicked." The colours inside the booking window are the Booking theme color on the location's Booking experience tab.
Both work the same way:
- By default the location uses your account's style and text. Change those for all locations with Edit style for account / Edit text for account.
- Switch on Customize for this location to give this location its own style or text.
Button styling has Font, Button color, Shape (Sharp, Medium, Rounded), a Preview, Reset to default style, and under Advanced settings text colour, border, padding, font size, width and hover colours.
Button text has Default text and, under Advanced settings, Event text and Product text for the single-type buttons. Membership text sits next to Default text while a membership is for sale at the location. Otherwise it moves under Advanced settings, with a note saying why the membership button can't be used there; you can still edit or clear it. In Edit text for account it is always next to Default text. "Fields left empty use the default label (BOOK)." — so a button you never gave a text reads BOOK, in capitals. An empty Membership text, Event text or Product text uses your Default text first, and BOOK only if that is empty too.
Good to know:
- The button text is one text for all languages. If your website has pages in several languages, you can give a single button its own text by adding
data-buttontext="Jetzt buchen"inside its button code, for example<div id="rentalbuddy-checkout" data-site="your-location-id" data-buttontext="Jetzt buchen"></div>. - Your website's own stylesheet can still change the button: its colours and font are set on the button itself, but rules marked
!important, and things the button doesn't set (such as capitalising all text), come through. If the text shows in capitals although you typed normal letters, that is your site's theme. - Style and text changes need no new code — they show the next time the page loads.
Several locations on one website
Each location has its own button code (the data-site value differs), its own page address and its own button text. There is no single button with a location picker or map — each button opens its own location.
- Separate pages — put each location's button code on its own page and save that page's address on each location.
- One page with several buttons — paste each location's button code on the same page (the script still only once). You can save the same page address on each location: email links carry the booking, so they open the right booking. Give each button its own text with Customize for this location so customers can tell them apart.
- If you need a second page for the same location (another language, a campaign page), paste the same button code there. The saved page address is still the one the email links open.
Cookie banners: when the script is blocked
A cookie-consent tool can hold the script back until the visitor accepts cookies, so the button shows late or not at all. The tab warns: "If the booking button does not appear and you use a cookie banner, your site may be blocking the script until visitors accept cookies."
Under Advanced (only if needed) in step 4 → Cookie consent tools there are ready-made versions of the script:
- Copy for Cookiebot
- Copy for OneTrust
- Copy for Termly — and, Termly only: "if the button shows but the booking window stays empty, also add this code to your website's
<head>, above the Termly script." → Copy Termly head code.
Replace the script you pasted in step 4 with the matching version (don't add a second copy). For any other cookie tool: "in your cookie banner's settings, mark this booking script (or plugin.rentalbuddy.io) as strictly necessary or essential. You do not need to recategorize individual cookies. The booking window sets no analytics cookies unless the visitor accepted analytics in that same banner."
Google Analytics (GA4) and consent
If you entered a GA4 Measurement ID (Settings → Account → Analytics), booking activity is sent to your Google Analytics only for visitors who accepted analytics cookies in your website's banner: "Without a cookie banner, nothing is sent." The banner must be Cookiebot, OneTrust, Termly or a tool with Google Consent Mode; visitors who decline, haven't answered yet or whose browser sends a Global Privacy Control signal are not measured. "Bookings made on your Rentalbuddy website are not measured for now." Expect lower numbers than in your website's own statistics.
Meta (Facebook) Pixel and other tracking scripts
You can't add a Meta/Facebook Pixel, or any other tracking script of your own, inside the booking window today. Google Analytics (GA4, above) is the analytics built into the booking window. Meta Pixel support is planned. Your website's own pixel still sees visits to your pages, but not the steps inside the booking window.
Fonts: the booking button uses Google Fonts
The fonts in the Font list under Button styling are Google fonts. On your own website the booking button loads the chosen font from Google Fonts (fonts.googleapis.com) when the page opens. If your privacy policy or cookie information lists the outside services your website uses, add Google Fonts to it.
Script loading options (async / without defer)
If the button appears but behaves oddly, Advanced (only if needed) → Script loading offers Copy with async and Copy without defer. Replace your current script with one of them — never add it next to the old one.
What the warning marks mean ("it's still red")
- The Book button tab gets a marker (blue while you are still going through the setup checklist, amber after) with "Choose how customers book and finish book button setup." or "The URL must start with https:// or http://."
- The Book button URL column on the Locations list shows a green check or a red mark.
- The location's readiness strip lists Book button not set up.
These marks only check the saved page address. For Embedded on your website they turn fine as soon as a valid page address is saved. So if the mark stays after you installed the button: the page address field is empty, invalid, or not saved. Fill it in and press Save. The other way round, a clean mark does not prove the button is on your page. Whether it really is, the live status at the top of the steps tells you ("The booking button is live on …"), and ?rbCheck=1 shows what is missing.
Troubleshooting: the button doesn't show or doesn't work
Work down this list:
- Run the check. Open your page with
?rbCheck=1at the end of the address and fix whatever is marked as failing. No panel at all means the script isn't loading. - Are both pieces installed? Script site-wide, button code on the page. A missing script is the most common cause.
- Did you publish and clear the cache? Most builders need Publish/Update; cache plugins need clearing.
- The code shows up as text on the page — it was pasted into a text block. Use an HTML / Embed / Code block.
- Works on the computer but not on the phone — the script isn't loading on mobile: check it is in the site-wide area (not in a desktop-only section or template), clear caches, and try Copy without defer.
- Is the script there more than once? Search your site-wide code for
rentalbuddyand keep one copy. - Stopped working after a website redesign or theme update — updates often drop custom code. Paste the script and button code again. Worth checking every spring before the season.
- Is the location set to embedded booking with a valid address? Book button tab: My own website → Embedded on your website, a page address with
https://and no?, saved. - An error mentions "Site with id … not found" — the button code likely belongs to another location or account. Copy it again from this location's Book button tab.
- Is a cookie banner blocking it? Use the Cookiebot, OneTrust or Termly version, or mark the script as strictly necessary.
- Try another load option — Copy with async or Copy without defer.
- Is anything bookable? With no open period or products, customers see "This rental station is currently not available for booking." See the guide on why customers can't book anything.
- Still stuck? Send support your page address, which website builder you use, and a screenshot of the
?rbCheck=1panel.
Common questions
Why doesn't my booking button show on my website? Usually the script (Copy booking engine code) is missing or not published, or a cookie banner blocks it. Add the script once site-wide, publish, and check in a private window.
Do I need a programmer to add the book button? No. You copy two lines from the Book button tab and paste them into your website builder — the tab shows builder-specific steps. If you can't add code at all, use a booking link instead.
The Book button tab is still red even though the button is on my site.
The mark only checks the saved page address. Enter a valid URL where book button is implemented (starting with https://, no ?) and press Save.
How do I know the button is really on my website?
The Book button tab says "The booking button is live on …" once the button has loaded on a real page. Open the page once and press Check again; for details, open the page with ?rbCheck=1 at the end of its address.
Our web agency installs the button. What do I send them? Press Get a link to send on the Book button tab and send them the copied link. It has the install steps for this location and the live status, and needs no login.
Do I have to register my website for Apple Pay in Stripe? No. Rentalbuddy registers the saved URL where book button is implemented in your Stripe account by itself, when you save it and every night. A domain you switched off in Stripe stays off.
Where did Make a test booking go? It is in the location's top bar, next to Save, on every tab of the location — no longer on the Book button tab.
Can I add our Meta (Facebook) Pixel to the booking window? Not today. GA4 is the analytics built into the booking window; Meta Pixel support is planned.
Customers get "page not found" or the wrong page when they open the PIN link in the email. The email links open the saved page address. Make sure it is the page with the script and button code; saving the right address also fixes links in emails already sent.
How do I change the text or colour of the button? Use Button text and Button styling on the Book button tab — per location with Customize for this location, or for all with Edit text for account / Edit style for account. The booking window's colour is the Booking theme color on Booking experience.
Why does my button say BOOK in capitals? That's the default text when none is set. Enter your own under Button text → Default text; if it is still in capitals, your website's theme is capitalising it.
Can I have one button where customers choose between my locations? No. Each location has its own button; put several buttons on one page, one per location, and give each its own text.
Does the booking button send data to Google Analytics? Only when you have entered a GA4 Measurement ID and the visitor accepted analytics cookies in your cookie banner. Without a cookie banner nothing is sent.
Does the booking button load Google Fonts? What do I write in my privacy policy? Yes. On your website the button loads the font chosen under Button styling → Font from Google Fonts (fonts.googleapis.com), so mention Google Fonts where your privacy policy lists outside services.
We stopped selling memberships — what does our old membership button do now? It opens the normal booking flow, like the Standard booking button, instead of an empty list. The same goes for an old Product booking or Event booking button.
