Widgets on your own website

What a widget is

A widget shows your Unitlify shop directly on your own website. The guest stays on your site, looks for an offer, chooses a date and tickets and pays, without switching to unitlify.de. Technically, the widget is your shop in a frame: all offers, prices, payment methods and legal texts come from Unitlify, colours and fonts from the shop designer.

You manage widgets under Booking system → Website integration. You need the permission "Website integration" for this.

Step 1: Allow the domain

Before a widget runs on your website, the website's domain must be entered under Allowed domains. Without approval, the widget shows an error message instead of the offers.

• Enter without https://, for example my-company.com. Whether with or without www. makes no difference.
• If the widget runs on a subdomain such as shop.my-company.com or tickets.my-company.com, enter that subdomain. my-company.com alone is not enough for that.
• The website must run over https.
• After entering, it can take up to a minute until the approval takes effect everywhere.

Step 2: Create the widget

Click New widget. The editor guides you through five steps: widget type, settings, design, visible content, save.

The four widget types

Settings

• Language: German, English, French or Spanish. This is the fallback language. The widget first follows the language of your website (the page's lang attribute), then the guest's browser language, then this setting.
• SUB-ID: a freely selectable identifier of up to 60 characters by which you can analyse bookings later. More on this below.
• Name and description: for you only; they appear in the widget list and in the booking detail view.
• Button: button text (up to 40 characters, otherwise "Book now"), target (booking box, product page, catalog) and whether the button floats at the bottom right or sits on the right side.

Design

Width in pixels (empty = full width), alignment, height (grows with the content or fixed), frame and corner radius. For the catalog additionally tiles or list, tiles per row and whether the first offer is highlighted. On mobile there is always one tile per row.

A fixed height brings its own scrollbar inside the widget. "Grows with the content" is almost always the better choice.

Colours, font and tile shape are not set here but in the Shop designer. They apply to the shop and all widgets together.

Visible content

For catalog and product you determine what is visible: image, price, duration and place on the tile; heading, search bar, filters, result count, vouchers and trust bar around it; gallery, description and highlights on the product page. In the widget, the surrounding elements are off by default, except vouchers. Filters only appear when there is something to filter (at least two locations, languages or prices). The widget only shows vouchers with "All offers".

For the booking widget you only choose whether the calendar, remaining tickets and sold-out categories are shown.

Step 3: Insert the embed code

After saving, the editor shows the embed code:

<unitlify-katalog widget-id="YOUR-WIDGET-ID"></unitlify-katalog>
<script src="https://unitlify.de/widget/v1/katalog.js" defer></script>

Insert both lines at the place on your website where the widget should appear.

• WordPress, Elementor, Wix, Squarespace: insert the code into an HTML element (not into a text block).
• Several widgets on one page: each widget gets its own <unitlify-katalog> element. The script only needs to be on the page once, but a second time does no harm.
• Speed plugins such as WP Rocket, LiteSpeed Cache or Autoptimize: exclude katalog.js from "Delay JavaScript execution", otherwise the widget only appears after a click on the page.

Overriding settings in the code

You can override design settings directly on the element without creating a second widget in the dashboard:

<unitlify-katalog widget-id="…" max-width="640" align="center" frame="border" lang="en"></unitlify-katalog>

The attribute lang="de" is the quickest way if the widget appears in the wrong language, for example because your website has set lang="en-US".

What happens after the booking

The guest stays on their confirmation in the widget; your website is not left. With the button widget, the next opening starts fresh again.

For your web agency: after a completed booking, the widget fires the event unitlify:booking on the element, without personal data. This can be used, for example, to trigger a conversion goal in analytics. The event means "booking created", not "paid": it also fires for bank transfer and pay on site. For payment methods with redirection to the provider (Klarna, iDEAL) it is not fired.

SUB-IDs: analysing bookings by origin

Every widget can carry a SUB-ID, for example homepage, landingpage-summer or partner-hotel-x. With every booking and every voucher purchase via the widget, the SUB-ID is stored on the booking. Several widgets may carry the same SUB-ID; they are then analysed together.

You see the results in three places:

• Website integration: per widget bookings, participants and revenue for 30 days, 90 days, 12 months or all time, below that the table "By SUB-ID". The revenue includes all non-cancelled bookings, i.e. also those not yet paid.
• Bookings list: filters "All widgets" and "All SUB-IDs". The filters only appear once widgets or SUB-IDs exist.
• Export: columns "Widget (embed)" and "SUB-ID".

The SUB-ID is copied at the time of booking. If you change it later, old bookings keep the old identifier. If you delete a widget, its bookings lose their link to the widget; the SUB-ID remains on the booking but no longer appears in the filter as long as no other widget carries it.

Payment methods in the widget

The same payment methods and rules apply in the widget as in the shop, see Setting up payment methods. For Apple Pay you must additionally enter the domain of your website under Payment methods → Registered domains.

Preview

The preview in the editor shows the saved state. You see unsaved changes neither in the preview nor on your website. After saving, it can take up to a minute on your website until the new version appears.

Troubleshooting checklist

• Error message instead of offers: domain not allowed, or only the main domain entered instead of the subdomain. The message names the domain that is missing.
• Widget stays empty: website runs over http instead of https, or a speed plugin delays the script.
• Wrong language: check the lang attribute of your website or set lang="de" on the element.
• Change not visible: not saved, or still within the one-minute cache.
• No vouchers in the catalog: vouchers only appear with "All offers".
• Apple Pay missing in the widget: add the domain under Payment methods → Registered domains.
• Bookings missing in the widget statistics: the booking did not come via the widget but via the shop link or another channel.