Search Form Widget

Description

The Search Form Widget provides an embeddable search form that allows customers to search for hotels directly from your website. The widget includes destination picker, date selection, and guest configuration. When submitted, users are redirected to Vio.com or your white label platform to view results and complete bookings.

Use Case

Ideal for adding hotel search functionality to travel blogs, partner websites, or any platform where you want to offer hotel search with minimal integration effort.

Adding widget to your page

Include a container element and load the widget script. Configuration is provided via window.__VioSFW__ before the script loads.

Embed Code

<div id="vio-widget" class="widget-container"></div>
<script>
    window.__VioSFW__ = {
        partnerKey: '<public_partner_key>'
    };
</script>
<script src="https://partners.vio.com/js/search-widget/search-widget.js"></script>

Important: The container div must have id="vio-widget". The widget script must load after window.__VioSFW__ is defined.

Parameters

Name	Required	Description	Example	Default
partnerKey	Yes	Public key provided by your Account Manager
destination	No	Pre-filled destination (city, hotel name, or place)	Barcelona
checkIn	No*	Check-in date in YYYY-MM-DD format	2026-03-01	Today
checkOut	No*	Check-out date in YYYY-MM-DD format	2026-03-05	Tomorrow
rooms	No	Room configuration string. See Rooms configuration	2|2:8,9	2
searchOnVio	No	If true, redirects to Vio.com. If false, uses your white label	true, false	false
openInNewTab	No	If true, opens results in a new tab	true, false	false

* Check-out must be after check-in. Dates should have at least one day between them.

Rooms Parameter Syntax

Syntax:

• | separates rooms
• : separates adults from children
• , separates child ages

Examples:

Example	Description
2	1 room, 2 adults
2|2	2 rooms, 2 adults each
2:8,9	1 room, 2 adults, 2 children (ages 8 and 9)
2|2:8,9	2 rooms: Room 1 (2 adults), Room 2 (2 adults, 2 children ages 8,9)

CSP Policy

If using Content Security Policy, whitelist:

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

Examples

Basic

<div id="vio-widget"></div>
<script>
    window.__VioSFW__ = { partnerKey: '<public_partner_key>' };
</script>
<script src="https://partners.vio.com/js/search-widget/search-widget.js"></script>

With destination and dates

<div id="vio-widget"></div>
<script>
    window.__VioSFW__ = {
        partnerKey: '<public_partner_key>',
        destination: 'Barcelona',
        checkIn: '2026-03-01',
        checkOut: '2026-03-05'
    };
</script>
<script src="https://partners.vio.com/js/search-widget/search-widget.js"></script>

Search on Vio.com in new tab

<div id="vio-widget"></div>
<script>
    window.__VioSFW__ = {
        partnerKey: '<public_partner_key>',
        destination: 'Barcelona',
        searchOnVio: true,
        openInNewTab: true
    };
</script>
<script src="https://partners.vio.com/js/search-widget/search-widget.js"></script>

Live Example

Search Form Widget

Troubleshooting

• Widget not appearing: Check that <div id="vio-widget"> exists and partnerKey is set correctly
• "Missing partnerKey": Ensure partnerKey is provided in window.__VioSFW__
• "Container element not found": Verify the div has id="vio-widget"
• Date errors: Ensure check-out is after check-in and following the format YYYY-MM-DD