CTA: HTML Booking Buttons - HTML Booking Element Generator
HTML Elements, Booking Buttons - Calls to Action within the Web Page
If you have already installed hotelrsv.js (see installation guide), just add the class class="rsv-app-launcher rsv-mobile-launcher" to any HTML element in your page and that's it, this class will trigger JavaScript functions automatically and open the HOTELRSV booking engine.
Example:
- <button class="rsv-app-launcher rsv-mobile-launcher otras-clases">
Booking Buttons within the Hotel Web Page
The hotelrsv.js library is in charge of integrating the various hotelRSV products such as the Widget, the Web App and the Mobile App and the TripAdvisor Connection with TripConnect and Search Engine Call to Reservation with Sitelinks functionalities.
To place "Book Now" buttons, the procedure is very simple and there are several customization options. The following guide is oriented for the Webmaster of your Web page and explains how to correctly configure the "Book Now" buttons (call to action).
Prerequisites
|
Requirement |
Note
|
|
Installed Library hotelrsv.js |
Installation of hotelrsv.js before the </head> or </footer> tag on each page where you want to place booking buttons, see the installation section. |
|
License code hotelrsv_id_## |
Assignment of the hotel variable or the main hotel in case of Group hotels. This information will be provided at the time-of-service activation. |
Class rsv-app-launcher and rsv-mobile-launcher
Button Configuration for Web Application
Any button, image or link (anchor) located on the hotel web page, can be used to launch the hotelRSV booking application, for this it is only required to add the class rsv-app-launcher to the button or link that requires such action. This class does not add any style, it is purely functional.
The class attribute must be the last attribute. Our button generator already provides for this situation.
To add classes in WordPress menus, follow this guide.
Supported HTML Elements
The types of buttons to which the class can be added are:
|
Action Item |
Example
|
|
<button>
|
<button class="rsv-app-launcher rsv-mobile-launcher otras-clases">
|
|
<input>
|
<input class="rsv-app-launcher rsv-mobile-launcher otras-clases">
|
|
<a>
|
<a class="rsv-app-launcher rsv-mobile-launcher otras-clases">
|
|
<input type="button">
|
<input type="button" class="rsv-app-launcher rsv-mobile-launcher otras-clases">
|
If the class attribute already exists inside your HTML element, you must leave a space before adding the hotelrsv classes: rsv-app-launcher rsv-mobile-launcher
We have provided a Button Generator at the following link. Before using the Button Generator, please read the following guide.
Language Selection
hotelRSV is multi-language and will automatically display in the user's language (depending on the language your device is in). For details, see Language Selection and Determination.
It is possible to modify the language of hotelRSV programmatically at a global level (for all Action Items on the page) or at a singular level (for each Booking Button or Action Item), for more information, see Language Selection and Determination.
Additional Parameters
In some CMS like WordPress, additional parameters starting with the data-hotelrsv-XYZ prefix must come before any other attribute, while the class attribute must be the last attribute. Our button generator already provides for this situation.
| Parameter |
Possible Values |
Use
|
Explanation |
|
data-hotelrsv-lang
|
ISO 3166-2 two-character code. See list in Language Selection and Determination. |
Optional.
|
Language selection, if this parameter is not passed, it will take the language set as explained in Language Selection and Determination. |
|
data-hotelrsv-currency-code
|
ISO 4217 Currency Code according to the currencies configured in your hotel. |
Optional.
|
Currency code to be pre-selected. You must use the ISO 4217 codes that are registered in your extranet. Check in your control panel / extranet. If in doubt, submit a ticket. |
|
data-hotelrsv-dt-arrival
|
Date in format YYYYYMMDD |
Optional.
|
YearMonthDay representing the desired check-in date. |
|
data-hotelrsv-dt-departure
|
Date in format YYYYYMMDD |
Optional.
|
YearMonthDay representing the desired check-out date. |
|
data-hotelrsv-id-room-type
|
Room or product identifier according to the types of rooms or packages configured in your hotel. |
Optional. If you use room_type_abbrev you should not use this parameter. |
Identifier of the room to be pre-selected. The ID can be found in your control panel / extranet. If you do not know how to get the room id, use the room_type_abbrev parameter below. If you are using the dt_arrival and dt_departure parameters you must include this parameter. |
|
data-hotelrsv-room-type-abbrev
|
Customizable alphanumeric identifier of the room or product according to the types of rooms or packages configured in your hotel. |
Optional.
If you use id_room_typene you must use this parameter. |
Identifier of the room to be pre-selected.
The ID can be found in your control panel under Configurations → Configuration Operations → General → Room Type and Room Photos in the ABBREVIATION field More information on this field in Room Types
The abbreviation can NOT contain spaces, accents, accented letters, special characters or punctuation. Only alphanumeric characters. If you are using the dt_arrival and dt_departure parameters you must include this parameter. |
|
data-hotelrsv-show-other-rooms
|
1 | 0
|
Optional.
|
1 = It will show other rooms in addition to the pre-selected one.
0 = It will show only the pre-selected room.
|
|
data-hotelrsv-id-hotel
|
Hotel ID in a group of Hotels |
Optional. Only for Hotel groups |
Use this parameter if your page is for several hotels in a group but you want a booking button to launch the booking app for a particular button. |
|
data-hotelrsv-promo-code
|
Splendidus Promotional Code Promos Generator |
Optional.
|
The code can be found in the control panel at
Sales → Define Promotions |
|
data-hotelrsv-show-multihotel-selector
|
Display hotel selector (hotel groups only) |
Optional. Only for Hotel groups |
data-hotelrsv-show-multihotel-selector="1"
|
If in doubt, please submit a ticket.
Examples
In the following examples, the action items will call the Application in the language declared at the global level since they do not have the attribute declared for determination at the singular language level.
Examples of Input
- <input type="submit" value="Reservar" class="rsv-app-launcher rsv-mobile-launcher">
Example of Button Type Input
- <input type="button" value="Reserve" class="rsv-app-launcher rsv-mobile-launcher" data-hotelrsv-show-multihotel-selector="1">
This code will cause the hotel selector to be displayed as soon as the app is launched. Only apply it if the hotel or page allows reservations for a group of hotels.
Example of Button Type Input
- <a href="#" class="rsv-app-launcher rsv-mobile-launcher" data-hotelrsv-promo-code="MYPROMO15">
Button Examples
- <button data-hotelrsv-lang="en" class="rsv-app-launcher rsv-mobile-launcher" >Reserve</button>
The following example will run the application in English, regardless of the language indicated globally.
Example of Anchor (Link)
- <a data-hotelrsv-lang="en" data-hotelrsv-room-type-abbrev="SGLLUX" data-hotelrsv-promo-code="MYPROMO15" data-hotelrsv-dt-arrival="20241010" data-hotelrsv-dt-departure="20241013" data-hotelrsv-show-other-rooms="0" href="#" class="mibtn miClase rsv-app-launcher rsv-mobile-launcher">Reservar</a>
The following example will run the application:
- In English data-hotelrsv-lang="en"
- Pre-selecting dates October 10-13, 2024 data-hotelrsv-dt-arrival="20241010" data-hotelrsv-dt-departure="20241013"
- Will load coupon MYPROMO15 data-hotelrsv-promo-code="MYPROMO15"
- Will show only the SGLLUX room type without showing other room types data-hotelrsv-room-type-abbrev="SGLLUX" and data-hotelrsv-show-other-rooms="0"
Add Atributos (HotelRSV Parameters) in Elementor
Generator of HTML Elements (Buttons) to Open the Booking Engine on the Website
This application does not replace the installation guide and it is the responsibility of the Hotel or WebMaster to verify that the code generated by the Button Generator is compatible with the Hotel's website.
Related Articles
CTA: URLs, Direct Booking Links - Booking Link Generator
This guide is oriented to create "incoming links" to be used in Newsletter (mail-list), social media sharing, chat, and other forms of communication with Links so that the guest can directly reach the offer you want to communicate, reducing steps and ...Installation in WordPress – Plugin
The new hotelRSV plugin for WordPress allows you to install with a single click the hotelrsv.js libraries and perform basic configurations such as application language. Avoid Errors! Avoid duplicate libraries or installation. If you use the WordPress ...Installation Guide hotelrsv.js
hotelRSV is a 100% web application created with HTML, JS, CSS that can be installed quickly on any page without programming knowledge. You can install it on any CMS (Drupal, Joomla, Wordpress, Wix, SquareSpace), or on any PHP, HTML, Ruby ...Wix Installation
hotelrsv.min.js Library To implement the hotelrsv.min.js library in Wix, follow these steps: In the Dashboard → Settings → Custom Code → Head option (official Wix guide), place the installation code in the Head, but you must separate the essential ...Tokenized: HotelRSV Parameters Encrypted with JWT
HotelRSV allows to pass encrypted data using the JSON Web Tokens protocol, based on the industry standard RFC 7519 method for securely representing Claims between two parties. This is an optional advanced form in case your organization needs to pass ...