Quick start widget integration and wide scale embedding guide

Supercharge your attendance by showing accomodations near your venue. Revolugo's Hotel Map technology let your event participants browse for accomodations directly from your website. No redirection. High conversion. More revenue. Help your attendees find the best deal during your event. Embed our high converting Hotel Map technology on your event's accomodation page, sit down and relax.

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 :

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.

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 "<?= $latitude ?>" with PHP)

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

Attribute Details :

▷ Location

► Latitude and 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.

► 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.

▷ 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

▷ 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).

► 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.

► Venue Map Marker

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.

▷ Widget Colors

► Widget Main Color

data-color-widget-main-1

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

► Widget Secondary Color

data-color-widget-main-2

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

► Venue Marker

data-color-venue-marker

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

► Hotel Marker

data-color-hotel-marker

This attribute controls the color of hotel markers on the map (Default to "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.

▷ 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

► 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

► 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.

► Display Map on mobile 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.

► 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.

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

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

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

► 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 | data-o-vat | data-o-address | data-o-city | data-o-state | data-o-zip | data-o-country

▷ Additional Custom Data

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-xxxxx

▷ 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 "<%= latitude %>" with Ruby on Rails or using "<?= $latitude ?>" 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:

SUPPORT

We are at your disposal if you need further information on the integration process :

by email : contact@revolugo.com

by chat: Start chatting with us