Puedes insertar cualquier widget de WeTravel, como el botón de Reservar Ahora, los Paquetes de Precios, el Formulario de Contacto o cualquier otro código, directamente en tu sitio web de Squarespace. Esto permite que tus clientes vean los detalles del viaje y completen el pago sin salir de tu página.
Como Squarespace admite diferentes entornos de edición según la versión (7.0 frente a 7.1) y el motor de diseño (Classic frente a Fluid Engine), esta guía cubre múltiples formas de insertar los widgets de WeTravel, adaptadas a tu configuración específica.
Estas instrucciones se aplican a todos los widgets de WeTravel que proporcionan un código de inserción (embed code).
💡 Importante: El proceso de pago (checkout) emergente de WeTravel requiere JavaScript. Funciona en todos los planes de Squarespace que admiten Bloques de Código (Code Blocks). Si no ves la opción de añadir Bloques de Código, es posible que necesites actualizar tu plan.
Antes de empezar
Para insertar un widget de WeTravel, primero debes copiar su código.
Obtén tu código de inserción de WeTravel
Inicia sesión en tu cuenta de WeTravel.
Abre el viaje que deseas insertar.
Ve a Promote (Promocionar) → Embed (Insertar).
Selecciona el widget que prefieras (Book Now, Pricing Packages, Trip Overview, etc.).
Haz clic en Copy Code (Copiar código).
Pegarás este código en Squarespace utilizando uno de los métodos que se describen a continuación.
Añade el código de inserción a tu sitio de Squarespace
Squarespace tiene dos experiencias de edición principales:
Squarespace 7.1 (Fluid Engine): el estándar para todos los nuevos sitios.
Squarespace 7.0 (Editor clásico + secciones).
Se incluyen instrucciones para ambos.
Opción 1: Squarespace 7.1 (Fluid Engine)
Ve a la página donde quieras insertar tu widget.
Pasa el mouse por encima y haz clic en Edit (Editar).
Haz clic en el botón "+" para añadir un nuevo bloque.
Busca "Code" (Código).
Añade un Bloque de código (Code Block) a tu diseño.
Pega tu código de inserción de WeTravel dentro del Bloque de código.
Haz clic en Apply (Aplicar).
Guarda la página.
💡 Importante: No selecciones Markdown, Embed o HTML dentro de un bloque de texto; los códigos de inserción de WeTravel deben colocarse exclusivamente dentro de un Bloque de Código (Code Block) completo.
Opción 2: Squarespace 7.0 (Editor Clásico)
Edita la página.
Haz clic en el área donde quieras que aparezca el widget.
Haz clic en el punto de inserción (el icono de la gota o "teardrop").
Selecciona Code (Código).
Pega tu código de inserción.
Haz clic en Apply (Aplicar).
Guarda y previsualiza.
Las plantillas de Squarespace 7.0 tienen diferentes espaciados predeterminados, así que asegúrate de revisar la vista previa en dispositivos móviles.
Opción 3: Insertar el widget dentro de una sección o diseño
Las secciones de Squarespace 7.1 permiten una ubicación flexible en el diseño.
Añade una nueva sección o elige una existente.
Añade un Bloque de Código (Code Block).
Pega tu código de inserción.
Arrastra para reposicionar el bloque.
Cambia el tamaño del bloque si es necesario.
Guarda los cambios.
Esta opción es ideal para colocar el botón "Reservar ahora" junto a los precios, los itinerarios o el contenido personalizado.
Opciones Avanzadas para Squarespace
Squarespace no permite PHP ni la "edición real de archivos de plantilla", pero admite algunos flujos de trabajo avanzados.
Uso de Inyección de Código (Code Injection)
Si deseas cargar un script de WeTravel en todo el sitio (por ejemplo, para funciones dinámicas o formularios), puedes utilizar la Inyección de Código.
Ve a: Settings (Configuración) → Advanced (Avanzado) → Code Injection (Inyección de Código)
Puedes añadir:
Header script: se carga de forma global.
Footer script: recomendado para las referencias de los scripts de inserción de WeTravel.
Ejemplo: <script src="https://demo.cdn.wetravel.com/widgets/embed_checkout.js"></script>
Importante: No coloques el código de inserción completo del widget aquí. Solo debes colocar scripts reutilizables.
Cómo añadir widgets a las páginas de producto de Squarespace Commerce
Si vas a sustituir el proceso de pago (checkout) de Squarespace por el de WeTravel:
Ve a Commerce → Inventory (Inventario).
Abre un producto.
Desplázate hasta Additional Info (Información adicional) o Form Customization (Personalización de formulario).
Inserta un Bloque de Código (Code Block) utilizando el área de descripción o detalles del producto.
Pega tu código de inserción.
Guarda los cambios.
Esto te permite anular el flujo predeterminado de "Add to Cart" (Añadir al carrito).
Uso del modo de desarrollador de Squarespace (Solo 7.0)
Si estás utilizando el Developer Mode (poco común, solo para usuarios avanzados):
Clona un archivo de plantilla.
Busca la sección de la página donde deseas que aparezca el botón (por ejemplo, en la vista del artículo o en el item view).
Añade el código de inserción de WeTravel en el lugar correspondiente.
Guarda y vuelve a desplegar (redeploy).
Nota: El modo de desarrollador (Developer Mode) no es compatible con la versión 7.1 de Squarespace.
Visibilidad condicional y reglas de visualización
Squarespace no ofrece lógica condicional nativa (como el plugin ACF de WordPress), pero puedes simular este comportamiento utilizando:
Páginas duplicadas.
Ocultar/mostrar secciones por dispositivo.
CSS personalizado (selectores de visibilidad).
Código personalizado activado por etiquetas (tags) o categorías.
Inyección de widgets de WeTravel solo en URLs de páginas específicas.
Ejemplo: Puedes restringir el widget para que solo aparezca en una página de viaje específica utilizando:
$$<script> if (!window.location.href.includes("trip-name")) { document.getElementById("wetravel-button-here").style.display = "none"; } </script>$$
Si lo deseas, podemos ayudarte a crear una configuración condicional completa basada en un sitio web específico.
Cómo reemplazar el botón de reserva de Squarespace por el de WeTravel
Si tu plantilla ya incluye un botón de "Reservar ahora" o "Registrarse" predeterminado:
Opción A: Reemplazar el enlace
Haz clic en Edit (Editar).
Haz clic en el botón.
Cambia la URL por tu enlace de viaje de WeTravel (Trip Link).
Opción B: Reemplazar todo el botón mediante un Bloque de Código
Añade un Bloque de Código (Code Block).
Pega tu código de inserción.
Elimina u oculta el botón predeterminado de la plantilla.
Opción C: Ocultar el botón predeterminado con CSS
Identifica el ID de la sección.
Ve a Design (Diseño) → Custom CSS (CSS personalizado).
Añade el siguiente código: #old-button-id { display: none; }
Solución de problemas (Troubleshooting)
¿No aparece el widget insertado?
Verifica que utilizaste un Bloque de Código (Code Block) y no las opciones de "Embed" o "Markdown".
Asegúrate de haber pegado el código de inserción completo.
Confirma que tu plan de Squarespace admite Bloques de Código (disponible en los planes Business y superiores).
Desactiva AMP: Squarespace elimina los scripts en las versiones AMP de las páginas.
Revisa si la Política de Seguridad de Contenido (CSP) está bloqueando scripts externos.
Confirma que la página no está utilizando un "Bloque de Resumen" (Summary Block), ya que estos suelen eliminar el código.
Intenta eliminar cualquier HTML circundante si pegaste el código directamente desde un correo electrónico o un documento de texto.
Desactiva temporalmente el almacenamiento en caché (ya sea de Cloudflare o del caché integrado de Squarespace).
¿Necesitas ayuda para encontrar dónde insertar el widget?
La configuración de Squarespace varía dependiendo de:
Familia de plantillas.
Versión 7.0 frente a 7.1.
Commerce frente a planes no comerciales.
Fluid Engine frente a Editor Clásico.
Si las secciones están bloqueadas o limitadas.
Donde se permiten los bloques de código.
Si no logras encontrar el lugar correcto, envía un correo electrónico a info@wetravel.com con la siguiente información:
Un enlace a tu sitio de Squarespace.
Una captura de pantalla de tu editor de página.
Una descripción de cómo quieres que funcione el flujo de reserva.
¡Nuestro equipo interno te ayudará con los siguientes pasos!