Agrega el widget de reservas de Travel404 a Webflow
Integra la barra de búsqueda de reservas en Webflow con el elemento Embed. Requiere un plan de sitio pago o un plan de Workspace pago — el plan gratuito Starter lo bloquea al publicar.
El elemento Embed de Webflow (a veces llamado Code Embed) te deja insertar HTML sin procesar en el lienzo del Designer como cualquier otro elemento. Funciona en el Designer en cualquier plan, pero publicar una página que lo use requiere un plan de sitio pago o un plan de Workspace pago — Webflow bloquea que el Code Embed salga en vivo en el nivel gratuito Starter.
Antes de empezar
- Un sitio de Webflow con un plan de sitio pago (o un Workspace pago) — los sitios Starter gratuitos no pueden publicar el Code Embed.
- 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 Webflow
Abre la página en el Designer
Desde tu panel de Webflow, abre el sitio y luego la página que quieres.
Agrega un elemento Embed
Abre el panel Add (+), busca "Embed" y arrástralo a la página donde quieres el widget.
Pega el código
Haz doble clic en el elemento Embed (o en el ícono del lápiz) para abrir su editor de código, pega las dos líneas de Travel404, y haz clic en Save.
Ajusta el tamaño
En el panel Style, pon el ancho del elemento en 100% y la altura en Auto si está disponible — si no, los embeds de Webflow por defecto quedan en una caja pequeña de tamaño fijo.
Publica el sitio
Haz clic en Publish (arriba a la derecha). La vista previa propia del Designer no siempre ejecuta los scripts insertados — siempre revisa la URL publicada.
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 widget no aparece ni después de publicar
Revisa Site Settings → Plan (o tu plan de Workspace). Los elementos Code Embed no se publican en el nivel gratuito Starter — necesitas un plan de sitio pago o un Workspace pago.
No encuentro "Embed" en el panel Add
Escribe "embed" en el buscador del panel Add — está agrupado bajo Components/Advanced, no en los elementos básicos de arriba.
El widget muestra una barra de desplazamiento o el calendario se corta
La altura del elemento Embed quedó en un tamaño fijo pequeño por defecto. Abre el panel Style y pon la altura en Auto, o un valor fijo generoso (600px), para que el calendario tenga espacio de abrir.
El widget aparece en inglés pero mis huéspedes hablan español
Agrega data-t404-lang="es" al <div> (ej. <div data-t404-property="your-property-slug" data-t404-mode="widget" data-t404-lang="es">). Ese atributo solo aplica a mode="book"; el snippet de widget de arriba siempre se muestra en inglés.
Preguntas frecuentes
¿Qué plan de Webflow necesito?
Un plan de sitio pago o un plan de Workspace pago. Los elementos Code Embed existen en sitios gratuitos dentro del Designer, pero Webflow no los publica en el nivel gratuito Starter.
¿Puedo agregarlo a una página de Colección del CMS?
Sí — coloca el Embed dentro de una plantilla de Colección si quieres que aparezca automáticamente en cada página de propiedad, o usa un slug fijo si una página corresponde a una sola propiedad.
¿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.