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. The new 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-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-color-widget-venue-marker="[HEX_VALUE_COLOR]"
    data-color-widget-hotel-marker="[HEX_VALUE_COLOR]"
    data-description="[EVENT_DESCRIPTION]"
    data-display-map="[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-marker-type="[museum|music|party|sport|theater]"
    data-name="[WIDGET_NAME]"
    data-tid="[YOUR_TRACKING_ID]"
  ></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

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 venur that will be displayed in the event information window on the map (when venue marker is hovered). It has no effect over 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

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 information

➤ 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 (deprecated)

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-descr="Event description"

Be careful, query string must be url encoded

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

➤ 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

    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

➤ Venue Marker

data-color-venue-marker

This attribute controls the color of central venue marker on the map (Default to "007FFF").

    data-color-venue-marker="007FFF"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?color-venue-marker=007FFF

➤ Hotel Marker

data-color-hotel-marker

This attribute controls the color of hotel markers on the map (Default to "007FFF").

    data-color-hotel-marker="007FFF"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?color-hotel-marker=007FFF

Booking tracking

data-tid

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 Your organization tracking token ID assigned to you to track your earnings.

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-color-hotel-marker="007FFF"

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 : English
fr : French

    data-lang="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/lang/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"

➤ Map View

data-display-map

At initial load, on mobile/responsive screen, the widget displays the hotel list view by default. If you wish to display the hotel map first, you need to set this attribute to true.

    data-display-map="true"

Be careful, query string must be url encoded

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

➤ 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 data

data-custom-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 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 in order for you to be able to retrieve it (see Webhook section above).

    data-custom-customer-id="xxxxxxx"

Be careful, query string must be url encoded

https://www.revolugo.com/hotels?custom-customer-id=xxxxxxx

Webhook

When someone makes a booking through our widget with a tracking ID belonging to you, we are able to trigger instantly an HTTP POST request to a webhook in your system (based on the secure URL of a remote HTTP endpoint that you need to provide to us) in order for you to get and reconcile booking information with your system.

Contact our support team in order to configure this setup to fit your needs

Integration example

Generating a Revolugo hotel map widget on your event's pages is as easy as doing some copy/pastes of the previous snippets of code that you've found through this documentation.

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 {% c-line %}<%= latitude="" %=""></%=>{% c-line-end %} with Ruby on Rails or using {% c-line %}<?= $latitude ?>{% c-line-end %} with PHP)

However, in certain situation, you may find it easier to generate the widget injecting a particular context directly from browser available data (e.g: from URL query string).

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

<script id="revolugo-generate-widget">
  document.addEventListener("DOMContentLoaded", function() {
    const searchParams = new URLSearchParams(window.location.search)

    const address = searchParams.get('address') || ''
    const checkInDate = searchParams.get('check-in-date') || ''
    const checkOutDate = searchParams.get('check-out-date') || ''
    const description = searchParams.get('description') || ''
    const lat = searchParams.get('lat') || ''
    const lng = searchParams.get('lng') || ''
    const marker = searchParams.get('marker') || ''
    const name = searchParams.get('name') || ''
    const tid = searchParams.get('tid') || ''

    const embedScriptTag = document.createElement('script')
    embedScriptTag.setAttribute('id', 'revolugo-widget')
    embedScriptTag.setAttribute('src', 'https://widget.revolugo.com/embed')
    embedScriptTag.setAttribute('data-address', address)
    embedScriptTag.setAttribute('data-check-in-date', checkInDate)
    embedScriptTag.setAttribute('data-check-out-date', checkOutDate)
    embedScriptTag.setAttribute('data-color-widget-main-1', '007FFF')
    embedScriptTag.setAttribute('data-color-widget-main-2', '45DCA4')
    embedScriptTag.setAttribute('data-color-hotel-marker', '007FFF')
    embedScriptTag.setAttribute('data-description', description)
    embedScriptTag.setAttribute('data-height', '80vh')
    embedScriptTag.setAttribute('data-latitude', lat)
    embedScriptTag.setAttribute('data-longitude', lng)
    embedScriptTag.setAttribute('data-marker', marker)
    embedScriptTag.setAttribute('data-name', name)
    embedScriptTag.setAttribute('data-tid', tid)

    let generateEmbedScriptTag = document.getElementById('revolugo-generate-widget')

    if (generateEmbedScriptTag) {
      const parentTag = generateEmbedScriptTag.parentNode
      parentTag.appendChild(embedScriptTag)
      parentTag.removeChild(generateEmbedScriptTag)
    }
  })
</script>

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

Location

➤ Latitude & longitude

➤ Address of your event's venue

Dates

Event information

➤ Name

➤ Description (deprecated)

➤ Venue Map Maker

➤ Event logo

Widget colors

➤ Widget Main Color

➤ Widget Secondary Color

➤ Venue Marker

➤ Hotel Marker

Booking tracking

Widget settings

➤ Language

➤ Currency

➤ Height

➤ Map View

➤ Widget ID

Quick checkout

➤ Customer Personal Info

➤ Customer Organization Info

Additional data

Webhook

Integration example

Quick start:
Widget integration and wide scale embedding