Cómo integrar el widget de reserva TIMIFY en su sitio web o CMS
Esto es lo que necesitas saber
¡Se necesitan conocimientos básicos de HTML!
El widget de reserva TIMIFY funciona en los siguientes navegadores web: Edge, Firefox, Safari y Chrome. También tenemos complementos para muchos sistemas de administración de contenido (CMS), incluidos Joomla, Word Press y Drupal.
Cuando se trata de incrustar un widget en su sitio web, tiene dos opciones: agregar el widget como una superposición, activada por un botón de reserva, o como un iFrame. La diferencia radica en cómo se muestran en su sitio web. Explicamos más a continuación, para que pueda decidir cuál es el adecuado para usted.
Proporcionamos instrucciones y consejos para ambas opciones. La opción más sencilla para elegir es el Botón de reserva/superposición, ya que hay menos codificación involucrada.
Le indicaremos la dirección correcta sobre cómo incrustar el widget si está utilizando un CMS.
Puede personalizar aún más su widget utilizando el código que hemos preparado para usted, disponible en nuestro artículo avanzado, aquí.
Cómo está estructurado este artículo:
2. Cómo insertar el widget de reserva como superposición
3. Cómo incorporar el widget de reserva como iFrame.
4. CMS - WordPress, Joomla o Drupal
1. ¿Cuál es la diferencia entre usar un botón de reserva y una superposición frente a un iFrame para mi widget de reserva?
Botón de reserva + superposición:
Como su nombre indica, una superposición de widget se colocará en el centro de su sitio web, cubriendo su contenido. Solo aparece cuando el usuario hace clic en su botón de reserva. Una superposición es rápida y fácil de instalar. ¿Quiere saber cómo se ve un sitio web con el botón de reserva estándar y la opción de superposición? Así es como se ve un sitio web con el botón de reserva ...
... y esto es lo que sucede cuando el usuario hace clic en el botón de reserva:
El widget de reserva como iFrame
Abreviatura de marco en línea(del inglés, inline frame), un iFrame es simplemente un marco dentro de otro marco. Si elige esta opción, su widget de reserva se muestra automáticamente cuando un visitante abre su sitio web: no es necesario que tenga un botón de reserva. Un iFrame te ofrece más opciones de personalización y, por esa razón, lleva un poco más de tiempo configurarlo. También debe comprender un poco sobre html para saber dónde colocar el widget en su sitio web. El usuario no puede perderse su widget de reserva si lo agrega como un iFrame. Así es como se ve en un sitio web:
Decida qué opción desea y siga leyendo para conocer las instrucciones de instalación. Como parte del proceso de integración, es posible que deba proporcionar su ID de la cuenta. Puede encontrar esto en Información de la cuenta:
2. Cómo insertar el widget de reserva como superposición
Inicie sesión en su cuenta TIMIFY y abra su sitio web. Deberá copiar y pegar algunas líneas de código en el HTML de su sitio web.
PASO 1:
Vaya a Integración → Widget de Reserva. Seleccione el Botón de reserva / superposición:
PASO 2:
Elija dónde desea que aparezca su botón.
Si opta por posición fija, su botón siempre aparecerá en la mitad de la pantalla, a la izquierda o a la derecha. Se mantendrá fijo en esta posición, en cada página de su sitio web, independientemente de si se desplaza hacia arriba o hacia abajo. Solo tendrá un fragmento de código para copiar y pegar en su HTML: el botón de reserva en sí.
Si selecciona Botón posición flexible, tiene total libertad sobre dónde colocar su botón. Tendrá un fragmento de código adicional para agregar a su html: para determinar dónde desea que aparezca el botón de reserva.
Tiene una serie de configuraciones adicionales para jugar, desde ocultar el botón para cerrar el widget, hasta si desea que un servicio y/o recurso sea preseleccionado.
PASO 3:
Para el botón de reserva fija:
Abra el archivo HTML de la página web o busque en el panel de administración de su sitio web donde es posible agregar código HTML.
Desplácese y busque la etiqueta "</head>". Ahora, pegue el código que copió justo antes de la etiqueta "</head>". Vea las capturas de pantalla para antes y después:
Antes:
Después:
Para Botón posición flexible:
Abra el archivo HTML de la página web en la que desea que aparezca el widget de reserva.
Busque la etiqueta "cuerpo". Ahora pega el código que copiaste para el botón de reserva justo antes de la etiqueta "cuerpo".
Ahora debe agregar el segundo fragmento de código. Ubique en qué lugar de su HTML desea que aparezca el botón de reserva, eso depende de usted.
Agregue una clase "timify-button" para el elemento al que se refiere el fragmento.
Agregue el atributo "data-account-id=" e inserte su ID de reserva TIMIFY único dentro de “”. (Consulte arriba para saber cómo acceder a su ID de reserva TIMIFY)
¡Eso es! Haga clic en refrescar y el widget debería aparecer en su sitio.
3. Cómo incorporar el widget de reserva como iFrame.
Inicie sesión en su cuenta TIMIFY y abra su sitio web. Deberá copiar y pegar algunas líneas de código en el HTML de su sitio web.
PASO 1:
Vaya a Integración → Widget de Reserva. Seleccione la pestaña iFrame. Para insertar un iFrame, no necesita un botón de reserva para activar la apertura de su widget: se abrirá automáticamente cuando un visitante abra su sitio web.
Aquí también tiene la posibilidad de configurar diferentes series de opciones. Las elecciones que realiza afectan el código que se genera.
PASO 2:
Copie y pegue la siguiente URL en la página html de su página web donde desea que aparezca el iFrame
PASO 3:
Abra el HTML de la página en la que desea que aparezca el widget de reserva y vaya a la ubicación donde desea insertar el widget. Pegue el fragmento de código que copió aquí.
Ajuste la URL en el atributo "src": agregue su ID de reserva TIMIFY único dentro del “”. (Consulte arriba para saber cómo acceder a su ID de reserva TIMIFY).
Para editar el alto y el ancho del widget, cambie los valores de los parámetros ("height" o "width") usando el código de secuencia de comandos generado automáticamente.
¡Eso es! Haga clic en volver a actualizar y el widget debería aparecer en su sitio.
4. CMS - WordPress, Joomla o Drupal
La mayoría de las herramientas para crear sitios web le ofrecen la opción de agregar un elemento HTML o personalizar su HTML. Puede obtener este HTML siguiendo los pasos anteriores para la opción de superposición o iFrame.
Además, hemos escrito guías para varios CMS, accesibles a través de Integración → Widget de Reserva → y la pestaña CMS.
Si el proveedor de su sitio web o CMS no permite acceder al script, le recomendamos que busque en sus artículos de ayuda "HTML personalizado" o que se comunique con su equipo de soporte para averiguar cómo incrustar HTML personalizado.
Tal vez desee mejorar su experiencia de reserva un nivel o dos. Personaliza tu widget de reservas TIMIFY: configuración avanzada le muestra cómo rellenar previamente los datos del cliente y otras personalizaciones.