1. Preparación
1.1 Crear tu página web de reservas de DiBooq
Primero, crea tu página web de reservas de DiBooq. La configuración suele tardar solo 5–10 minutos.
Una vez que tu página web de reservas esté online (ver captura de pantalla), podrás comenzar a crear tu widget de reservas de DiBooq.
Para integrarlo en tu propia página web, tienes dos opciones:
- Widget integrado (iFrame): el widget de reservas se incrusta directamente en tu página web.
- Widget emergente (botón con overlay): un botón abre el widget de reservas en una ventana superpuesta, sin que los visitantes abandonen tu página web.
Consejo de SEO
El widget de reservas de DiBooq se integra técnicamente con tu página web de reservas y, al hacerlo, genera un enlace entrante a tu dominio. Esto puede tener un efecto positivo en tu SEO. Por lo tanto, al crear tu página web de reservas de DiBooq, elige palabras clave lo más relevantes posible para tu(s) subdominio(s) de DiBooq.
1.2 Comprueba qué tecnología utiliza tu página web
Nuestro widget de reservas ya se ha integrado con éxito en diferentes tipos de páginas web, entre ellas:
- Páginas web desarrolladas a medida (por ejemplo, en HTML o PHP)
- WordPress
- Constructores de páginas web como Squarespace, Wix, Jimdo, etc.
Nota sobre Jimdo
Jimdo ofrece dos productos distintos para crear páginas web. La integración del widget de reservas solo es posible con Jimdo Creator, ya que en esta plataforma se puede incorporar código HTML y JavaScript personalizado (fragmentos de código).
En el Jimdo Website Builder (antes conocido como Dolphin) no se pueden integrar fragmentos de código externos ni widgets. Por lo tanto, actualmente no es posible integrar el widget de reservas en esta plataforma.
En general, el widget también puede utilizarse en otros CMS o sistemas de creación de páginas web, siempre que estos permitan la integración de código HTML y JavaScript personalizados.
2. Crear el widget de reservas (Generador de Código)
Una vez que hayas creado tu página web de reservas de DiBooq, abre el Generador de Código en el siguiente enlace:
https://tools.dibooq.com/code-generator.html
Allí podrás configurar tu widget de reservas y generar el código personalizado para integrarlo en tu página web.
-
Campo de entrada: Tu subdominio
Introduce el subdominio que definiste al crear tu página web de reservas de DiBooq.
Importante: Introduce solo el nombre del subdominio, sin incluir.book.dibooq.com.
Ejemplo: Si tu página web de reservas está disponible en:casavacacional.book.dibooq.com, solo debes introducir:casavacacional -
Lista desplegable: Idioma del widget
La opción Auto (Predeterminado) utiliza automáticamente el idioma de tu página web. Para ello, el widget lee el atributo lang definido en el encabezado HTML de la página.
Dependiendo de la tecnología de tu página web o del CMS que utilices, este atributo de idioma puede no estar disponible. En ese caso, es posible que el widget de reservas no se muestre en el idioma esperado.
Para evitarlo, puedes seleccionar un idioma fijo en la opción Idioma del widget. El código generado abrirá siempre el widget de reservas en el idioma seleccionado, independientemente del idioma de tu página web.
Puedes elegir entre: alemán, inglés, español, francés, portugués, croata , italiano o mantener la configuración predeterminada: Auto (Predeterminado)
- Campo de entrada: texto del botón
Aquí puedes definir el texto que aparecerá en el botón que abre el widget de reservas.
El texto que introduzcas se mostrará en el botón cuando utilices el Widget emergente.
- Campo de entrada: Título
Aquí puedes definir el título que aparecerá en la parte superior de la ventana superpuesta, por encima del widget de reservas.
Si tu página web incluye varios alojamientos, puedes introducir, por ejemplo, el nombre del alojamiento cuyo widget de reservas se abrirá. Así, tus huéspedes sabrán de inmediato qué alojamiento reservan.
- Campo de entrada: Subtítulo
Aquí puedes definir un texto adicional que se mostrará justo debajo del título en la ventana superpuesta.
Utiliza el subtítulo para añadir una breve descripción, información importante o un mensaje personalizado para tus huéspedes.
- Personalización del botón
Aquí encontrarás diferentes opciones para personalizar el botón que abre el widget de reservas en modo ventana superpuesta.
De este modo podrás adaptarlo al diseño de tu página web.
2.1 Crear un Widget emergente (botón con overlay)
En la vista previa podrás ver cómo se mostrará el botón en tu página web con la configuración seleccionada.
Puedes hacer clic directamente sobre el botón de la vista previa. La ventana superpuesta se abrirá exactamente igual que en tu página web más adelante.
Cuando estés satisfecho con la configuración, haz clic en "Code Snippet" para generar el código de integración.
Código con CSS integrado (Inline Styling)
En el lado izquierdo encontrarás el código con el CSS integrado (Inline Styling).
Esta opción es ideal si solo deseas integrar el widget de reservas en un único lugar de tu página web. Solo tienes que copiar el código generado y pegarlo donde quieras mostrar el widget.
Código con CSS independiente
En el lado derecho encontrarás el código CSS separado del código del widget.
Esta opción se recomienda si deseas utilizar el widget de reservas varias veces en tu página web.
Puedes integrar el CSS una sola vez en tu página web, por ejemplo, como CSS personalizado en WordPress. Después, solo tendrás que insertar el código reducido del widget en los lugares donde quieras mostrarlo, sin repetir el CSS.
Esto facilita el mantenimiento y garantiza que todos los widgets de reservas tengan el mismo diseño.
2.2 Crear un Widget integrado (iFrame)
En la vista previa podrás comprobar cómo se mostrará el calendario de reservas en tu página web. Así podrás verificar que el widget se carga correctamente antes de integrarlo.
Si el calendario se muestra correctamente en la vista previa, haz clic en Code Snippet para generar el código de integración.
Después podrás insertar el código generado en el lugar deseado del código HTML de tu página web.
En WordPress, en los constructores de páginas web y otros CMS suele existir un elemento específico para ello, como HTML personalizado, HTML, HTML incrustado o Insertar código.
Simplemente pega allí el código generado.