Agrega el widget de reservas de Travel404 a Framer
Agrega una barra de búsqueda de reservas en vivo a un sitio de Framer con el componente Embed — no hace falta un plan pago solo para usarlo.
El componente Embed de Framer acepta HTML sin procesar, incluyendo una etiqueta <script>, y lo coloca en el lienzo. Usar el componente en sí no requiere un plan pago — solo lo necesitarías para un dominio personalizado o para quitar la marca de Framer, algo sin relación con el widget.
Antes de empezar
- Tu propiedad configurada en Travel404 con un slug (Propiedad → Motor de reservas lo muestra).
- Acceso de edición al proyecto de Framer.
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 Framer
Abre el menú Insert
En tu proyecto de Framer, abre Insert (o usa el atajo de teclado) y busca "Embed".
Arrastra el componente Embed al lienzo
Colócalo en la página, en el lugar donde quieres la barra de búsqueda.
Pega el código en el campo HTML
Selecciona el componente, abre su panel de propiedades, y pega las dos líneas de Travel404 en el campo HTML.
Ajusta el tamaño
Pon el ancho del componente en Fill y su altura en un valor fijo de unos 600px — el componente Embed de Framer no ajusta la altura automáticamente a contenido arbitrario.
Publica el sitio
Haz clic en Publish. La vista previa del lienzo de Framer no siempre ejecuta los scripts de terceros igual que el sitio en vivo, así que siempre confirma en 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 componente Embed muestra una caja de altura cero o en blanco
Cambia la configuración de altura del componente de Auto a Fixed y ponle un valor como 600px — Framer no puede deducir una altura a partir de una etiqueta de script arbitraria.
El calendario se corta cuando un huésped lo abre
Aumenta más la altura fija, o acepta una barra de desplazamiento interna — la barra de búsqueda compacta en sí es corta, pero el calendario del selector de fechas necesita más espacio para abrir.
Se ve bien en el lienzo pero no en el sitio publicado
Esto puede pasar con scripts de terceros en Framer — siempre prueba en la URL publicada, no en la vista previa del editor.
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
¿Necesito un plan pago de Framer para esto?
No, el componente Embed funciona en el plan gratuito. Los planes pagos importan para un dominio personalizado o para quitar la marca de Framer, no para usar Embed.
¿Puedo agregarlo a una plantilla de página del CMS?
Sí — coloca el componente Embed dentro de una página de colección del CMS igual que en cualquier otra página.
¿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.