Agrega el widget de reservas de Travel404 a Squarespace
Agrega una barra de búsqueda de reservas en vivo a Squarespace con un bloque de código. Requiere el plan Core o superior — los planes Personal y Basic bloquean JavaScript.
El bloque de código de Squarespace acepta HTML, CSS y JavaScript sin procesar, insertado en línea donde lo coloques en una página. Lo primero que hay que saber: en el plan Personal o Basic, Squarespace quita las etiquetas <script> de los bloques de código, así que el widget no va a funcionar — necesitas Core (antes llamado Business) o un plan superior.
Antes de empezar
- Un sitio de Squarespace en el plan Core o superior (Personal/Basic quitan las etiquetas <script>).
- Tu propiedad configurada en Travel404 con un slug (Propiedad → Motor de reservas lo muestra).
Pasos
En Travel404
Copia el código del widget
En la app de Travel404, ve a Propiedad → Motor de reservas y abre Widget de barra de búsqueda compacta. En Código de inserción, toca el ícono de copiar. Son dos líneas — un <div> y un <script> — y el slug de tu propiedad ya viene puesto, así que no tienes que editar nada antes de pegarlo.
En Squarespace
Abre la página para editar
Ve a Páginas, abre la página, y pasa el cursor sobre el lugar donde quieres el widget hasta que aparezca un +.
Agrega un bloque de código
Haz clic en el +, y elige Código de la lista de bloques (está en la sección "Más", junto a Insertar y Markdown).
Pega el fragmento
Pega las dos líneas de Travel404 en el panel del bloque de código. Confirma que el formato esté en HTML, no en Markdown.
Aplica y guarda
Haz clic en Aplicar, luego guarda y sal del editor de la página.
Revisa la página en vivo
Abre la página publicada (no la vista previa del editor) para confirmar que la barra de búsqueda carga.
El código para pegar
<div data-t404-property="your-property-slug" data-t404-mode="widget"></div>
<script async src="https://travel404.com/embed.js"></script>Cómo saber que funcionó
Abre la página en vivo en una ventana privada/incógnito — no en una pestaña que ya tenías abierta antes de pegar el código, porque puede mostrar una versión en caché — y confirma que la barra de búsqueda carga con tu propiedad, que los selectores de fecha abren, y que Buscar lleva al huésped a una página de reserva. Si no aparece nada, revisa los pasos de arriba antes de asumir que está roto.
Si algo se ve mal
El editor del bloque de código elimina la etiqueta <script> sin avisar
Estás en el plan Personal o Basic — esos planes permiten HTML/CSS en los bloques de código pero quitan JavaScript. No hay una solución alternativa soportada; sube a Core o superior (los trucos de la comunidad con bloques Markdown en el footer no están soportados y pueden dejar de funcionar sin previo aviso).
El widget muestra una barra de desplazamiento o se ve cortado
Los bloques de código son en línea, así que esto es raro en Squarespace — revisa si hay CSS personalizado apuntando a .sqs-block-code con una altura fija u overflow:hidden.
Se ve en el editor pero desaparece en el sitio en vivo
Asegúrate de haber hecho clic en Aplicar dentro del bloque y luego guardado la página — salir de un bloque de código abierto sin aplicar revierte los cambios.
No se ve en celular
Abre la configuración del bloque y revisa que no esté oculto en móvil — Squarespace permite activar o desactivar la visibilidad por dispositivo.
Preguntas frecuentes
¿Qué plan de Squarespace necesito?
Core o superior (llamado Business en los nombres de planes antiguos). Personal y Basic quitan la etiqueta <script> que el widget necesita.
¿Dónde está exactamente el bloque de Código?
Haz clic en el + para insertar un bloque, y busca en la sección "Más" — Código está junto a Insertar y Markdown, no en la lista principal de bloques.
¿Puedo poner el widget en más de una página?
Sí. Pega el mismo fragmento donde tenga sentido — inicio, una página dedicada de "Reservar ahora", hasta tu footer. embed.js soporta cualquier cantidad de copias en la misma página o en todo el sitio.
Míralo funcionando en tu hostel
Configúralo en 30 minutos. Sin tarjeta de crédito.