Add booking to your website

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

Open the event type 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 event types 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 Plain iframe version from the Embed tab. It needs no script at all, at the cost of a fixed height that may scroll inside.

The widget puts the whole booking flow inside your own page, so a visitor never leaves your site. There are three versions of the code; they all go in the same place and the first one suits most sites.

In short

Open the event type, 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 → Event types and open the event type.
Choose the Embed tab. It appears once the event type 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.
Popup 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>.
Plain 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 event type, 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 event type 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 Plain iframe version instead.
It shows "Not found": The event type 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 event type, 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 event type 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 event type, so the code in your site never needs updating.

Can I put several event types 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 Plain 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 28 September 2026.