Puedes insertar los widgets de WeTravel, como el botón de Reserva Ahora, los Paquetes de Precios, el Resumen del Viaje y el widget de Reseñas, directamente en tu sitio web de WordPress. Esto permite que tus visitantes exploren tus viajes y completen su reserva sin salir de tu sitio.
Como WordPress es compatible con una gran variedad de editores, constructores visuales y temas, esta guía cubre múltiples formas de añadir tu código de WeTravel dependiendo de tu configuración.
💡 Importante: La ventana emergente de pago (el overlay de iFrame) requiere JavaScript y es compatible con WordPress.org y con los planes Premium de WordPress.com o superiores. No es compatible con el plan gratuito ni con el plan personal de WordPress.com.
Antes de empezar
Para insertar un widget de WeTravel, primero debes copiar su código.
Obtén tu código de inserción de WeTravel
Inicia sesión en tu cuenta de WeTravel.
Abre el viaje que quieras insertar.
Ve a Promote (Promocionar) → Embed (Insertar).
Selecciona tu widget (Reserva ahora, Paquetes de precios, Resumen del viaje, Reseñas, etc.).
Haz clic en Copy Code (Copiar código).
Pegarás este código en tu página, entrada o plantilla de WordPress utilizando una de las opciones que se muestran a continuación.
Añade el código de inserción a tu sitio de WordPress
Elige la sección que coincida con tu editor o con tu constructor de páginas.
Opción 1: Editor de bloques (Gutenberg)
(Editor predeterminado en las versiones modernas de WordPress)
En tu panel, ve a Páginas o Entradas.
Edita la página donde quieras insertar el widget.
Haz clic en el icono + para añadir un bloque.
Busca y selecciona HTML personalizado.
Pega tu código de inserción de WeTravel dentro del bloque.
Haz clic en Vista previa para verificar que el widget se cargue correctamente.
Haz clic en Publicar o Actualizar.
Opción 2: Editor Clásico o Bloque Clásico
Si tu sitio utiliza el plugin Classic Editor o el bloque clásico dentro de Gutenberg:
Abre la página o entrada.
Cambia del modo Visual al modo Texto (o elige Editar como HTML en un bloque Clásico).
Pega tu código de inserción de WeTravel.
Vuelve al modo Visual si lo necesitas.
Guarda y haz clic en Vista previa.
Haz clic en Actualizar o en Publicar.
Opción 3: Constructor de páginas Elementor
Crea o edita una página con Elementor.
Añade un bloque de código HTML a la página.
Pega tu código de inserción de WeTravel en el widget.
Haz clic en Actualizar.
Previsualiza la página para asegurarte de que el widget se cargue correctamente.
Opción 4: Constructor Divi
Abre tu página utilizando el Divi Builder.
Añade un Módulo de Código (Code Module).
Pega tu código de inserción de WeTravel dentro del módulo.
Guarda los cambios del módulo.
Haz clic en Publicar o Actualizar.
Nota sobre Condiciones Dinámicas:
La lógica condicional de Divi te permite mostrar u ocultar el módulo basándose en campos de ACF (Advanced Custom Fields), categorías y mucho más.
Opción 5: Otros constructores de páginas (WPBakery, Beaver Builder, etc.)
La mayoría de los constructores de páginas cuentan con un módulo de HTML o de código.
Edita tu página.
Añade un módulo de HTML, código o HTML sin formato (Raw HTML).
Pega tu código de inserción de WeTravel.
Guarda y publica los cambios.
Haz clic en Vista previa para confirmar que todo funciona correctamente.
Insertar widgets de WeTravel en plantillas de WordPress (Para desarrolladores)
Si utilizas plantillas personalizadas (por ejemplo, un custom post type como “Viajes”), es posible que quieras que el widget de WeTravel aparezca automáticamente en cada página de viaje.
Un enfoque común es almacenar el UUID del viaje de WeTravel en un campo personalizado (custom field) y cargar el widget de forma condicional en la plantilla.
Paso 1: Instalar y activar Advanced Custom Fields (ACF)
Ve a Plugins → Añadir nuevo.
Busca Advanced Custom Fields.
Instálalo y actívalo.
Paso 2: Crear un campo para el UUID
Ve a Campos personalizados (Custom Fields) → Añadir nuevo.
Crea un grupo de campos (por ejemplo: “Detalles del viaje de WeTravel”).
Añade un campo llamado Trip UUID.
Tipo de campo: Texto.
Asígnalo a tu tipo de contenido (post type) de Viajes.
Haz clic en Publicar el grupo de campos.
Ahora, tus editores podrán introducir el UUID del viaje de WeTravel directamente en WordPress.
Paso 3: Añadir lógica condicional en la plantilla
En el archivo de plantilla de tu tema (por ejemplo, single-trip.php), puedes mostrar el código de inserción de WeTravel de forma condicional si el UUID está presente.
Ejemplo de fragmento de código (snippet):
Esto mantiene la coherencia de tu diseño:
Con UUID = muestra el widget de WeTravel.
Sin UUID = muestra tu diseño original o una llamada a la acción (CTA) alternativa.
Podemos ayudarte a adaptar este fragmento de código para el widget que desees utilizar.
Si no puedes editar los archivos de la plantilla — Usa un Code Snippet
Algunos temas no permiten el acceso directo a sus archivos de plantilla. En ese caso, puedes utilizar un plugin de Code Snippets.
Instala el plugin Code Snippets para WordPress.
Crea un nuevo fragmento de código (snippet).
Añade un bloque condicional similar al ejemplo anterior.
Configúralo para que se ejecute solo en el front-end.
Guarda y prueba la página.
Esto te permite inyectar el widget de WeTravel en cualquier diseño de viaje sin tener que tocar los archivos del tema.
Previsualiza y prueba tu página
Después de añadir el código:
Prueba en modo de previsualización.
Revisa en computadoras de escritorio y en dispositivos móviles.
Haz clic en "Reserva ahora" para asegurarte de que la ventana emergente (checkout overlay) se abra correctamente.
Asegúrate de que ningún plugin de caché esté bloqueando la inserción del código.
Aprende más sobre cómo instalar un plugin de WordPress aquí.
¿Necesitas ayuda con la integración del widget? Ponte en contacto con nosotros y nuestro equipo interno te ayudará con los siguientes pasos.