Hotel Card Widget

Description

With the Hotel Card Widget you have a powerful tool to show the best price for your customers in a very simple way. This widget will load up a list of all the prices available for one specific hotel, search, city, region, or country and sorts it by the best deal for your customers dynamically. It allows you to always offer the best deal available for a specific query within your piece of content without any future maintenance required. It gives you the power to tailor each piece of content with parameters such as check-in, check-out, currency, language, etc. and make it as relevant as possible to your customers.

Use Case

This widget is useful for adding real-time price comparisons to content related to a particular hotel or location, ensuring that customers are always offered the best price possible.

Adding widget to your page

Hotel Card widget can be added to your page by embedding it with an iframe. Use query params as explained below to configure the widget correctly. Query params must be url encoded.

Embed Code

<iframe
  src="https://partners.vio.com/widgets/hotelCardWidget/index.html?partnerKey=<public_partner_key>&hotelNames=Beverly+Wilshire+A+Four+Seasons+Hotel&country=United+States&city=Los+Angeles"
  width="100%"
  height="565px"
  frameborder="0"
></iframe>

Note: widget must have fixed height 565px.

Parameters

Name	Required	Description	Example	Default
partnerKey	Yes	Public key used to embed widgets in client-side applications. Request it from your Account Manager
hotelNames	Yes*	Hotel names. For Hotel Card Widget only single hotel name is supported	Beverly+Wilshire+A+Four+Seasons+Hotel
hotelIds	Yes*	Hotel id. For Hotel Card Widget only single hotel id is supported	123
country	No	Hotel country. Search for hotels only in this country. See countries	United+States
city	No	Hotel city. Search for hotels only in this city. Including city will display distance from the city center	Los+Angeles
checkIn	No**	Check-In Date	2024-01-20
checkOut	No**	Check-Out Date	2024-01-21
currency	No	Currency used to display prices. See supported currencies	EUR	USD***
language	No	Widget language. See supported languages	es	en***
rooms	No	Room configuration. Only one room is supported. See Rooms configuration	1	2
label	No	Arbitrary string for tracking and reporting	VioWidgetLabel

* You should provide hotelNames or hotelIds to trigger hotel search. If both parameters are provided, search will be based on hotelIds.

** Dates with availability will be selected automatically. To force search by accurate dates you should provide both check-in and check-out dates. Dates should be in the future and gap between check-in and check-out should be more or equal to one day and less or equal to 31 days.

*** Widget will detect this parameter automatically or apply default value

CSP Policy

If you are using Content Security Policy on your website, make sure that iframe url is whitelisted with frame-src directive:

frame-src https://partners.vio.com

Widget Message Posting

Our widgets utilize the native Post Message API to communicate with the parent page. Below are the supported events that trigger a message to the parent.

No Offers Available on First Search

If the user has not interacted with the search box and the initial search returns no results, the widget sends the following message:

"landingSearchSoldOut"

This message is typically used to:

• Hide the widget to prevent a poor user experience.
• Adjust the search parameters to a broader scope.

Example script for intercepting the posted messages

    // Listen for messages from the specific iframe
    window.addEventListener("message", (event) => {
        if (event.origin !== "https://partners.vio.com") {
            console.warn("Blocked message from unexpected origin:", event.origin);
            return;
        }
        // Hide the widget, or change the params of the src attribute in the iFrame to broaden the search
        console.log(">>> Received message from iframe:", event.data); // This can be removed, as it's only made for testing that the message is received
    });

Live Examples

Basic

<iframe
  src="https://partners.vio.com/widgets/hotelCardWidget/index.html?partnerKey=<public_partner_key>&hotelNames=Barcelona+Princess&country=Spain&city=Barcelona"
  width="100%"
  height="565px"
  frameborder="0"
></iframe>

Use hotel id

<iframe
  src="https://partners.vio.com/widgets/hotelCardWidget/index.html?partnerKey=<public_partner_key>&hotelIds=1043289"
  width="100%"
  height="565px"
  frameborder="0"
></iframe>

Use different currency

<iframe
  src="https://partners.vio.com/widgets/hotelCardWidget/index.html?partnerKey=<public_partner_key>&hotelNames=Barcelona+Princess&country=Spain&city=Barcelona&currency=GBP"
  width="100%"
  height="565px"
  frameborder="0"
></iframe>

Optimizations

You can enable widget iframe lazy loading by adding loading="lazy" attribute to widget iframe HTML tag. See more detailed explanation on MDN website.

<iframe
  loading="lazy"
  src="https://partners.vio.com/widgets/hotelCardWidget/index.html?partnerKey=<public_partner_key>&hotelNames=Barcelona+Princess&country=Spain&city=Barcelona"
  width="100%"
  height="565px"
  frameborder="0"
></iframe>