How to embed the new Webshop via iFrame

What does it mean?

This article explains how you can add your Palisis Webshop to your own website using an iFrame. This lets visitors view your tours or activities, choose a date, book and pay directly from a page on your website, while Palisis manages the booking process in the background.

Use this guide to understand the recommended setup, what to ask your web designer or agency to implement, and which webshop settings can help create a smoother booking experience for your customers.

General Knowledge

Palisis Webshop

The Palisis Webshop is an easy-to-integrate online store that allows tour and activity operators to sell experiences directly from their own website.

When embedded correctly, customers can browse offers, select dates, complete the booking flow and pay without feeling that they have left the operator's brand environment.

iFrame

Think of an iFrame, or Inline Frame, as a window inside one website that displays content from another website.

Instead of sending the customer away from the tour operator's site to a separate booking page, an iFrame allows the Palisis Webshop to appear directly inside the operator's existing page.

Customers usually choose this setup for three main reasons:

• Brand consistency: the booking process stays visually connected to the operator's website and domain.
• Reduced friction: fewer redirects can make the purchase path feel faster and more trustworthy, which can support conversion.
• Easy integration: the operator's website can display the webshop while Palisis continues to handle the booking logic behind the scenes.

Best practices

Embedding the webshop in an iFrame usually works best when the webshop is configured specifically for that context. The recommendations below help create a cleaner, more seamless experience for customers.

To adjust the webshop settings, open the webshop configuration and select the Advanced tab. From there, enable or disable parameters such as layout, colour and booking-process behaviour so the embedded webshop better matches the customer's brand and website design.

Recommended settings:

1. Hide the logo: hide the Palisis logo when the webshop is already embedded inside the operator's branded page. This avoids duplicated branding and creates a more white-label experience.

   

2. Use a book-direct URL: link the iFrame to the most relevant offer or booking entry point whenever possible. This reduces unnecessary navigation and gives customers a faster path to purchase.

   

   To get the book-direct URL, go to the Offers tab, open the offer in a new page using the external-link icon, and copy the URL. The direct offer link will look similar to https://example.palisis.com/?offer-direct=r-7177.

   
   

3. Hide contact information: remove contact details from the webshop interface if the operator already provides them on a dedicated Imprint or Contact page. This keeps the checkout area cleaner and avoids duplicate information. Reference: How to hide the contact details on the new Webshop

   

iFrame Resizer integration

The Palisis Desktop engine uses a third-party tool called iFrame Resizer to help older embedded webshop implementations automatically adjust their height inside the hosting page. For the New Webshop, do not invoke or target the iframe resizer script for the iframe container that hosts the new webshop.

The Palisis Desktop engine uses a third-party tool called iFrame Resizer to help the embedded webshop automatically adjust its height inside the hosting page.

The tool is available on GitHub: https://github.com/davidjbradshaw/iframe-resizer. As part of the Desktop engine setup, Palisis links and serves the JavaScript file iframeResizer.contentWindow.min.js with each Desktop engine instance. This is the only prerequisite from the Palisis side for using this tool with the hosting page, meaning the customer's page that embeds the iFrame.

If the operator embeds both the old webshop and the New Webshop on the same website, the web designer must not apply iFrame Resizer globally to all iframes. Bind it only to the specific old-webshop iframe by using an explicit iframe id or a dedicated CSS class that does not match the New Webshop iframe.

Sample code:

<!-- Old webshop iframe: resize this one only -->
<iframe id="oldWebshopIframe" src="https://old-shop-example.palisis.com/" style="width:100%; border:none"></iframe>

<!-- New Webshop iframe: do not target this with iFrame Resizer -->
<iframe id="newWebshopIframe" src="https://new-shop-example.palisis.com/" style="width:100%; border:none"></iframe>

<script>
  iFrameResize(
    { checkOrigin: false, heightCalculationMethod: 'taggedElement' },
    '#oldWebshopIframe'
  );
</script>

Good to know

Palisis provides the booking engine, but we do not build or maintain the customer's website. Customers should work with their own web designer or web agency to place the iFrame correctly, adjust the surrounding page design and test the result across devices.

For maximum security and a faster setup, create a dedicated sub-user account for the designer instead of sharing an existing user account. This gives the designer the access they need for the integration while allowing the customer to keep control over permissions and shop settings. User-management guidance: How to configure new Users (User-Management)

FAQs