Amplía la funcionalidad de tu sitio web Guesty añadiendo HTML y scripts personalizados. Usa el widget HTML para integrar funciones de terceros, como vídeos, formularios o calendarios, directamente en tus páginas. También puedes añadir código personalizado de manera global o por página, con un control preciso sobre dónde se carga en tu sitio.
Importante:
Añade código únicamente de fuentes confiables. Revisa y prueba siempre cualquier código personalizado antes de publicarlo y crea una copia de seguridad de tu sitio primero.
Para más información sobre el uso de HTML en el modo de desarrollador, consulta Modo de desarrollador .
Comprende dónde agregar código personalizado
Tienes dos opciones principales para agregar código personalizado:
- Código para todo el sitio : Aplica el código globalmente en todas las páginas agregándolo al encabezado del sitio o antes de la etiqueta de cierre
<body> .
- Código por página : Agrega código al encabezado de una página individual para scripts o estilos que solo deberían afectar a esa página.
Opción 1: Agregar código para todo el sitio (etiquetas globales <head> o <body> )
- En el panel lateral, haz clic en SEO y Ajustes .
- Haz clic en Encabezado HTML .
- HTML de encabezado : Añade contenido a la sección de encabezado. Usa este campo para scripts globales, estilos, metaetiquetas o código de verificación que deban aparecer en
<head> en todas las páginas.
- HTML final del cuerpo : Agrega HTML o JavaScript personalizado justo antes del elemento de cierre
</body> en cada página.
- Pega tu código y luego haz clic en Guardar .
Consejo:
Coloca el código que carga recursos (como CSS o scripts generales) en la sección de encabezado. Usa el cuerpo para widgets o código de estadísticas que deba cargarse después del contenido de la página .
Para obtener más detalles, consulta la guía de códigos personalizados de Duda .
Opción 2: Agregar código por página (encabezado de página única)
- En el panel lateral, haz clic en Páginas .
- Selecciona la página a la que deseas agregar el código y luego haz clic en el ícono de engranaje de Ajustes .
- Haz clic en SEO .
- Desplázate hacia abajo hasta el encabezado HTML .
- Pega tu código en el campo y haz clic en Guardar .
Esto agrega código al <head> de la página seleccionada únicamente.
Añade el widget HTML a tu sitio
Sigue las instrucciones a continuación para agregar el widget:
- Inicia sesión en tu cuenta de Guesty .
- En la barra de navegación superior, haz clic en el selector de modo y selecciona el Modo de crecimiento .
- Haz clic en Distribución .
- Haz clic en la miniatura de Sitios web de Guesty .
- A la derecha del sitio web correspondiente, haz clic en Editar .
- En el panel izquierdo, haz clic en + para abrir Widgets.
- Desplázate hacia abajo hasta el widget HTML.
- Haz clic y arrastra el widget HTML a tu sitio.
Más información sobre cómo agregar widgets a tu sitio.
Utiliza el editor de contenido del widget HTML
- En el bloque de contenido HTML, haz clic en la pestaña Contenido .
- Pega o escribe tu HTML personalizado en el cuadro de texto provisto.
- Haz clic en Actualizar para guardar los cambios.
Utiliza el editor de diseño de widgets HTML
- En el bloque de contenido HTML, haz clic en la pestaña Diseño .
- Ajusta el diseño, el estilo o el espaciado del widget según sea necesario.
Para obtener información sobre las opciones de diseño generales, consulta Diseño de widgets .
Importante:
- Guesty no puede solucionar problemas con tu código personalizado.
- No se admiten scripts del lado del servidor (como PHP o ASP). Solo se ejecuta código del lado del cliente (JavaScript, HTML, CSS) en los widgets.
- Usa HTTPS para todos los recursos externos. Los enlaces que no sean HTTPS no se cargarán en el editor.
- No sobrescribas ni reinicies jQuery. El editor usa jQuery 3.0 y reemplazarlo podría provocar un mal funcionamiento de tu sitio.
- Si tu código usa un evento
onload y la Navegación rápida está habilitada, intenta desactivar la Navegación rápida si encuentras problemas.
- Crea siempre una copia de seguridad antes de agregar o actualizar el código.
Agrega datos conectados al widget HTML
Inserta campos dinámicos de una colección o de la Biblioteca de Contenido en el widget HTML al crear páginas dinámicas. Usa este método para mostrar contenido personalizado exclusivo de cada instancia de página, sin tener que codificar todos los valores de tu colección.
Por ejemplo, integra un podcast de SoundCloud, un calendario externo o widgets personalizados que cambian con cada elemento de tu colección. Almacena solo un valor único (como un ID o un slug) en tu colección e incrústalo en el código de tu widget usando datos conectados. Más información sobre los datos conectados .
Sigue las instrucciones a continuación para agregar datos conectados:
- Inicia sesión en tu cuenta de Guesty .
- En la barra de navegación superior, haz clic en el selector de modo y selecciona el Modo de crecimiento .
- Haz clic en Distribución .
- Haz clic en la miniatura de Sitios web de Guesty .
- A la derecha del sitio web correspondiente, haz clic en Editar .
- En el bloque de contenido HTML, haz clic en la pestaña Contenido .
- Pega tu código HTML en el campo, luego elimina el slug de la URL (final de la URL) del código y guárdalo para más tarde.
- Haz clic en Actualizar .
- En la barra superior, haz clic en Editar fila .
- Pega el slug de la URL que guardaste en el paso 2 en el campo Párrafo de sección .
- Haz clic derecho en tu widget HTML para abrir el menú contextual y haz clic en Editar contenido .
- Haz clic en Conectar y luego selecciona el campo de datos al que deseas conectar el widget.
- Haz clic en Copiar al portapapeles y luego pega el contenido copiado en la sección de código donde estaba el slug de la URL antes de eliminarlo en el paso 2.
- Haz clic en Actualizar .
Consejo:
Usa datos conectados en el widget HTML para escalar eficientemente el contenido dinámico de tu sitio. Almacena solo los cambios en tu colección; guarda el código HTML o del widget compartido en el editor para facilitar el mantenimiento.
Para conocer opciones avanzadas, resolución de problemas para desarrolladores y detalles específicos de la plataforma, consulta Modo de desarrollador .