← All guidesAPI Reference

Adding Turneo Elements to your Hotel Website

What do you need to start?

Before you get started with this guide you will need to:

  • Have an active Experience Store in your Turneo profile
  • Have access to your website's CMS system, and the ability to add custom HTML code into it

Overview

This guide walks you through setting up a Turneo Element and adding it to your own hotel website, so your guests can find and book their perfect experiences directly on your website. A Turneo Element is a JavaScript widget that's fully embedded into your hotel website.

Creating an Element

To create an element, log into your Turneo account and go to the Elements tab. There you can create a new Element and get the code for it.

If no Elements exist yet, you'll be able to create a new one and follow the wizard to configure the experiences listed as well as the styling of the Element. Once it's live, open the dropdown view and copy the code shown for the Element.

Adding the Element to your website

Once you've copied the code, log into your website's CMS system and add the HTML code to the page.

The exact way HTML code gets added to your website depends on your CMS system, but most modern systems have an option to add an HTML block into which you can paste the code.

External guides to adding custom HTML for popular website CMSs:

The Element is responsive, so its appearance adjusts to the size of the viewport. For best results, place the element code inside a container that has the same width, padding, and margins as your regular page content.

Maximum width

Set the maximum width of the container to 1280px — beyond that, images become stretched and oversized.

Example video: adding the Element to a hotel website

https://youtu.be/F8lm3U06Chw

Multiple elements on one page

You can have multiple elements on one page — see our demo page for Jade Beach Resort. To do this, add the <turneo-element></turneo-element> tag wherever on the page you want a different element to render.

Load the script once

When showing multiple Elements on one page, you only need to load the script once, after the last element on the page.

Changing the language

By default, the widget shows in English. To override this, pass a language attribute. Supported values:

  • German — "de"
  • Italian — "it"
  • Croatian — "hr"
  • Slovenian — "sl"
  • Portuguese — "pt"
<turneo-element element-id="659bcd96855b71d278066ac3" language="de"></turneo-element>

Prefilling checkout fields

Turneo Elements are often embedded on pages within a logged-in environment, where the hotel already knows certain guest information (e.g. first and last name). To improve the checkout experience, you can pass this information via URL query parameters so the checkout form is pre-filled:

  • First name — turneoCheckout_firstName
  • Last name — turneoCheckout_lastName
  • Phone number — turneoCheckout_phone
  • Email — turneoCheckout_email
  • Reseller reference (e.g. loyalty ID) — turneoCheckout_resellerReference

Example:

https://www.jadebeachresort.com/experiences?turneoCheckout_firstName=John&turneoCheckout_lastName=Smith&turneoCheckout_email=john.smith@gmail.com&turneoCheckout_phone=+385992101824&turneoCheckout_resellerReference=TEST_REF_1

Filtering dates and categories via query parameters

Turneo Elements support prefilling date fields directly from URL query parameters. This lets you load pages with availability already filtered for specific dates, or pre-populate the booking form.

Elements: filter by category

Filter Elements to show only experiences from specific categories, using a comma-separated list of category names.

Query Parameter Description Format
turneo_categories Comma-separated list of categories to filter by Category1,Category2,...

Example:

https://www.jadebeachresort.com/experiences?turneo_categories=Wellness,Adventure

Elements: prefill date range

When embedding Elements (e.g. Collections, Carousels, Grids), you can pre-filter experiences by providing a date range in the page URL. These values prefill the date range selector and filter the Element's content.

Query Parameter Description Format
turneo_startDate Start date of the availability filter YYYY-MM-DD
turneo_endDate End date of the availability filter YYYY-MM-DD

Example:

https://www.jadebeachresort.com/experiences?turneo_startDate=2025-07-10&turneo_endDate=2026-07-15

You can combine category and date filtering:

https://www.jadebeachresort.com/experiences?turneo_startDate=2025-07-10&turneo_endDate=2026-07-15&turneo_categories=Wellness,Adventure

Booking page: prefill reservation date

To prefill the reservation date on the booking page:

Query Parameter Description Format
turneo_reservationDate Prefills the booking date YYYY-MM-DD

Example:

https://www.jadebeachresort.com/experiences?turneoExperience=8efde4f9-916b-4612-b927-4a4b898183a9_Wine-tasting&turneo_reservationDate=2026-07-12

Turneo Stores

The same functionality works on Turneo stores, using the query parameters without the turneo_ prefix:

Store Parameter Description Format
startDate Start date for filtering availability YYYY-MM-DD
endDate End date for filtering availability YYYY-MM-DD
reservationDate Prefilled reservation date YYYY-MM-DD

Demo Element

To try adding an Element to your website before creating one in the Turneo system, use the demo element code below. Note that this element won't be styled to match your website's colors and styles.

<turneo-element element-id="659bcd96855b71d278066ac3"></turneo-element>
<script src="https://widget-turneo.vercel.app/turneo-widget.iife.js"></script>