Embed Your Booking Page in Your Website

In Univents, your booking page works as a standalone public page. But you can also embed it directly into your existing website, for example on a subpage for catering, events, or tastings. Univents generates the iFrame code you need ready to use, so you don't have to write anything yourself.

What You Need First

Before you can embed it, you need a finished booking page. If you don't have one yet, create it first. Open your booking pages overview and click New Booking Page in the top right. There you give it a name, pick a design (Webshop, Inquiry, or Stepper), choose the bookable products and locations, and decide which questions your customers should answer.

For the embedded page to be visible to your customers, it has to be active. You can tell from the status badge next to the name in the overview: live means published, draft means not yet visible. Click the badge to switch between the two states. A page in draft mode won't show up in the iFrame.

Get the Embed Code

You'll find the embed code right in the booking pages overview. Each page has a row of action icons along the right edge.

1. Open your booking pages overview.
2. Find the row for the booking page you want.
3. Click the code icon on the right with the tooltip Copy embed snippet.
4. Univents copies the ready-made iFrame code to your clipboard and confirms with the message Embed code copied.

The copied code looks roughly like this:

<iframe
  src="https://buchen.univents.app/embed/your-workspace/your-page"
  width="100%"
  style="border:none;min-height:700px"
  loading="lazy"
></iframe>

If you only need the direct link instead of the iFrame code, use the icon with the tooltip Copy booking link instead.

Add the Code to Your Website

Now you paste the copied code into the spot on your website where the booking page should appear.

1. In your website builder, open the page where the booking should appear.
2. Add an element for custom HTML code. In WordPress this block is often called "Custom HTML"; in other systems it's "Code", "Embed", or "HTML".
3. Paste the copied iFrame code into this element.
4. Save and publish the page.

The width is set to width="100%" in the code, so the booking page automatically adapts to your content area. The min-height:700px sets the minimum height. If your booking page is long and looks cut off at the bottom, increase this value.

Test and Check

Before you hand the embedded page to customers, take a moment to check the result.

1. Open the page on your website where you added the code.
2. Check that the booking page displays in full without being cut off.
3. If you want to preview the behavior in Univents beforehand, click the icon with the tooltip Open live preview in the overview to see the page in a new tab.
4. Run a test inquiry as a trial so you can be sure the booking comes through to you cleanly.

If you then want to change something about the content, design, or questions, click Configure in the booking page's row. Changes automatically appear in the already-embedded version too, so you don't have to copy the iFrame code again.

Frequently Asked Questions

Do I have to copy the code again after every change? No. The iFrame always shows the current state of your booking page. Content changes made via Configure are immediately visible in the embedded version too.

The page is cut off at the bottom — what should I do? Increase the value at min-height:700px in the pasted code, for example to 1000px. That gives the booking page more room.

Nothing shows up in the iFrame for my customers. Check whether the booking page has the status live. If it's set to draft, it won't be displayed publicly. Click the status badge to activate it.

Where do I find these instructions again? In the overview, each page has a book icon with the tooltip Open embed guide that takes you straight here.