Implementación del Botón de Reserva

5 Simples pasos

 

 

Paso 1 – Elige tu Widget

Elige el formato del widget de reserva que quieres instalar en tu sitio web.

Modelo 1 

Modelo 2

Modelo 3

Paso 2 – Descarga el Archivo de Estilos

Descarga el Archivo CSS (de estilos) haciendo click aquí abajo ( ???? ) según en el link del widget elegido.

 

Archivo CSS Modelo 1

Archivo CSS Modelo 2

Archivo CSS Modelo 3

Paso 3 – Personaliza tu Widget

Configura el Widget de Reservas editando los valores del iframe que se encuenta en el paso 4. Aquí te presentamos las variables a editar:

– Slug : ingresa el código identificatorio que te hemos enviado anteriormente. Ejemplo: santoriniresort

– Idioma: selecciona el idioma que quieres tener en tu widget. (es_ES , en_US, pt_BR )

– Ancho y Alto: debes ingresar el tamaño en pixeles que se encuentran en el nombre del modelo que hayas elegido. ej: para el modelo de widget 1, ingresa Ancho=1000 Alto=60. Sin el “px”.

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

Copia el siguiente código html :

Modelo 1

<iframe align=”middle” src=”https://clickandbook.net/frame/SLUG?lang=es_ES&cu=URL-ARCHIVO-CSS&nomargin;” style=”max-width: 100%; width:850px;height:80px;border:none;”></iframe>

Modelo 2

<iframe align=”middle” src=”https://clickandbook.net/frame/SLUG?lang=es_ES&cu=URL-ARCHIVO-CSS&nomargin;” style=”max-width: 100%; width:490px;height:100px;border:none;”></iframe>

Modelo 3

<iframe align=”middle” src=”https://clickandbook.net/frame/SLUG?lang=es_ES&cu=URL-ARCHIVO-CSS&nomargin;” style=”max-width: 100%; width:250px;height:325px;border:none;”></iframe>

 

E insertalo en tu página web. Donde lo pongas, aparecerá el widget.

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

– Para llamar al archivo CSS, debes insertar el siguiente código en el header de tu página web. Copia el código según el modelo que haz elegido en el paso 2:

Modelo 1

<link rel=”stylesheet” type=”text/css” href=”/CARPETA_DE_ESTILOS/frame-horizontal-una-linea.css”>

Modelo 2

<link rel=”stylesheet” type=”text/css” href=”/CARPETA_DE_ESTILOS/frame-horizontal.css”>

Modelo3

<link rel=”stylesheet” type=”text/css” href=”/CARPETA_DE_ESTILOS/frame.css”>

 

Cambia “CARPETA_DE_ESTILOS” por la direccion de tu carpeta CSS.

 

 

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

 

Ejemplo.

Slug: santoriniresort
URL del CSS: https://documentation.bebetterhotels.com/instructivos/iframe/frame.css
Idioma: es_ES
Ancho: 250
Alto: 325
Abrir en: Misma Pestaña

<iframe align=”middle” src=”https://clickandbook.net/frame/santoriniresort?lang=es_ES&cu=https%3A%2F%2Fbebetterhotels.com%2Finstructivos%2Fiframe%2Fframe-horizontal-una-linea.css&nomargin” style=”width:850px;height:80px;border:none;”></iframe>

Cualquier problema, no dudes en comunicarte con nosotros a [email protected]

 

Paso 1 – Copia el Código

<div class=”frameWrapper”><iframe align=”middle” src=”https://clickandbook.net/frame/SLUG?lang=es_ES&amp;cu=https%3A%2F%2FTUDOMINIO.com%2Fframe.css&amp;nomargin&amp;nocache” style=”border:none”></iframe></div>

Paso 2 – Descarga el Archivo de Estilos

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

DESCARGAR ARCHIVO CSS

 

Paso 3 – Personaliza tu Widget

Configura el Widget de Reservas editando los valores del iframe 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

– Idioma: selecciona el idioma que quieres tener en tu widget. (es_ES , en_US, pt_BR )

– Ancho y Alto: el widget 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
Idioma: es_ES
Abrir en: Misma Pestaña

<div class=”frameWrapper”><iframe align=”middle” src=”https://clickandbook.net/frame/santoriniresort?lang=es_ES&amp;cu=https%3A%2F%2Fbebetterhotels.com%2Fiframecss%2Fframe.css&amp;nomargin&amp;nocache” style=”border:none”></iframe></div>

Cualquier problema, no dudes en comunicarte con nosotros a [email protected]