Paso 1 – Copia el Código

Texto en la Cabecera del Sitio

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="RUTA_AL_ARCHIVO_JS/script_motor.js"></script>
<link rel="stylesheet" href="RUTA_AL_ARCHIVO_CSS/estilos_motor.css">

Texto en el cuerpo del sitio (body)

<div class="reservas_form_div">
<form id="reservas_form" name="form_multi" method="GET">
<select id="hotel_select" class="inputs">
<option value="SLUG" selected="">NOMBRE DEL HOTEL</option>
</select>
<input type="text" id="in" onfocus="(this.type='date')" class="inputs" name="in" placeholder="Check in"/>
<input type="text" id="out" onfocus="(this.type='date')" class="inputs" name="out" placeholder="Check out"/>
<input type="number" placeholder="Adultos" id="ad" class="inputs" name="ad" />
<input type="number" placeholder="Niños" id="ch" class="inputs" name="ch" />
<input type="number" id="rooms" name="rooms" class="inputs" placeholder="Habitaciones"/>
<button id="reservar" class="boton_reserva" type="button" value="Submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
<div>

Paso 2 – Descarga los Archivo de CSS y JS

Descarga el Archivo CSS (de estilos) haciendo click aquí abajo.

DESCARGAR ARCHIVO JS

DESCARGAR ARCHIVO CSS

Paso 3 – Personaliza tu Widget

Configura el Widget de Reservas editando el código que se encuenta en el paso 1. Aquí te presentamos las variables a editar:

– Slug : ingresa el código identificatorio de tu hotel (te hemos enviado via email). Ejemplo: santoriniresort

– Ancho, Alto Color de boton y fondo: el código del motor es responsive. O sea, se adaptará a tu sitio web. Si en algún dispositivo no lo ves correctamente, puedes editar los valores de tamaño en el archivo de estilos (frame.css)

Paso 4 – Inserta el Widget en tu página Web.

Paso 5 – Inserta el Archivo CSS en tu página Web.

– Guarda el archivo CSS que has descargado en el Paso 2, en la carpeta de estilos de tu página web (en tu hosting). La dirección debes incluirla en el código del paso 1

LISTO, Ya Deberías tener tu boton funcional! Vamos a un ejemplo…

Ejemplo.

Slug: santoriniresort
URL del CSS: https://bebetterhotels.com/iframecss/frame.css
Abrir en: Misma Pestaña

Texto en la Cabecera del Sitio

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="RUTA_AL_ARCHIVO_JS/script_motor.js"></script>
<link rel="stylesheet" href="RUTA_AL_ARCHIVO_CSS/estilos_motor.css">

Texto en el cuerpo del sitio (body)

<div class="reservas_form_div">
<form id="reservas_form" name="form_multi" method="GET">
<select id="hotel_select" class="inputs">
<option value="santoriniresort" selected="">Santorini Resort</option>
</select>
<input type="text" id="in" onfocus="(this.type='date')" class="inputs" name="in" placeholder="Check in"/>
<input type="text" id="out" onfocus="(this.type='date')" class="inputs" name="out" placeholder="Check out"/>
<input type="number" placeholder="Adultos" id="ad" class="inputs" name="ad" />
<input type="number" placeholder="Niños" id="ch" class="inputs" name="ch" />
<input type="number" id="rooms" name="rooms" class="inputs" placeholder="Habitaciones"/>
<button id="reservar" class="boton_reserva" type="button" value="Submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
<div>