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_multiprop.js»></script>
<link rel=»stylesheet» href=»RUTA_AL_ARCHIVO_CSS/form_multiprop.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_1″ disabled=»» selected=»»>Locación</option>
<option value=»SLUG_1″>· Nombre Hotel 1</option>
<option value=»SLUG_2″>· Nombre Hotel 2</option>
<option value=»SLUG_3″>· Nombre Hotel 3</option>
<option value=»SLUG_4″>· Nombre Hotel 4</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 . Cada hotel de la cadena tiene su slug, los mismos deberán ser reemplazados en el código del paso 1.

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

Cadena Hoteles Santorini

Hoteles en Santorini, Atenas, Valencia, Barcelona, Ibiza

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» disabled=»» selected=»»>Locación</option>
<option value=»» disabled=»»>Greece</option>
<option value=»santoriniresort«>· Santorini Resort</option>
<option value=»santoriniatentas«>· Santorini Athens</option>
<option value=»» disabled=»»>Spain</option>
<option value=»santorinivalencia«>· Santorini Valencia</option>
<option value=»santorinibarcelona«>· Santorini Barcelona</option>
<option value=»santoriniibiza«>· Santorini Ibiza</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>