Agrega el widget de reservas de Travel404 a WordPress
Agrega una barra de búsqueda de reservas en vivo a cualquier página de WordPress con el bloque HTML personalizado — sin plugin, cinco minutos de principio a fin.
El editor de bloques de WordPress (Gutenberg) trae un bloque HTML personalizado incorporado, así que pegar el código de Travel404 no requiere ningún plugin. Funciona igual en WordPress.org (autoalojado) o en WordPress.com con un plan Business o superior, que es el nivel que permite HTML personalizado.
Antes de empezar
- Tu propiedad configurada en Travel404 con un slug (Propiedad → Motor de reservas lo muestra).
- Acceso de Editor o Administrador a la página de WordPress donde lo vas a agregar — los Colaboradores no pueden publicar cambios.
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 WordPress
Abre la página en el editor de bloques
Ve a Páginas (o Entradas) → busca la página → Editar. Esto abre el editor de bloques Gutenberg.
Agrega un bloque HTML personalizado
Haz clic en el + (Insertar bloque) en la esquina superior izquierda, escribe "HTML personalizado" en el buscador y haz clic para agregarlo donde está tu cursor.
Pega el fragmento
Haz clic dentro del bloque y pega las dos líneas que copiaste de Travel404. No lo vuelvas a escribir — copiar y pegar evita caracteres sueltos.
Previsualiza antes de publicar
Haz clic en Vista previa (arriba a la derecha) y abre la página en una pestaña nueva. Confirma que la barra de búsqueda se muestra.
Publica o Actualiza
Haz clic en Publicar (página nueva) o Actualizar (página existente) para que quede en vivo.
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 muestra una barra de desplazamiento o se ve cortado
Los bloques HTML personalizados se renderizan en línea dentro de la página, así que esto casi siempre es cosa del tema, no de Travel404 — revisa si el tema o un constructor de páginas envuelve esa sección en un contenedor con altura fija u overflow:hidden.
No aparece nada
Lo más común es que un plugin de caché (WP Rocket, W3 Total Cache, LiteSpeed Cache) esté sirviendo una versión de la página anterior a que agregaras el bloque — purga la caché de esa página. Si no se soluciona, un plugin de seguridad (Wordfence, Sucuri) puede estar quitando las etiquetas <script> del contenido al guardar; revisa su registro de firewall o su configuración de hardening.
La barra de búsqueda aparece pero Buscar no hace nada
Verifica que el slug de la propiedad en el código coincida con el que muestra Travel404 → Propiedad → Motor de reservas, y que la propiedad esté publicada y tenga tipos de habitación configurados.
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 plugin o una app para esto?
No. Todo es un fragmento de dos líneas — un <div> y un <script>. No instalas nada desde una tienda de plugins.
¿Funciona con constructores de páginas como Elementor o Divi?
Sí — usa su elemento equivalente (el widget "HTML" de Elementor, el módulo "Código" de Divi) y pega ahí el mismo fragmento en lugar del bloque HTML personalizado de Gutenberg.
¿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.