Add booking to your website

Q: How do I add a booking calendar to my WordPress site?

Open the service in Business Box, go to the Embed tab, copy the Inline code, and paste it into a Custom HTML block on your WordPress page. A Paragraph block will show the code as text instead of running it.

Q: Can I put several services on one page?

Yes. Paste each one’s code where you want it. The embed.js script line only needs to appear once on the page.

Q: My site builder removes the script. What do I do?

Use the Fixed-height form (iframe) version from the Embed tab. It needs no script at all, at the cost of a fixed height that may scroll inside.

Let customers book without leaving your website. Copy the booking code from Business Box into your site to display a booking form.

In short

Open the service, go to the Embed tab, press Copy under Inline, and paste it into your page where you want the calendar to appear.

Getting the code#

Go to Booking → Services and open the service.
Choose the Embed tab. It appears once the service has been saved at least once.
Adjust the appearance if you want to (below), then press Copy beside the version you want.
Paste it into your website.

Which of the three to use#

Inline: The booking flow appears where you put the code and grows to fit, with no inner scrollbar. This is the one to use unless something stops you. Good on a "Book an appointment" page.
Booking button: A button that opens booking in an overlay on top of your page. Good in a header or beside a price. The button text is yours to change: edit the words between > and </button>.
Fixed-height form (iframe): For site builders that strip out scripts. It has a fixed height, so the booking flow may scroll inside its own box. Use it only if the first two do not work.

Making it match your site#

All of this is saved with the service, so the code already pasted into your site never needs changing again.

Hide the event name, duration and price: Tick this when your own page already says all of that. It leaves just the calendar and the form.
Colours: Background, text and accent. The defaults read well on any site; every other shade is mixed from these three. Keep real contrast between background and text or the form becomes hard to read. Reset puts them back.
Preview: A live copy showing your current settings, including changes you have not saved. Save the service to apply them to every site the widget is on.

Pasting it into common site builders#

You are looking for a way to add custom HTML or an embed block.

WordPress (block editor): Add a Custom HTML block and paste. Do not use a Paragraph block — it will show the code as text.
WordPress (Classic editor): Switch from Visual to Text and paste.
Wix: Add → Embed → Embed a widget, then Enter code.
Squarespace: Add a Code block and paste. Leave the type as HTML.
Shopify: Add a Custom Liquid section, or paste into a page while the editor is showing HTML.
STUDIO, Jimdo, Ameba Ownd: Look for the embed or HTML element in the element list.
A hand-built site: Paste it into the HTML where you want it to appear.

The script line, once per page

Inline and popup both end with a <script src="https://app.marubox.jp/embed.js"> line. If you put several widgets on one page you only need that line once, though leaving duplicates does no harm.

Paid bookings inside an embed#

Card details are never typed into your page. When the visitor confirms a paid booking, the widget hands the whole browser window over to Stripe's secure payment page — that is Stripe's rule, and it is the right one. They see Taking you to secure payment… and a Continue to payment link if their browser blocks the automatic handover.

After paying they land on their own booking page rather than back inside your site. Free bookings stay in the frame throughout and finish with You're booked and a link to view or change it.

If the widget does not appear#

Nothing shows at all: Your site builder has probably stripped the script. Use the Fixed-height form (iframe) version instead.
It shows "Not found": The service is hidden, invite-only, or its link has changed. Check Visible on your booking page and Who can book it on the Details tab, then copy the code again.
No times are offered: Not an embed problem. Check why no times are showing.
The colours look wrong: Colours are saved with the service, so press Save in the editor after changing them. The preview shows unsaved changes; your live site shows saved ones.

Common questions

How do I add a booking calendar to my WordPress site?

Open the service in Business Box, go to the Embed tab, copy the Inline code, and paste it into a Custom HTML block on your WordPress page. A Paragraph block will show the code as text instead of running it.

Can customers pay without leaving my website?

Not quite, and that is deliberate. Stripe does not allow its payment page to run inside another site’s frame, so the browser moves to Stripe’s secure page for the card details and then to the customer’s own booking page. Free bookings complete entirely inside your page.

Can I change the colours of the booking widget?

Yes — background, text and accent, on the Embed tab, with a live preview. They are saved with the service, so the code in your site never needs updating.

Can I put several services on one page?

Yes. Paste each one’s code where you want it. The embed.js script line only needs to appear once on the page.

My site builder removes the script. What do I do?

Use the Fixed-height form (iframe) version from the Embed tab. It needs no script at all, at the cost of a fixed height that may scroll inside.

Last reviewed 16 October 2026.