Alex Ruben
Cómo integrar Calendly sin problemas en tu sitio web de Hostinger
Añadir Calendly a tu sitio web de Hostinger no es complicado, pero puede resultar un poco confuso si nunca lo has hecho. El objetivo es integrar un enlace de programación para que los visitantes puedan reservar reuniones sin tener que acceder a Calendly por separado. Es muy útil para mantener todo integrado y con una apariencia impecable. Además, si alguna vez has tenido problemas de configuración aburridos o simplemente no has conseguido que el código se visualice correctamente, esta guía puede ayudarte a evitar momentos de confusión.
Cómo integrar Calendly en su sitio de Hostinger
Obtenga el código de inserción de Calendly
Primero, inicia sesión en tu cuenta de Calendly ( https://calendly.com ) y selecciona el tipo de evento que quieres que reserven. Pulsa el botón » Compartir » (normalmente es una pequeña flecha) y luego elige » Añadir al sitio web». Aquí es donde se pone práctico: verás varias opciones como incrustación en línea, widget emergente o texto emergente. Para las necesidades más básicas, elige el estilo en línea o una ventana emergente. Calendly generará un fragmento de código HTML/JavaScript. Simplemente cópialo todo; sí, aunque parezca un poco caótico, no lo modifiques a menos que sepas lo que haces.
En algunas configuraciones, este código de inserción puede ser inestable. A veces no funciona a la primera, sobre todo si copias solo una parte por accidente. Por lo tanto, comprueba que el fragmento completo esté en el portapapeles.
Inicie sesión en Hostinger y abra el editor de su sitio
Ahora, accede a tu cuenta de Hostinger ( Hostinger > Administra tu sitio > Editar sitio web ) o ve directamente a los archivos de tu sitio web si prefieres usar FTP. Si usas el creador de sitios web nativo de Hostinger, deberás encontrar la sección donde puedes agregar HTML o bloques personalizados. Si usas WordPress, ve a Panel de Control > Páginas y selecciona la página donde quieras el calendario. Luego, abre el editor Gutenberg o cualquier plugin de creación de páginas que uses.
El truco es el siguiente: inserta tu código de Calendly en un bloque o widget HTML personalizado. Si usas el editor de bloques, selecciona » Añadir bloque > HTML personalizado». En WordPress, suele estar en «Apariencia > Widgets» si lo quieres en una barra lateral o directamente en el contenido de la página.
Pegue el código para insertar y ajústelo según sea necesario
Pega el código en el bloque HTML que acabas de crear. Aquí es donde algunos usuarios se atascan. Asegúrate de copiarlo completo; si faltan partes o hay errores tipográficos, es posible que la incrustación no se muestre. En algunas configuraciones, puede que tengas que ajustar los parámetros de ancho o alto para que encaje mejor o se vea más limpio, pero por lo general, el código predeterminado funciona bien. Si se ve raro, como superpuesto o cortado, puedes ajustar el CSS del contenedor o envolver el código de incrustación dentro de un archivo <div>con estilos de ancho máximo.
Publicar o actualizar su página
Esto es obvio, pero a veces se pasa por alto: recuerda guardar, actualizar o publicar tu página después de añadir el código. Hasta que no esté activa, no verás la ventana de programación de Calendly. Al publicar, debería aparecer; sin embargo, en algunos equipos, puede tardar unos segundos en actualizarse o borrar la caché. Y no, las URL o el código de inserción copiados a medias harán que esto falle, así que compruébalo.
Pruebe el Programador en su sitio
Una vez publicado, abre tu sitio web en una nueva pestaña de incógnito o en otro dispositivo. Asegúrate de que se visualice correctamente, especialmente en dispositivos móviles. En algunas configuraciones, podrías tener que borrar la caché del navegador si la actualización no se realiza de inmediato. Además, comprueba que el proceso de reserva funcione correctamente, ya que, por supuesto, lo último que quieres es que los visitantes se queden atascados y frustrados.
Consejos adicionales y solución de problemas
Algunas peculiaridades que vale la pena mencionar: si algo parece estar roto o la incrustación no carga, verifique que su sitio no esté en modo de mantenimiento ni detrás de ningún script que bloquee el JavaScript en línea. Además, asegúrese de que todo el código de incrustación esté dentro del bloque HTML personalizado; a veces ocurren pequeños errores y se pierden partes al copiar y pegar. Si aún así no funciona, intente desactivar temporalmente los plugins de caché o cambiar de navegador para ver si esto está causando problemas.
Y ha surgido una cosa extraña: en ciertas configuraciones de alojamiento, es posible que tengas que habilitar JavaScript para que los scripts en línea se ejecuten correctamente, lo que puedes comprobar en Configuración del sitio > Avanzado > Scripts personalizados.
Resumen
Integrar Calendly no es del todo sencillo, sobre todo si eres nuevo en la edición de sitios web, pero una vez configurado, te ahorra muchos problemas. Solo asegúrate de copiar todo el código de inserción y probarlo en varios dispositivos. Con suerte, esto te ayudará a solucionar otro problema de programación.
Resumen
- Obtenga el código para insertar desde el menú Agregar al sitio web de Calendly
- Péguelo en un bloque HTML personalizado en Hostinger o WordPress
- Actualizar y probar en el sitio en vivo
- Verifique nuevamente la capacidad de respuesta móvil y los permisos de script
Palabras finales
Hacer que esto funcione puede requerir un poco de práctica, especialmente si tu sitio web tiene una seguridad estricta o almacenamiento en caché. Pero una vez que esté activo, tus visitantes podrán reservar directamente sin tener que dar vueltas. Cruzamos los dedos para que esto ayude, y si te resulta un poco complicado, recuerda borrar la caché o probar otros navegadores. A mí me funcionó; espero que a ti también.