Widget Integration

Live demo

Customise the options below and see the widget update in real time. Try selecting dates, guests, and accommodation—it’s fully functional.

HolidayFox demo destination.Open current demo in a new tab →Copy URL

Widget URL

The widget is loaded from https://widget.holidayfox.com. The path and query parameters determine the destination and behaviour.

Path (required)

/e/{destinationId}/{slug}

• destinationId — Your HolidayFox destination ID (e.g. dest-Shy1y0fe5ZkE)
• slug — URL-friendly destination name (e.g. holidayfox-demo)

You can copy these from your HolidayFox dashboard or from an existing widget URL.

Example

https://widget.holidayfox.com/e/dest-Shy1y0fe5ZkE/holidayfox-demo

Open this URL in a new tab →

How to embed

<iframe
  src="https://widget.holidayfox.com/e/YOUR_DESTINATION_ID/your-destination-slug?layout=vertical&whiteLabel=1"
  width="100%"
  height="480"
  frameborder="0"
  title="HolidayFox Booking Widget"
></iframe>

[holidayfox_widget destination="YOUR_DESTINATION_ID" slug="your-destination-slug"]

[holidayfox_widget
  destination="YOUR_DESTINATION_ID"
  slug="your-destination-slug"
  acc_type="acctype-XXXX"
  layout="horizontal"
  height="480"
  width="100%"
  bo="1"
  responsive="true"
  class="my-booking-widget"
  id="hero-booking"
]

Widget options (query parameters)

Append these as query parameters to the widget URL (e.g. ?layout=horizontal&whiteLabel=1). When using the WordPress shortcode, the plugin maps shortcode attributes to these URL parameters for you.

https://widget.holidayfox.com/e/DEST_ID/SLUG?layout=vertical&whiteLabel=1&primaryColor=%231f3327&secondaryColor=%23c7a35c&textColor=%231e1b16&backgroundColor=%23f6f3ee

Layout by use case

Pick a layout and height that fits where the widget sits on your page.

Iframe dimensions and behaviour

• Width — Use 100% for full container width, or a fixed value (e.g. 800px).
• Height — The widget needs enough vertical space. Common values: 420–480 for a hero/sidebar card, 600 or more for a full booking section. The WordPress plugin default is 600; the HolidayFox Caravan theme uses 420 in the hero and 480 in the booking section.
• frameborder — Set to 0 for a borderless embed.
• title — Set to e.g. “HolidayFox Booking Widget” for accessibility.
• loading — lazy is supported if you want to defer loading when the iframe is below the fold.

WordPress: shortcode, block, or direct iframe

Our HolidayFox Booking Widget plugin provides:

• Shortcode — [holidayfox_widget ...] for use in any block or classic editor, or in theme templates via echo do_shortcode('[holidayfox_widget ...]');
• Gutenberg block — “HolidayFox Booking Widget” in the block inserter; configure in the sidebar.
• Global settings — In HolidayFox → Settings you can set default height, width, layout, base URL, and responsive behaviour. These apply when the shortcode or block does not override them.
• Responsive — When responsive="true" (plugin default), the plugin adds CSS so the iframe scales with the container on smaller screens.

PHP helper

The plugin exposes holidayfox_widget($destination, $slug, $args) for template code. Pass your destination ID and slug, plus an optional array (e.g. layout, height, acc_type).

<?php
echo holidayfox_widget('dest-Shy1y0fe5ZkE', 'holidayfox-demo', [
  'layout' => 'vertical',
  'height' => '480',
  'whiteLabel' => '1',
]);
?>

Direct iframe in templates

In our HolidayFox Caravan theme we embed the widget with a plain <iframe> in the template, passing destination->id and destination->slug from your theme options, plus layout, whiteLabel, and colour params to match the design. That approach works in any theme if you have the destination data available in PHP.

<iframe src="https://widget.holidayfox.com/e/<?php echo $destination->id; ?>/<?php echo $destination->slug; ?>?layout=vertical&whiteLabel=1&primaryColor=%231f3327&secondaryColor=%23c7a35c&textColor=%231e1b16&backgroundColor=%23f6f3ee" style="width:100%" height="420" class="holidayfox-widget" frameborder="0" title="HolidayFox Booking Widget"></iframe>

// $destination from theme options (e.g. $holidayfox_info->destination)

Troubleshooting

The widget doesn’t load or shows a blank area

Check that destination ID and slug are correct and match a live HolidayFox destination. Open the iframe src URL in a new tab; you should see the widget or a clear error. If your page is HTTPS, the widget loads from https://widget.holidayfox.com; mixed HTTP/HTTPS can cause blocks in some browsers.

Colours (primaryColor, textColor, etc.) don’t change

In the URL, hex values must be encoded: use %23 instead of #. For example #1f3327 becomes primaryColor=%231f3327.

Where do I get the destination ID and slug?

From your HolidayFox partner dashboard once your destination is set up. You can also take them from an existing widget URL: the path /e/dest-xxxx/slug-here gives you dest-xxxx and slug-here. Not yet a partner? Get in touch and we’ll provide them when your destination is created.

The iframe is too short on mobile

Increase the height attribute, or use the WordPress plugin’s Responsive option. For a custom setup, give the iframe container a min-height or aspect-ratio in CSS so it has enough space on small screens.

Pre-selecting an accommodation type (accType) doesn’t work

accType must be the accommodation type ID (e.g. acctype-PgnTST2XAuGU), not the destination ID. Find it in your HolidayFox dashboard or in the URL when viewing a specific accommodation on the main HolidayFox site.