Guía de Configuración
Horizon Studio y Configura tu App
Personaliza tu app y descubre todas las funciones de Horizon Studio. Los campos ya están pre-rellenados con valores óptimos: cambia solo lo que quieras personalizar.
CORS Fix para Integración Externa
Si tu sitio se muestra dentro de la app y las imágenes no se ven, debes añadir estas líneas a tu servidor. Sin esta configuración, la app no puede cargar las imágenes de tu sitio.
¿Por qué es necesario CORS?
📱 Tu App
→
🌐 Tu sitio
❌ Imágenes bloqueadasEl servidor no permite la carga externa
📱 Tu App
→
✅ Tu sitio
con CORS activo
con CORS activo
✅ ¡Imágenes cargadas!El servidor permite la carga
Copia este código al principio de tu archivo
.htaccess. Debe ser el primer bloque del archivo. Si no sabes dónde encontrar este archivo, pregunta a tu webmaster o a tu proveedor de hosting. .htaccess
# CORS FIX
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, OPTIONS, POST"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</IfModule>En caso de error 500 o si el servidor no reconoce las directivas, es necesario habilitar el módulo headers de Apache desde el terminal del servidor con el comando:
A continuación, reinicia Apache con
sudo a2enmod headersA continuación, reinicia Apache con
sudo systemctl restart apache2Después de añadir el código, las imágenes de tu sitio serán visibles en la app en pocos minutos. Si el problema persiste, contacta con soporte.
Integración de Sitio, Blog o Social Embed (White-Label)
Para mostrar tu sitio web, blog o contenido social dentro de la plataforma, la fuente debe permitir el "framing". Sigue este procedimiento. En pocos minutos estará todo listo.
Plan Pro: La integración de tu sitio web o blog personalizado dentro de la app está disponible exclusivamente con el plan Pro. Los planes Starter y Premium utilizan Horizon Studio como plataforma de publicación.
Fase 1: Test de Compatibilidad
Antes de modificar nada, verifica si tu sitio/blog ya está listo.
1
Ve al sitio IFrameTester.com
2
Pega la URL completa de tu sitio o blog (ej.
https://www.miblog.es)3
Haz clic en Render
¿Tu sitio aparece en el recuadro? No tienes que hacer nada: ¡tu sitio/blog ya es compatible!
¿Ves un error tipo "Refused to connect" o un recuadro gris? Tu servidor está bloqueando la integración. Pasa a la Fase 2.
Fase 2: Solución Técnica
Pide a tu webmaster o a tu proveedor de hosting que aplique una de estas configuraciones. Estas instrucciones eliminan los bloqueos de seguridad y permiten a la plataforma mostrar tu contenido.
Opción A: Servidor Nginx
Edita el archivo de configuración del sitio añadiendo estas líneas:
nginx
# Elimina el bloqueo de seguridad restrictivo
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options "" always;
# Permite la integración universal (White-Label)
add_header Content-Security-Policy "frame-ancestors *;" always;Opción B: Servidor Apache (.htaccess) ← Recomendada
Añade estas líneas al principio de tu archivo .htaccess:
apache
<IfModule mod_headers.c>
Header always unset X-Frame-Options
Header always set Content-Security-Policy "frame-ancestors *"
</IfModule>Opción C: functions.php ← Más sencillo
Si no tienes acceso a los archivos del servidor, añade este código al archivo functions.php de tu tema activo:
php
function allow_white_label_framing() {
// Desbloquea las restricciones de seguridad del sitio
remove_action( 'login_init', 'send_frame_options_header', 10 );
remove_action( 'admin_init', 'send_frame_options_header', 10 );
// Habilita la visualización externa
header("Content-Security-Policy: frame-ancestors *");
header_remove("X-Frame-Options");
}
add_action('send_headers', 'allow_white_label_framing', 1);Fase 3: Habilitar Funciones Avanzadas (Opcional)
Para ofrecer la mejor experiencia a tus usuarios, añade este script en el <head> de tu sitio. El script habilita funciones adicionales como navegación optimizada y animaciones fluidas dentro de la app.
1
Abre el archivo HTML de tu sitio (o el archivo template del tema)
2
Busca la etiqueta
<head> ... </head>3
Pega el siguiente script antes del cierre de
</head>html
<script src="https://scripts.travelinfluencer.co/horizon-webview-helper.js" data-horizon-webview async></script>Qué hace este script: Habilita navegación optimizada, animaciones fluidas y transiciones avanzadas cuando tu sitio se visualiza dentro de la app de Travelinfluencer. El sitio sigue funcionando con normalidad incluso sin el script.
Opcional pero recomendado: El script es ligero, se carga de forma asíncrona y no afecta al rendimiento de tu sitio. No hace nada si el sitio no se abre dentro de la app.
Requisitos Fundamentales
Protocolo HTTPS: Tu sitio/blog debe tener un certificado SSL activo. Los sitios en
http:// (no seguros) no pueden cargarse.Cloudflare: Si usas Cloudflare, desactiva cualquier regla de tipo "HSTS" u "Origin Shield" que fuerce el header
X-Frame-Options: SAMEORIGIN.Soporte: Si después de aplicar estos cambios la prueba sigue fallando, contacta con el soporte técnico de tu proveedor proporcionando la captura de pantalla de la prueba realizada en IFrameTester.com.
Social Embed: Algunas plataformas sociales permiten integrar (embed) sus contenidos directamente en tu app. La disponibilidad de esta función depende de la plataforma social: no todas las redes sociales admiten embed. Si la red social lo permite, el contenido se mostrará de forma nativa dentro de la app sin necesidad de configuraciones adicionales.
Dominio Personalizado (White-Label)
Si tu plan incluye la opción Custom Domain, puedes vincular tu dominio o subdominio (ej. app.tunombre.es) a la plataforma. Tus usuarios accederán a tu app desde tu dirección web.
Cómo funciona el apuntamiento DNS
🌐 app.tunombre.es
→
🔗 Registro CNAME
apunta a
→
connect.travelinfluencer.co
🔒 Certificado SSL
generado automáticamente
generado automáticamente
→
✅ ¡Tu App está en línea!
accesible desde app.tunombre.es
accesible desde app.tunombre.es
Instrucciones para el Apuntamiento DNS
Accede al panel de gestión de tu dominio (ej. Aruba, Cloudflare, Register) y añade un nuevo registro DNS:
| Campo | Valor a introducir |
|---|---|
| Tipo de Registro | CNAME |
| Host / Nombre | app, o el nombre que prefieras: viajes, portal, connect... |
| Destino / Valor | connect.travelinfluencer.co |
| TTL | Automático o 3600 |
Notas Importantes
No uses registros de tipo A (direcciones IP). Usa exclusivamente el registro CNAME apuntando a
connect.travelinfluencer.co. Esto garantiza que tu servicio siga activo incluso en caso de actualizaciones de nuestros servidores.SSL / HTTPS automático: Una vez configurado el apuntamiento, nuestro sistema generará automáticamente un certificado SSL gratuito para tu dominio en pocos minutos.
Propagación DNS: Los cambios en los DNS pueden tardar desde unos minutos hasta algunas horas en ser visibles a nivel global.
¿Qué pasa después?
1
Creas el registro CNAME en tu panel DNS
2
Nuestro sistema detecta el apuntamiento y genera automáticamente el certificado SSL
3
Tu app será accesible desde tu dirección personalizada (ej.
app.tunombre.es)Atención. Degradación de dominio personalizado a subdominio: El dominio personalizado está integrado en la configuración interna de tu app (sesiones de usuario, certificados SSL, indexación). El paso de un dominio personalizado a un subdominio estándar conlleva una reestructuración completa del entorno que hace incompatibles los datos existentes. La configuración de la app, los ajustes personalizados y los contenidos asociados al dominio se perderán definitivamente. Esta operación es irreversible: antes de hacer una degradación, asegúrate de haber guardado todo lo que necesites.
Horizon Studio
Horizon Studio es la plataforma que te permite configurar tu app y gestionar tu blog de contenidos.
Plataforma completa: Horizon Studio es mucho más que un simple blog. Incluye editor avanzado, badges promocionales, CTA con enlaces externos, monitorización de visualizaciones, sistema de likes, comentarios y perfiles de autor personalizables — todo gestionado desde el frontend.
📝 Creación y Gestión de Contenidos
Todo lo que necesitas para crear y gestionar tus artículos, directamente desde el frontend.
| Función | Descripción |
|---|---|
| Editor frontend completo | Creación y edición de artículos con editor visual TinyMCE (barra de herramientas completa). Formato de texto, inserción de imágenes, enlaces y mucho más. |
| Imágenes destacadas | Subida con vista previa inmediata. El sistema muestra una vista previa antes de la publicación. |
| Estado de publicación | Alternancia rápida entre Publicado y Borrador directamente desde la lista de artículos. No se requiere confirmación: un clic para cambiar de estado. |
| Eliminación permanente | Eliminación de artículos con confirmación explícita. Las imágenes asociadas se eliminan automáticamente. |
| Comentarios | Activación/desactivación para cada artículo. Plantilla de comentarios personalizada con soporte para respuestas anidadas. Activa o desactiva los comentarios individualmente para cada contenido. |
🏷️ Sistema de Badges
Cada artículo puede marcarse con un badge visual que se muestra en la tarjeta y en el post individual. Los badges aparecen como etiquetas de color superpuestas en la imagen destacada.
| Badge | Significado | Caso de uso |
|---|---|---|
| Promo | Oferta promocional | Descuentos, ofertas por tiempo limitado, códigos promocionales |
| Nuovo | Contenido recién publicado | Destacar novedades, añadidos recientes al catálogo |
| Hot | Contenido popular | Best-sellers, tendencias del momento, contenidos virales |
| Gratis | Contenido gratuito | Recursos gratuitos, guías gratuitas, pruebas, regalos |
Dónde aparecen: Los badges son visibles en la tarjeta del artículo de la lista, en el perfil del autor y en el post individual — siempre superpuestos en la imagen destacada.
🔗 CTA con Enlaces Externos
Cada artículo puede incluir una Call-To-Action con enlace externo, perfecta para monetizar contenidos y enlazar a recursos externos.
Casos de uso
| Tipo | Descripción | Ejemplo |
|---|---|---|
| Enlace de afiliación | Enlazar a productos/servicios de terceros con seguimiento de comisiones | Enlace a Booking.com, Amazon, etc. |
| Paquetes y productos | Enlace a páginas de compra, landing pages, e-commerce | "Reserva el paquete de vacaciones" |
| Guías y recursos | Enlazar a tutoriales, documentación, cursos online | "Descarga la guía PDF" |
| Sitios externos | Cualquier URL externa para más información, demos, etc. | "Visita el sitio del partner" |
Cómo funciona en el post individual
La CTA se muestra como un botón visible en el box promo del post individual, con:
- Label — el texto del botón (ej. "29,99 €", "Descubre", "Reserva ahora")
- Enlace — se abre en una nueva pestaña con
rel="noopener noreferrer"por seguridad - Icono de flecha — indica la acción de salida hacia el sitio externo
👁 Monitorización de Visualizaciones
El conteo de visualizaciones es automático y está activo por defecto para todos los artículos. No se requiere ninguna configuración.
| Función | Detalle |
|---|---|
| Contador automático | El contador se incrementa automáticamente en cada visita al post individual. |
| Visualización en la lista | El conteo se muestra en cada tarjeta de artículo con el icono 👁. |
| Sin configuración | El seguimiento está activo por defecto para todos los artículos publicados. |
👤 Visualizaciones de Perfil
El conteo de visualizaciones de los perfiles de autor/influencer es automático y está activo por defecto. No se requiere ninguna configuración.
| Función | Detalle |
|---|---|
| Contador automático | El contador se incrementa automáticamente en cada visita al perfil del autor/influencer. |
| Visualización en el perfil | El conteo se muestra en la página del perfil de autor/influencer con el icono 👁. |
| Sin configuración | El seguimiento está activo por defecto para todos los perfiles de autor/influencer publicados. |
❤️ Sistema de Likes
Sistema de apreciación pública, sin necesidad de inicio de sesión. Funciona para todos los visitantes, incluidos los anónimos.
| Función | Detalle |
|---|---|
| Like público | No se requiere inicio de sesión. Los visitantes anónimos pueden dar like a cualquier artículo. |
| Prevención de duplicados | El estado del like se guarda en el navegador para evitar múltiples likes desde el mismo dispositivo. |
| Feedback visual | El corazón se rellena y el contador se actualiza en tiempo real con una animación fluida. |
| Endpoint público | Accesible tanto por usuarios autenticados como por visitantes anónimos. No se requiere autenticación. |
👤 Perfiles de Autor Personalizables
Cada autor tiene una página de perfil pública completamente personalizable, visible para todos los visitantes.
| Elemento | Descripción |
|---|---|
| Imagen hero | Banner de ancho completo con superposición de degradado. La imagen cubre toda la parte superior del perfil. |
| Avatar | Imagen circular superpuesta al hero. Se convierte en el símbolo visual del autor en todo el sitio. |
| Bio HTML | Descripción con formato enriquecido (negrita, enlaces, listas). Admite HTML completo para una bio profesional. |
| Nickname | Nombre mostrado personalizado, independiente del nombre de usuario. |
| Colores personalizados | 6 colores personalizables (fondo, botones, texto, tarjetas) + redondeo de imagen. Cada perfil puede tener su propio estilo único. |
| Cuadrícula de artículos | Todos los posts publicados del autor, mostrados en cuadrícula con badge y precio destacado en cada tarjeta. |
Personalización total: Los perfiles de autor son completamente independientes. Cada autor puede elegir sus propios colores, su propio hero y su propio estilo — creando una identidad visual única dentro de la plataforma.
Configuración de la App
Todos los campos ya están pre-rellenados con valores óptimos. Cambia solo lo que quieras personalizar. Siempre puedes volver a los valores originales con el botón Reset.
¡No tienes que rellenar todo! Los valores predeterminados ya son óptimos para la mayoría de los usuarios. Personaliza solo aquello que hace única a tu app.
Campos y planes: Algunos campos dependen del plan contratado (Starter, Premium, Pro). Los campos bloqueados por el plan no son modificables. Esta guía muestra todos los campos disponibles. Los que no sean accesibles aparecerán deshabilitados en la configuración.
Primer acceso: Antes de poder acceder a tu app, se te pide elegir un nombre de dominio (ej.
tunombre.travelinfluencer.co). Para abrir la app, escribe esa dirección en la barra de búsqueda de tu navegador. branding · colors
La identidad visual de tu app: logo, colores y fuente.
| Campo | Predeterminado | Qué hace |
|---|---|---|
logoUrlURL | Logo TravelInfluencer | La imagen que representa tu app. Formato PNG, mínimo 512×512px. Usada como icono en cada punto de la app. Cómo insertar el logo: sube una imagen desde tu perfil y copia la URL generada, o pega directamente la URL de una imagen online. Si las imágenes no se cargan, consulta la sección CORS Fix. |
backgroundColorColor | #00519C | El color principal de tu marca. Usado en la barra del navegador y como color del tema. |
splashBackgroundColorColor | #FFFFFF | El color de fondo cuando se inicia la app. Normalmente blanco o el color de la marca. |
Mostrar todos los colores personalizables
Cada color está en formato #RRGGBB. Los valores mostrados son los predeterminados.
Superficie y Fondo
| Campo | Predeterminado | Uso |
|---|---|---|
colors.primary | #00519C | Botones primarios, indicadores activos, AppBar |
colors.surface | #FFFFFF | Fondo de tarjetas, diálogos, bottom sheet |
colors.background | #F7F9FC | Fondo principal detrás de todo |
colors.surfaceTint | #E8EDF5 | Fondos semitransparentes, switch track |
colors.surfaceTintLight | #F0F4FA | Variante más clara de surfaceTint |
Texto
| Campo | Predeterminado | Uso |
|---|---|---|
colors.textPrimary | #0F172A | Títulos y contenidos importantes |
colors.textSecondary | #475569 | Subtítulos e información complementaria |
colors.textTertiary | #94A3B8 | Hints, placeholders, información poco importante |
colors.textDisabled | #CBD5E1 | Elementos deshabilitados |
Stati
| Campo | Predeterminado | Uso |
|---|---|---|
colors.success | #16A34A | Confirmaciones, estado "completado" |
colors.warning | #F59E0B | Avisos y atención |
colors.error | #DC2626 | Errores principales |
colors.errorLight | #FEF2F2 | Fondo claro para áreas de error |
colors.errorBorder | #FECACA | Borde de tarjetas/contenedores de error |
colors.errorSecondary | #EF9A9A | Color de error secundario, fondo claro |
colors.errorText | #E53935 | Texto de mensajes de error |
colors.errorDark | #D32F2F | Color de error oscuro, para acciones importantes |
Categorías de Viaje
| Campo | Predeterminado | Uso |
|---|---|---|
colors.categoryAccommodation | Color de alojamiento | Hoteles, B&B, etc. |
colors.categoryTransport | Color de transporte | Vuelos, trenes, etc. |
colors.categoryFood | Color de comida | Restaurantes, etc. |
colors.categoryActivities | Color de actividades | Tours, excursiones |
colors.categoryOther | Color otros | Gastos no clasificables |
Estados de Viaje
| Campo | Uso |
|---|---|
colors.statusUpcoming | Badge "In arrivo" |
colors.statusInProgress | Badge "In corso" |
colors.statusCompleted | Badge "Completato" |
Varie
| Campo | Uso |
|---|---|
colors.border | Borde estándar para tarjetas e inputs |
colors.borderLight | Borde claro para separaciones sutiles |
colors.divider | Líneas divisorias entre secciones |
colors.iconSecondary | Iconos decorativos secundarios |
colors.overlayBackground | Fondo de overlay oscuro (popup, diálogo) |
colors.overlayText | Texto sobre fondo de overlay oscuro |
colors.shadow | Color base de sombras (normalmente #000000) |
colors.shadowOpacity0.0-1.0 | Transparencia de las sombras |
colors.onPrimary | Texto/iconos sobre el color primary |
colors.onSecondary | Texto/iconos sobre el color secondary |
colors.onSurface | Texto/iconos sobre el color surface |
colors.onError | Texto/iconos sobre el color error |
app
La información base: nombre, versión e identidad de la app.
| Campo | Predeterminado | Qué hace |
|---|---|---|
appNameTexto | Horizon | El nombre de tu app mostrado a los usuarios: aparece en el título, en la barra y en toda la app. |
appVersionTexto | 1.0.0 | Número de versión (referencia interna). |
poweredByTextTexto | powered by travelinfluencer.co | Texto "powered by" al final de la página info. Visible solo si "Mostrar powered by" está activo. |
aiButtonTextTexto | HorizonAI | El nombre de tu asistente AI: aparece en la barra y en la pantalla AI. Para cambiar la identidad ve a la sección ai. |
links
Todos los enlaces y páginas conectadas a tu app.
| Campo | Tipo | Qué hace |
|---|---|---|
website | URL | Enlace a tu sitio web, Horizon Studio o social (si embed es posible): mostrado como botón "Explorar" en la página info. Nota: el enlace a tu sitio web personalizado está disponible solo con el plan Pro. |
privacyPolicy | URL | Enlace a la página de Política de Privacidad. |
termsAndConditions | URL | Enlace a la página de Términos y Condiciones. |
promoPopup | URL | URL de la página mostrada en el popup promocional. Apare después de X segundos de la apertura. |
infoHeaderImageUrl | URL | Imagen de cabecera en la parte superior de la página info. Ancho recomendado: 1200px+. Cómo insertar la imagen de cabecera: sube una imagen desde tu perfil y copia la URL generada, o pega directamente la URL de una imagen online. Si las imágenes no se cargan, consulta la sección CORS Fix. |
services · socialLinks
Los servicios mostrados en la barra de navegación (bottom bar) y los enlaces sociales en el menú lateral (drawer) de la app.
Máximo 5 servicios activos en la barra de navegación. El número de servicios disponibles depende del plan. Solo los primeros 5 servicios con toggle activo aparecerán en la barra inferior.
Servicios disponibles
Para cada servicio introduce el enlace de afiliación y usa el toggle para activarlo o desactivarlo. El número de servicios disponibles depende del plan.
| Icono | Nombre del Servicio | Qué introducir en el campo URL |
|---|---|---|
| ✈️ | Flights | Enlace de afiliación para busqueda de vuelos |
| 🏨 | Hotels | Enlace de afiliación para reserva de hotel |
| 🏡 | Vacation Homes | Enlace de afiliación para casas vacacionales y apartamentos |
| 📦 | Packages | Enlace de afiliación para paquetes vacacionales (vuelo + hotel) |
| 🚗 | Cars | Enlace de afiliación para alquiler de coche |
| 🛡️ | Insurance | Enlace de afiliación para seguro de viaje |
| 📱 | eSIM | Enlace de afiliación para tarjetas SIM virtuales |
| 🗺️ | Tours | Link affiliato per tour, biglietti musei e attività |
| 🚢 | Cruises | Enlace de afiliación para cruceros |
| 🧳 | Luggage Storage | Enlace de afiliación para deposito de equipaje |
| 🚂 | Trains | Enlace de afiliación para billetes de tren |
| 🚌 | Bus | Enlace de afiliación para billetes de autobus |
| ⛴️ | Ferries | Enlace de afiliación para transbordadores y ferris |
| 🚕 | Taxi | Enlace de afiliación para reserva de taxi |
| 🛺 | Airport Transfer | Enlace de afiliación para transfer desde/hacia el aeropuerto |
| 🔒 | VPN | Enlace de afiliación para servicios VPN |
| 🍽️ | Restaurants | Enlace de afiliación para reserva de restaurantes |
| ⛷️ | Equipment Rental | Enlace de afiliación para alquiler de equipamiento deportivo |
| 🛥️ | Yachts | Enlace de afiliación para alquiler de yates y barcos |
| 🚐 | Camper | Enlace de afiliación para alquiler de autocaravana y RV |
| 📋 | Book Now | Enlace a la página de reserva generica |
| 🛍️ | Buy Now | Enlace a la página de compra |
| 🚲 | Bike | Enlace de afiliación para alquiler de bicicletas |
| 🏍️ | Motorcycle | Enlace de afiliación para alquiler de motos |
| 🔑 | Rent Now | Enlace de afiliación para alquiler genérico |
| 💬 | Escribe whatsapp: abre chat con el número configurado en Empresa | |
| ✉️ | Escribe email: abre cliente de email con la dirección de la empresa | |
| 📞 | Phone | Escribe phone: abre marcador con el número de la empresa |
URL especiales: Para WhatsApp, Email y Teléfono usa respectivamente
whatsapp, email, phone come URL: l'app aprirà automáticamente l'applicazione corretta. Le informazioni di contatto di questi campi vengono impostate nella sezione "business".Plataformas Sociales (visibles en el menú lateral de la app)
| Icono | Plataforma | Qué introducir en el campo URL |
|---|---|---|
| ▶️ | YouTube | URL del canal de YouTube, ej. https://youtube.com/@tucanal |
| 🎵 | TikTok | URL del perfil de TikTok, ej. https://tiktok.com/@tuperfil |
| 📸 | URL del perfil de Instagram, ej. https://instagram.com/tuperfil | |
| 👍 | URL de la página de Facebook, ej. https://facebook.com/tupagina | |
| 🐦 | X (Twitter) | URL del perfil de X, ej. https://x.com/tuperfil |
| 💼 | URL de la página o perfil de LinkedIn, ej. https://linkedin.com/company/tu-empresa | |
| 📌 | URL del perfil o tablero de Pinterest, ej. https://pinterest.com/tuperfil | |
| 🎧 | Spotify | URL del perfil o playlist de Spotify, ej. https://open.spotify.com/user/tuperfil |
| 🎶 | Apple Music | URL del perfil de Apple Music, ej. https://music.apple.com/tuperfil |
| ☁️ | SoundCloud | URL del perfil de SoundCloud, ej. https://soundcloud.com/tuperfil |
| 📦 | Amazon | URL de la tienda o storefront de Amazon, ej. https://amazon.com/shop/tuperfil |
| 🎬 | Vimeo | URL del perfil de Vimeo, ej. https://vimeo.com/tuperfil |
ai
Configura el comportamiento de tu asistente AI integrado. El modelo utilizado es LFM de Liquid AI, ejecutado íntegramente en el dispositivo: ningún dato se envía a servidores externos.
| Campo | Predeterminado | Qué hace |
|---|---|---|
aiModelTemperature0.0-1.0 | 0.5 | Cuán creativa es la AI. 0 = precisa y repetitiva, 1 = creativa y variable. Recomendado: 0.3-0.7. |
aiModelTopKNúmero | 38 | Variedad de las respuestas en cada paso. Valores bajos = más enfocado, valores altos = más variado. |
aiSystemPromptTexto | - | Las instrucciones que definen el comportamiento de tu AI. Puedes estructurar el prompt con etiquetas XML y usar estos placeholders especiales:<identity> = identidad y rol del asistente<rules> = reglas y restricciones del comportamiento<context> = contexto dinámico (viajes y enlaces)<user_trips> = lista de viajes del usuario<app_links> = enlaces de los servicios activos |
ui · webview
Controla el aspecto visual de la interfaz: barra de navegación, iconos, sombras y más.
| Campo | Predeterminado | Qué hace |
|---|---|---|
useIslandBottomBarSí/No | false | Estilo de barra de navegación: activo = barra flotante "isla" con bordes redondeados, desactivado = barra clásica pegada al borde. |
showBottomBarLabelsSí/No | true | Muestra el texto bajo los iconos en la barra. Desactivado = solo iconos. |
showAISí/No | true | Muestra el botón del asistente AI en la barra. |
showMyTripsSí/No | true | Muestra la pestaña "Mis Viajes" en la barra. |
loadingIndicatorShapeTexto | Circle | La forma de la animación de carga. Ver todos los estilos disponibles ↓ |
Mostrar ajustes gráficos avanzados
| Campo | Predeterminado | Qué hace |
|---|---|---|
useIconBackgroundHighlightSí/No | false | Añade un fondo de color detrás del icono activo en la barra. |
showPoweredBySí/No | true | Muestra el texto "powered by" al final de la página info. |
showBusinessInfoCardSí/No | true | Muestra la tarjeta con información de la empresa en la página info. |
useOutlinedIconsSí/No | true | Estilo de iconos: activo = solo contorno, desactivado = rellenos. |
showInputFieldBordersSí/No | false | Muestra el borde en los campos de input. Activo = campos con borde visible, desactivado = campos sin borde. |
showPromoPopupSí/No | true | Habilita el popup promocional después de X segundos. |
promoPopupDelaySecondsNúmero | 15 | Segundos de espera antes de mostrar el popup. |
buttonRadiusPixel | 30.0 | Bordes redondeados de los botones. 0 = cuadrados, 30+ = muy redondeados. |
cardRadiusPixel | 30.0 | Bordes redondeados de las tarjetas. Mismo principio que buttonRadius. |
elevation0.0+ | 5.0 | Intensidad de la sombra en tarjetas y elementos flotantes. 0 = sin sombra. |
redirect
La animación de transición cuando la app abre un enlace externo.
| Campo | Predeterminado | Qué hace |
|---|---|---|
redirectOverlayEnabledSí/No | true | Muestra un overlay oscuro de transición antes de abrir enlaces externos. |
redirectOverlayDurationMsms | 800 | Duración del overlay en milisegundos. Valores típicos: 500-1500. |
business
La información de la empresa mostrada en la página info de tu app.
| Campo | Tipo | Qué hace |
|---|---|---|
whatsappPhoneNumberTexto | Número de WhatsApp | Número para contacto rápido. Formato internacional: +39123456789 |
emailEmail | Email de contacto | El email donde los clientes pueden contactarte. |
phoneNumberTexto | Teléfono | Número de teléfono. Formato internacional: +39123456789 |
aboutDescriptionTexto | Texto libre | La descripción "Quiénes Somos" de tu negocio. |
businessAddressTexto | Dirección | La dirección legal de tu empresa. |
businessVatTexto | P. IVA | Número de IVA / VAT number. |
businessOpeningHoursTexto | Horarios | Los horarios de apertura de tu negocio. |
network
Cómo tu app se presenta al resto de la web.
| Campo | Predeterminado | Qué hace |
|---|---|---|
userAgentTexto | - | El "nombre" con el que tu app se presenta a los sitios web. Formato recomendado: NomeApp/1.0 (email@esempio.com) |
defaultCurrencyTexto | EUR | Moneda predeterminada para los viajes. Codigo ISO: EUR, USD, GBP, JPY, etc. |
map (avanzadas)
La mayoría de los usuarios no necesita cambiar estos ajustes. El mapa usa OpenStreetMap.
| Campo | Predeterminado | Qué hace |
|---|---|---|
defaultMapLatitudeNúmero | 41.9028 | Latitud del centro del mapa al abrir (predeterminado: Roma). |
defaultMapLongitudeNúmero | 12.4964 | Longitud del centro del mapa al abrir (predeterminado: Roma). |
mapInitialZoomNúmero | 3.0 | Zoom inicial. Valores bajos = vista de continente, altos = vista de calle. |
mapSelectedLocationZoomNúmero | 5.0 | Zoom al seleccionar una ubicación de la lista. |
mapMarkerSizePixel | 40.0 | Tamaño de los marcadores en el mapa. |
mapPolylineWidthPixel | 3.0 | Grosor de la línea que conecta los puntos del recorrido. |
mapZoomForSelectionNúmero | 15.0 | Zoom para la selección precisa de una dirección. |
mapMinZoomNúmero | 2.0 | Zoom mínimo permitido. |
mapMaxZoomNúmero | 18.0 | Zoom máximo permitido. |
Recuerda: siempre tienes el botón Reset para volver a los valores predeterminados. No puedes "romper" nada: todo vuelve como antes con un clic.
Guia de Fuentes
Las fuentes de tu app se cargan desde Google Fonts. Usa el nombre exacto como aparece en Google Fonts: basta una letra diferente para que la fuente no se cargue.
Atención: El nombre debe corresponder exactamente al de Google Fonts, incluyendo espacios y mayúsculas. Si la fuente no existe, se usará la fuente del sistema.
Los dos campos de fuente
| Campo | Qué controla |
|---|---|
bodyFont | La fuente para todo el texto de la app: párrafos, descripciones, listas, botones. Normalmente una fuente simple y legible. |
titleFont | La fuente para los títulos: AppBar, títulos de sección, logo. Normalmente una fuente más decorativa o en negrita. |
Fuentes populares: haz clic para ver en Google Fonts
Sora
Moderno y geometrico. Genial para titulos.
Onest
Limpio y legible. Perfecto para el cuerpo de texto.
Inter
La fuente más usada para interfaces digitales.
Poppins
Geometrico y amigable. Muy popular.
Montserrat
Elegante y versatil. Genial para la marca.
Lato
Clásico y profesional. Buena legibilidad.
Roboto
La fuente de Android. Familiar para todos.
Open Sans
Neutral y muy legible. Un gran clasico.
Playfair Display
Elegante con serifa. Perfecto para titulos de lujo.
Nunito
Suave y redondeado. Amistoso.
Raleway
Fina y elegante. Muy estilosa.
Quicksand
Redondeado y jugueton. Para un look informal.
No encuentras la fuente que buscas? Visita fonts.google.com: hay más de 1500 fuentes gratuitas. Recuerda copiar el nombre exacto!
Indicadores de Carga
Elige la animación de carga para tu app. Cada estilo tiene un nombre e insértalo en el campo loadingIndicatorShape de la sección ui · webview.
Circle
Predeterminado
FadingCircle
ThreeBounce
DoubleBounce
Wave
Pulse
RotatingCircle
FadingFour
DualRing
HourGlass
PouringHourGlass
PouringHourGlassRefined
Ripple
DancingSquare
CubeGrid
Ring
SpinningCircle
ChasingDots
ThreeInOut
FoldingCube
PumpingHeart
WanderingCubes
FadingGrid
SpinningLines
SquareCircle
PianoWave
RotatingPlain
FadingCube
WaveSpinner
PulsingGrid
Cómo usarlo: Elige la animación que prefieras e introduce el nombre exacto (como se muestra arriba) en el campo
loadingIndicatorShape en la sección ui · webview.📱 Cómo instalar la App
Tu app es una PWA (Progressive Web App): no se descarga de la App Store o de Google Play Store, sino que se instala directamente desde el navegador. Es rápida, ligera y funciona como una app nativa. Sigue el procedimiento para tu dispositivo.
🤖 Android (Chrome)
Para instalar la app en un dispositivo Android, usa el navegador Google Chrome.
1
Abre Chrome en tu teléfono Android.
2
Abre tu app en el navegador — ve a la dirección de tu app.
3
Toca el menú pulsando el icono ⋮ (tres puntos verticales) en la parte superior derecha de la pantalla.
4
Selecciona "Añadir a la pantalla de inicio" o "Instalar app" del menú desplegable.
5
Confirma pulsando "Añadir" o "Instalar" en la ventana de confirmación.
6
¡Hecho! El icono de la app aparecerá en tu pantalla de inicio. Ahora puedes abrirla como cualquier otra app.
Sugerencia: En algunos dispositivos Android puedes ver un banner automatico en la parte inferior que te invita a instalar la app. En ese caso, basta con tocar "Installa" directamente desde el banner.
🍎 iPhone y iPad (Safari)
Para instalar la app en iPhone o iPad, usa el navegador Safari (no Chrome u otros navegadores).
1
Abre Safari en tu iPhone o iPad.
2
Abre tu app en el navegador — ve a la dirección de tu app.
3
Toca el icono Compartir pulsando ⬆️ (el cuadrado con la flecha que apunta hacia arriba) en la barra inferior.
4
Desliza el menú hacia abajo y selecciona "Añadir a inicio" (o "Añadir a pantalla de inicio").
5
Personaliza el nombre de la app si lo deseas, luego toca "Añadir" en la parte superior derecha.
6
¡Hecho! El icono de la app aparecerá en tu pantalla de inicio. Ahora puedes abrirla como cualquier otra app.
Importante: En iOS la instalación de la PWA funciona solo desde Safari. Si estás usando Chrome, Firefox u otro navegador en iPhone, la opción "Añadir a inicio" no estará disponible. Abre el enlace en Safari.
🖥️ Desktop (Chrome, Edge, Brave)
Puedes instalar la app también en tu ordenador, con Google Chrome, Microsoft Edge o Brave.
1
Abre el navegador (Chrome, Edge o Brave) en tu ordenador.
2
Abre tu app en el navegador — ve a la dirección de tu app.
3
Busca el icono de instalación en la barra de direcciones: un icono ⊕ (símbolo de instalación) o el menú ⋮ (tres puntos) en la parte superior derecha.
4
Haz clic en "Instalar app" o "Instalar Travelinfluencer" del menú.
5
Confirma haciendo clic en "Instalar" en la ventana de diálogo.
6
¡Hecho! La app se abrirá en una ventana dedicada sin barra de direcciones, y encontrarás el icono en el escritorio o en el menú de aplicaciones.
Sugerencia: En Chrome y Edge puedes ver directamente un icono ⊕ en la barra de direcciones cuando se detecta la PWA. Haz clic en él para una instalación rápida con un solo clic.
¿Por qué instalar la app? Una vez instalada, la app se abrirá a pantalla completa sin la barra del navegador, como una app nativa. Tendrás un acceso más rápido, una experiencia más fluida y el icono siempre a mano en tu pantalla de inicio.
Problemas Comunes
¿Tienes un problema? Probablemente la solución está aquí abajo. Los cambios pueden tardar algunos minutos en verse en la app. Y recuerda: siempre tienes el botón Reset para volver a los valores originales.
He modificado un campo pero no veo el cambio
Si un campo se deja vacío o se elimina, el sistema carga automáticamente el valor predeterminado. Esto significa que tu cambio podría no haberse guardado correctamente.
Qué hacer: Asegúrate de que el campo esté rellenado con un valor válido. Si el campo está vacío, el sistema usará el valor predeterminado: ¡no es un error, es de diseño!
Sugerencia: Después de rellenar el campo, recuerda guardar los cambios, luego recarga la página para verificar.
El color que introduje no funciona
Los colores deben estar en el formato HEX de 6 cifras, con el símbolo # al principio.
| Formato | Ejemplo | Funciona? |
|---|---|---|
| HEX 6 cifras | #00519C | ✅ Sí |
| Sin # | 00519C | ❌ No |
| Nombre de color | red | ❌ No |
| RGB | rgb(0,81,156) | ❌ No |
¿Necesitas inspiración? Usa un color picker online como ColorHunt para encontrar paletas armoniosas, luego copia el código HEX.
La fuente no cambia
El nombre de la fuente debe corresponder exactamente al de Google Fonts, incluyendo mayúsculas, minúsculas y espacios. Si el nombre no es correcto, se usará la fuente del sistema.
| Nombre introducido | Correcto? |
|---|---|
Poppins | ✅ Sí |
poppins | ❌ Falta la mayuscula |
Playfair Display | ✅ Sí (con espacio) |
Playfairdisplay | ❌ Falta el espacio |
Fuentes disponibles: Puedes usar cualquier fuente en Google Fonts (más de 1500 gratuitas). Copia el nombre exacto de la página de la fuente.
La URL de un servicio no se abre
Las URLs de los servicios deben ser completas y seguras. Aquí están las reglas:
URL correcta: Debe empezar con
https://, ejemplo: https://flights.travelinfluencer.coURL no segura: Las URLs que empiezan con
http:// (sin la "s") no se cargan por motivos de seguridad.URLs especiales: Para WhatsApp, Email y Teléfono usa simplemente
whatsapp, email o phone: nada de https, se gestionan automáticamente!He activado un servicio pero no lo veo en la barra
La barra de navegación muestra como máximo 5 servicios activos. Si has activado más, solo los primeros 5 aparecerán en la barra.
Límite: 5 servicios. Si tienes 6 o más servicios con el toggle activo, el sexto y siguientes no serán visibles. Desactiva los servicios menos importantes para dejar espacio a los que quieres mostrar.
Orden de prioridad: Los servicios se muestran en el orden en que aparecen en la lista. Los primeros 5 activos ganan. Los demás siguen disponibles pero ocultos de la barra.
He subido una imagen en el perfil pero no la veo en la app
Cuando subes una imagen desde tu perfil (logo o imagen de portada), el sistema genera un enlace URL para esa imagen. Debes copiar esa URL y pegarla en el campo correcto de la configuración.
Cómo hacerlo: En tu perfil, después de subir la imagen, usa el botón correspondiente para copiar la URL de la imagen. Luego ve a la configuración y pégala en el campo
logoUrl (para el logo) o infoHeaderImageUrl (para la imagen de portada).Importante: La imagen no se vincula automáticamente: debes copiar la URL manualmente. Sin la URL en el campo, la app seguirá mostrando la imagen predeterminada.
Quiero volver al subdominio después de usar un dominio personalizado
El paso de dominio personalizado a subdominio estándar es posible, pero conlleva la pérdida completa de los datos asociados a tu app.
¿Por qué? El dominio personalizado está integrado en la configuración interna (sesiones, certificados SSL). El downgrade requiere una reestructuración del entorno que hace que los datos existentes sean incompatibles.
Antes de proceder: Guarda todos los ajustes y contenidos que necesites. Después del downgrade, la configuración de la app, los ajustes personalizados y los contenidos asociados al dominio se perderán definitivamente. La operación es irreversible.
El sitio o la app no son accesibles
Si no puedes acceder al sitio, a la app o a Horizon Studio, podría estar en curso una intervención de mantenimiento programado o extraordinario.
Mantenimiento programado: Los mantenimientos programados se comunican con antelación por email o mediante aviso en la plataforma. Si has recibido una notificación, espera el tiempo indicado e inténtalo de nuevo.
Mantenimiento extraordinario: En caso de emergencias técnicas o problemas de seguridad, el servicio puede ser temporalmente suspendido sin previo aviso. El equipo trabaja para restaurarlo lo antes posible.
Qué hacer: Comprueba tu conexión a internet. Si la conexión funciona, espera algunos minutos y recarga la página. Si el problema persiste durante más de 30 minutos, contacta con el soporte.
La app no funciona correctamente en modo incógnito/privado
Si estás usando el navegador en modo incógnito, InPrivate o navegación privada, muchas funciones de la app podrían no funcionar correctamente. Esto se debe a las restricciones que los navegadores aplican en este modo.
Funciones limitadas: En navegación privada el navegador bloquea muchas APIs de almacenamiento. Esto significa que la descarga del modelo AI (HorizonAI) podría no funcionar, los datos de "Mis Viajes" (documentos e itinerarios) no se guardarán de forma permanente, y las preferencias y la configuración no se mantendrán.
Por qué sucede: Los navegadores en modo privado limitan el acceso a algunas funciones de almacenamiento para proteger la privacidad. La app necesita estas tecnologías para funcionar correctamente.
Solución: Abre una ventana de navegación normal (no privada) en tu navegador y accede a la app desde ahí. Todas las funciones estarán disponibles y tus datos se guardarán correctamente.
Mi sitio no tiene navegación ni animaciones en la app
Si tu sitio se ve en la app pero la navegación parece limitada o las animaciones no funcionan, podría faltar el script de integración en la sección <head> de tu sitio.
Qué hacer: Añade este script antes del cierre de la etiqueta
</head> en tu sitio:html
<script src="https://scripts.travelinfluencer.co/horizon-webview-helper.js" data-horizon-webview async></script>Detalles: Este script habilita la navegación optimizada, las animaciones fluidas y otras funciones avanzadas cuando tu sitio se abre dentro de la app. Es ligero, asíncrono y no afecta al rendimiento del sitio. Consulta la sección Integración Sitio → Fase 3 para más detalles.
La app se cierra después de descargar la AI
Si la app se cierra de repente o se bloquea después de la descarga del modelo AI (HorizonAI), el problema se debe a recursos insuficientes en tu dispositivo.
Por qué sucede: HorizonAI ejecuta el modelo AI localmente en el dispositivo. Esto requiere una cantidad significativa de RAM y potencia de cálculo. Si tu teléfono tiene poca memoria disponible o un procesador anticuado, el sistema no consigue gestionar el modelo y la app se cierra.
Qué hacer: Prueba a cerrar todas las demás apps en segundo plano para liberar memoria, luego vuelve a abrir la app. Si el problema persiste, tu dispositivo podría no tener los recursos hardware mínimos necesarios para ejecutar la AI. En este caso, puedes desactivar la AI desde la configuración (establece
showAI su false): todas las demás funciones de la app seguirán funcionando con normalidad.¡No puedes romper nada! Siempre tienes el botón Reset para volver a los valores predeterminados con un clic. Si algo no funciona como debería, usa Reset y empieza de nuevo: ¡está hecho para eso! Si el problema persiste también después del reset, contacta con el soporte.
Cancelación de Cuenta
Si deseas cerrar tu cuenta y eliminar todos tus datos, sigue atentamente este procedimiento. La operación es irreversible: lee bien cada paso antes de proceder.
Paso 1. Cancela tu suscripcion
Antes de poder cerrar la cuenta, debes cancelar tu suscripción activa. No es posible eliminar la cuenta si tienes un plan en vigor.
Atención: La cancelación de la suscripción no elimina inmediatamente tu cuenta. Tu suscripción permanecerá activa hasta la fecha de vencimiento natural del período ya pagado.
Suspensión o pago no válido: Si tu suscripción es suspendida por impago, tarjeta caducada o método de pago no válido, se aplica el mismo procedimiento: tras el vencimiento de la suscripción, tu cuenta entra automáticamente en el período de gracia de 30 días y posteriormente se cancela definitivamente. Recibirás emails de notificación antes de que ello ocurra.
Paso 2. Período de gracia (30 días)
Una vez vencida la suscripción, tu cuenta entra en un período de gracia de 30 días. Durante este período:
Aún puedes reactivar: Si cambias de opinión, puedes reactivar tu suscripción en cualquier momento durante los 30 días y encontrar todo exactamente como lo habías dejado: configuración, datos y ajustes estarán intactos.
Tus datos están seguros: Durante el período de gracia, todos tus datos se conservan y protegen. Ninguna información se elimina en esta fase.
💡 Alternativa: Pasa al Plan Gratuito
Si no quieres perder tu cuenta pero ya no deseas una suscripción de pago, puedes hacer el downgrade al plan gratuito. Esto te permite:
- ✅ Preservar tu cuenta y los datos del perfil
- ✅ Mantener el acceso a la plataforma
- ✅ Evitar la cancelación automática por inactividad o falta de suscripción
Atención — Configuración de app perdida: El downgrade al plan gratuito conlleva la eliminación y recreación de la carpeta de configuración de la app. Todas las configuraciones personalizadas anteriores (layout, contenidos, ajustes, integraciones) se perderán definitivamente. Te recomendamos guardar tus configuraciones antes de hacer el downgrade.
Paso 3. Cancelación definitiva
Al finalizar los 30 días de gracia, todos tus datos se eliminarán automática y permanentemente. Esto incluye:
- Configuración de la app y ajustes personalizados
- Datos del perfil e información empresarial
- Imágenes subidas (logo, portada)
- Historial y estadísticas de uso
- Cualquier otro dato asociado a tu cuenta
Irreversible: Esta operación es permanente y no reversible. Se aplica en todos los casos: cancelación voluntaria de la suscripción, suspensión por impago, tarjeta caducada o método de pago no válido. Una vez eliminados, los datos no podrán ser recuperados de ninguna manera. Si crees que podrías volver en el futuro, te recomendamos hacer el downgrade al plan gratuito para preservar tu cuenta (ten en cuenta que la configuración de la app se perderá).
¿Tienes dudas? Si tienes preguntas sobre la cancelación o quieres asistencia, contacta con el soporte. Estamos aquí para ayudarte.
Buscar
Ajustes y secciones