Agrega el widget de reservas de Travel404 a Google Sites
Agrega una barra de búsqueda de reservas en vivo a una página de Google Sites con Insertar → Insertar → Código de inserción — gratis en una cuenta personal.
El nuevo Google Sites (no la versión "clásica" de antes de 2016) trae una opción de Código de inserción en el menú Insertar, que acepta HTML, CSS y JavaScript sin procesar. Es gratis en una cuenta personal de Google; en una cuenta de Workspace, un administrador puede desactivar las inserciones de terceros para todo el dominio.
Antes de empezar
- Tu propiedad configurada en Travel404 con un slug (Propiedad → Motor de reservas lo muestra).
- Acceso de Editor al sitio de Google, en el nuevo Google Sites (no el clásico).
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 Google Sites
Abre la página y el panel Insertar
Con el sitio abierto para editar, haz clic en Insertar en el panel de la derecha.
Elige Insertar → Código de inserción
Haz clic en Insertar, y luego en la pestaña Código de inserción.
Pega el fragmento
Pega las dos líneas de Travel404 en la caja de código, y haz clic en Siguiente.
Insértalo
Google Sites muestra una vista previa — haz clic en Insertar para colocarlo en la página.
Cambia el tamaño de la caja
Arrastra los controladores de la caja insertada para que mida unos 600px de alto — Google Sites no ajusta la caja al contenido, así que deja espacio para que el calendario abra.
Publica
Haz clic en Publicar (arriba a la derecha). Los cambios solo son visibles para ti hasta que lo hagas.
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
La opción Insertar está en gris o no hace nada
En una cuenta de Google Workspace, un administrador puede desactivar las inserciones de terceros para todo el sitio (Consola de administración → Apps → Google Workspace → Sites). Pídele a tu administrador que lo habilite, o crea la página en una cuenta personal de @gmail.com.
El widget muestra una barra de desplazamiento o el calendario se corta
Arrastra los controladores de la caja insertada para hacerla más alta en el editor — igual que en Wix, Google Sites usa una caja de altura fija que no crece según el contenido.
Se ve para mí pero no para los visitantes
Editaste la página pero no hiciste clic en Publicar — Google Sites guarda los cambios como borrador visible solo para los editores hasta que se publica.
Estoy usando el Google Sites "clásico" antiguo
Sites clásico (de antes de 2016) no tiene esta función de Código de inserción — migra el sitio al nuevo Google Sites primero.
Preguntas frecuentes
¿Qué plan de Google necesito?
Ninguno en una cuenta personal de Google — es gratis. En una cuenta de Workspace (empresa/escuela), tu administrador controla si las inserciones están permitidas.
¿Funciona en el Google Sites clásico?
No — solo el nuevo Google Sites tiene la opción de Código de inserción. Migra primero si todavía usas el clásico.
¿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.