DOCUMENTATION

Integrate the widget for an event with a Widget ID

In order to display our widget on your web page, you just need to copy/paste the following script tag anywhere in your html code where you want the hotels map to be displayed :

 <script
    id="revolugo-widget"
    src="https://widget.revolugo.com/embed"
    data-tid="[TRACKING_ID]"
    data-wid="[WIDGET_ID]"
  ></script>

The values between brackets must be replaced by unique identifiers provided by our team operational. The [TRACKING_ID] and the [WIDGET_ID] attributes represent respectively a tracking token related to your organization, and the identifier of your event.

Please note that you can also use other attributes to the script tag when integrating the widget. Those attributes will take precedence over the information related to the widget ID. The exhaustive list of attributes is described below.

Hotel Map wide scale integration with custom settings

You can generate a widget dynamically and customize its settings giving additional information to the script tag, such as the longitude and latitude of your event or the dates, for instance. Options are specified through attributes of the html script tag.

Ideally, you'll inject context data (check in/check out date, location, etc) and other script tag's data attributes from your backend's template renderer (e.g: using <%= latitude %> with Ruby on Rails or using <?php $latitude ?> with PHP)

Here is a snippet exposing the exhaustive list of attributes that are customizable:

  <script
    id="revolugo-widget"
    src="https://widget.revolugo.com/embed"
    data-address="[EVENT_ADDRESS]"
    data-event-start-date="[YYYY-MM-DD]"
    data-event-end-date="[YYYY-MM-DD]"
    data-check-in-date="[YYYY-MM-DD]"
    data-check-out-date="[YYYY-MM-DD]"
    data-currency="[CURRENCY]"
    data-color-widget-main-1="[HEX_VALUE_COLOR]"
    data-color-widget-main-2="[HEX_VALUE_COLOR]"
    data-description="[EVENT_DESCRIPTION]"
    data-map-first-on-mobile="[true|false]"
    data-height="[WIDGET_HEIGHT]"
    data-lang="[LANGUAGE]"
    data-latitude="[LATITUDE]"
    data-longitude="[LONGITUDE]"
    data-logo="[LOGO_PICTURE_URL]"
    data-marker="[MARKER_PICTURE_URL]"
    data-name="[WIDGET_NAME]"
    data-wid="[YOUR_WIDGET_ID]"
    data-tid="[YOUR_TRACKING_ID]"
    
    data-c-firstname="[VALUE]"
    data-c-lastname="[VALUE]"
    data-c-salutation="[dr|miss|mr|mrs|ms|prof]"
    data-c-email="[VALUE]"
    data-c-nationality="[VALUE]"
    data-c-phone="[VALUE]"
    data-c-phone-country="[VALUE]"
    data-o-name="[VALUE]"
    data-o-address="[VALUE]"
    data-o-city="[VALUE]"
    data-o-zip="[VALUE]"
    data-o-country="[VALUE]"
    
    data-metadata-key1="[VALUE]"
    data-metadata-key2="[VALUE]"
    data-metadata-key3="[VALUE]"
  ></script>

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?
latitude=48.8271991&longitude=2.2859551
&address=Event%27s%20venue%20address
&check-in-date=2025-04-21
&check-out-date=2025-04-26
&name=Event%20name
&descr=Event%20description
&logo=https%3A%2F%2Fwww.website.com%2Fimg%2Fbanner-logo.png
&marker=https%3A%2F%2Fwww.website.com%2Fimg%2Fmarker-logo.png
&color-widget-main-1=007FFF

Attribute details

Event Location

➤ Latitude & longitude

data-latitude | data-longitude

In order to make the hotels map point directly to your event's venue, you need to provide the latitude and longitude of the event. If only one of those two attributes is missing, it will be ignored.

    data-latitude="48.8271991"
    data-longitude="2.2859551"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?latitude=48.8271991&longitude=2.2859551

➤ Address of your event's venue

data-address

This is the address of your event's venue that will be used as the initial position of the Hotel Map's venue marker.

    data-address="Event's venue address"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?address=Event%27s%20venue%20address

Here are some important notes regarding the use of address and geolocation:
‍When the data-address attribute is provided, our backend will attempt to convert it into latitude and longitude coordinates using a third-party geocoding service.
If geocoding fails (i.e., no latitude/longitude can be determined for the address), we will fall back to the data-latitude and data-longitude attributes.
‍
We strongly recommend prioritizing the use of data-latitude and data-longitude over data-address.Geocoding may result in failures or incorrect locations unless the address is highly precise, including full details such as street address, zip code, city, and country.
This data-address option is available only when precise latitude and longitude coordinates are not provided on your end.

Dates

➤ Check-in and Check-out dates

data-check-in-date | data-check-out-date

Provide the initial check in and check out dates of the widget that will be used to poll hotel availabilities.

Allowed format: 'YYYY-MM-DD'

‍Default values (when not provided):

data-check-in-date current date
data-check-out-date: check in date +1 day

    data-check-in-date="2025-12-01"
    data-check-out-date="2025-12-06"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?check-in-date=2025-04-21&check-out-date=2025-04-26

Event Details

➤ Name

data-name

The name of your widget. It will be displayed in the widget information window on the Hotel Map (when the widget center marker is hovered).

    data-name="Event name"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?name=Event%20name

➤ Description

data-description

The description of your event. It will be displayed in the widget information window on the map (when widget center marker is hovered). It should be a short sentence describing your event.

    data-description="Event description"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?description=Event%20description

➤ Check-in and Check-out dates

data-event start-date | data-event-end-date

Provides the dates of the event to the widget. It will add some red ticks under each date of the date range in the datepicker calendar so your customers have a visual feedback of your event dates.

Allowed format: 'YYYY-MM-DD'

    data-event-start-date="2025-12-01"
    data-event-end-date="2025-12-06"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?event-start-date=2025-04-21&event-end-date=2025-04-26

➤ Venue Map Maker

data-marker

You can show the logo of your event as the marker on the map that corresponds to the event location. Only give the url link to your event’s logo. The image should be 70 x 70 px for best result. This simplifies the user experience as it makes clearly visible the event on the map, but it doesn’t hide content either.

    data-marker="https://www.website.com/img/marker-logo.png"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?marker=https%3A%2F%2Fwww.website.com%2Fimg%2Fmarker-logo.png

➤ Event logo

data-logo

You can show the logo of your event on the hotel view. Only give the url link to your event’s logo. The image should be 512 x 512 px for best result.

    data-logo="https://www.website.com/img/banner-logo.png"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?logo=https%3A%2F%2Fwww.website.com%2Fimg-logo.png

Widget colors

➤ Widget Main Color

data-color-widget-main-1

This attribute controls the main colors of the widget (Default to "007FFF").

    data-color-widget-main-1="007FFF"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?color-widget-main-1=007FFF

➤ Widget Secondary Color

data-color-widget-main-2

This attribute controls the main colors of the widget (Default to "45DCA4").

    data-color-widget-main-2="45DCA4"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?color-widget-main-2=45DCA4

Booking tracking

data-tid

Your organization tracking token ID assigned to you to track your earnings.
Reach out to us by mail or by chat to obtain your tracking token. This is where the tracking token we provided to you needs to be set.

This tracking token is unique and is related to your organization.

It allows us to track every booking made through a Revolugo widget you integrated on a website.

    data-tid="xxxx-xxxx-xxxx-xxxx-xxxx"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?tid=xxxx-xxxx-xxxx-xxxx

Widget settings

➤ Language

data-lang

This attribute controls the default language of the widget content. If not provided, default language is set to user's browser language.

Currently, we only support following languages :

en-US : English
fr-FR : French

    data-lang="fr_FR"

There is no "lang" query string. Instead, insert the desired locale code in the URL as first parameter after Revolugo.com's domain URL.

https://www.revolugo.com/fr-FR/hotels

➤ Currency

data-currency

This attribute controls the default currency displayed for prices. If not provided, default currency is set to current user's IP address country currency.

We support following currencies :

AED, AFN, ALL, AMD, ANG, AOA, ARS, AUD, AWG, AZN, BAM, BBD, BDT, BGN, BIF, BMD, BND, BOB, BRL, BSD, BWP, BZD, CAD, CDF, CHF, CLP, CNY, COP, CRC, CVE, CZK, DJF, DKK, DOP, DZD, EGP, ETB, EUR, FJD, FKP, GBP, GEL, GIP, GMD, GNF, GTQ, GYD, HKD, HNL, HRK, HTG, HUF, IDR, ILS, INR, ISK, JMD, JPY, KES, KGS, KHR, KMF, KRW, KYD, KZT, LAK, LBP, LKR, LRD, LSL, MAD, MDL, MGA, MKD, MMK, MNT, MOP, MRO, MUR, MVR, MWK, MXN, MYR, MZN, NAD, NGN, NIO, NOK, NPR, NZD, PAB, PEN, PGK, PHP, PKR, PLN, PYG, QAR, RON, RSD, RUB, RWF, SAR, SBD, SCR, SEK, SGD, SHP, SLL, SOS, SRD, STD, SVC, SZL, THB, TJS, TOP, TRY, TTD, TWD, TZS, UAH, UGX, USD, UYU, UZS, VND, VUV, WST, XAF, XCD, XOF, XPF, YER, ZAR, ZMW

    data-currency="EUR"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?currency=EUR

➤ Height

data-height

This attribute controls the height the widget will take in your event's website page.

We highly recommend to integrate our widget in a location on your web page with a wide available window width, so that its display is more user friendly. The widget will take the whole available window width. You are free to change the size of the widget using the height attribute. It can be expressed in px, vh, em.

    data-height="80vh"

➤ Adult Count

data-adult-count

At initial load, the widget displays offers for this adult count.

‍Default values (when not provided): 1

    data-adult-count="2"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?adult-count=2

➤ Room Count

data-room-count

At initial load, the widget displays offers for this room count.
Remark: room count cannot be greater that adult count

‍Default values (when not provided): 1

    data-room-count="2"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?room-count=2

➤ Map View

data-map-first-on-mobile

At initial load, on mobile/responsive screen, the widget displays the hotel offers map view by default..

‍Default values (when not provided): true

    data-map-first-on-mobile="false"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?map-first-on-mobile=false

➤ Widget ID

data-wid

The widget ID is the unique identifier of your event in our system. It is associated with pre-defined settings for the widget that will be automatically applied. Other attributes (that are described here) will override default settings encapsulated with your widget ID. If the widget ID is not recognized or not given, it will be ignored.

    data-wid="xxxx-xxxx-xxxx-xxxx"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?wid=xxxx-xxxx-xxxx-xxxx

Quick Checkout

You may have access to your customer personal information before displaying our widget on your website. You can make their experience even better by activating the quick checkout feature of our widget booking experience by providing your customer's personal information as attributes to the script tag.

This way, your customer will be able to book a hotel room in the blink of an eye.

➤ Customer Personal Info

data-c-firstname | data-c-lastname | data-c-salutation | data-c-email | data-c-phone

The required attributes to activate the quick checkout are the followings:

    data-c-firstname="John"
    data-c-lastname="Doe"
    data-c-salutation="mr"
    data-c-email="john.doe@example.com"
    data-c-nationality="FR"
    data-c-phone="+33 6 123 345 67"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?
c-firstname=John
&c-lastname=Doe
&c-salutation=mr
&c-email=john.doe@example.com
&c-nationality=FR
&c-phone=%2B33%206%20123%20345%2067

➤ Customer Organization Info

Following attributes can also be passed along with customer information in order for the widget to generate invoices for your customer's reservation.

    data-o-name="John Doe's Organization"
    data-o-vat="FR99123456789"
    data-o-address="1 avenue des Champs Élysées"
    data-o-city="Paris"
    data-o-state="state"
    data-o-zip="75008"
    data-o-country="FR"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?
o-name=John%20Doe%27s%20Organization
&o-vat=FR99123456789
&o-address=1%20avenue%20des%20Champs%20%C3%89lys%C3%A9es
&o-city=Paris
&o-state=state
&o-zip=75008
&o-country=FR

Additional metadata

data-metadata-xxxxx

You may want to be able to reconcile booking made through the widget with your own customer.

You can easily do that by passing custom metadata attributes to the script tag like the id in your system of the customer who booked a hotel room with our widget, for instance.

Those custom data attributes will be merged into one JSON object that we will store along with the customer booking data.

data-metadata-customer-id="xxxxxxx"
data-metadata-order-id="xxxxxxx"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?metadata-customer-id=xxxxxxx&metadata-order-id=xxxxxxx

The following snippet of code is a ready-to-use snippet of code to do so:

‍metadata's keys will be stored and returned snake_cased by our Booking APIexample:

data-metadata-customer-id="XyZXyZXyZ"
data-metadata-order-id="XyZXyZXyZ"

will be stored and returned as

        {
            "customer_id": "XyZXyZXyZ",
            "order_id": XyZXyZXyZ
        }

Quick start:Widget integration and wide scale embedding

Integrate the widget for an event with a Widget ID

Hotel Map wide scale integration with custom settings

Attribute details

Attribute details

Event Location

➤ Latitude & longitude

➤ Address of your event's venue

Dates

➤ Check-in and Check-out dates

Event Details

➤ Name

➤ Description

➤ Check-in and Check-out dates

➤ Venue Map Maker

➤ Event logo

Widget colors

➤ Widget Main Color

➤ Widget Secondary Color

Booking tracking

Widget settings

➤ Language

➤ Currency

➤ Height

➤ Adult Count

➤ Room Count

➤ Map View

➤ Widget ID

Quick Checkout

➤ Customer Personal Info

➤ Customer Organization Info

Additional metadata

Quick start:
Widget integration and wide scale embedding