Guia de Configuração
Horizon Studio e Configure seu App
Personalize seu app e descubra todas as funcionalidades do Horizon Studio. Os campos já vêm pré-preenchidos com valores ideais: altere apenas o que deseja personalizar.
CORS Fix para Integração Externa
Se o seu site é exibido dentro do app e as imagens não aparecem, você deve adicionar estas linhas ao seu servidor. Sem essa configuração, o app não consegue carregar as imagens do seu site.
Por que o CORS é necessário?
📱 Seu App
→
🌐 Seu site
❌ Imagens bloqueadasO servidor não permite o carregamento externo
📱 Seu App
→
✅ Seu site
com CORS ativo
com CORS ativo
✅ Imagens carregadas!O servidor permite o carregamento
Copie este código no início do seu arquivo
.htaccess. Ele deve ser o primeiro bloco do arquivo. Se você não sabe onde encontrar este arquivo, pergunte ao seu webmaster ou ao seu provedor de hospedagem. .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>Em caso de erro 500 ou se o servidor não reconhecer as diretivas, é necessário habilitar o módulo headers do Apache a partir do terminal do servidor com o comando:
Em seguida, reinicie o Apache com
sudo a2enmod headersEm seguida, reinicie o Apache com
sudo systemctl restart apache2Depois de adicionar o código, as imagens do seu site ficarão visíveis no app em poucos minutos. Se o problema persistir, entre em contato com o suporte.
Integração de Site, Blog ou Social Embed (White-Label)
Para exibir seu site, blog ou conteúdo social dentro da plataforma, a fonte deve permitir o "framing". Siga este procedimento. Em poucos minutos estará tudo pronto.
Plano Pro: A integração do seu site ou blog personalizado dentro do app está disponível exclusivamente com o plano Pro. Os planos Starter e Premium utilizam o Horizon Studio como plataforma de publicação.
Fase 1: Teste de Compatibilidade
Antes de modificar qualquer coisa, verifique se seu site/blog já está pronto.
1
Acesse o site IFrameTester.com
2
Cole a URL completa do seu site ou blog (ex.
https://www.meublog.com.br)3
Clique em Render
Seu site aparece no quadro? Você não precisa fazer nada: seu site/blog já é compatível!
Você vê um erro do tipo "Refused to connect" ou um quadro cinza? Seu servidor está bloqueando a integração. Vá para a Fase 2.
Fase 2: Solução Técnica
Peça ao seu webmaster ou ao seu provedor de hospedagem para aplicar uma destas configurações. Estas instruções removem os bloqueios de segurança e permitem que a plataforma exiba seu conteúdo.
Opção A: Servidor Nginx
Edite o arquivo de configuração do site adicionando estas linhas:
nginx
# Remove o bloqueio de segurança restritivo
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options "" always;
# Permite a integração universal (White-Label)
add_header Content-Security-Policy "frame-ancestors *;" always;Opção B: Servidor Apache (.htaccess) ← Recomendada
Adicione estas linhas no início do seu arquivo .htaccess:
apache
<IfModule mod_headers.c>
Header always unset X-Frame-Options
Header always set Content-Security-Policy "frame-ancestors *"
</IfModule>Opção C: functions.php ← Mais simples
Se você não tem acesso aos arquivos do servidor, adicione este código ao arquivo functions.php do seu tema ativo:
php
function allow_white_label_framing() {
// Desbloqueia as restrições de segurança do site
remove_action( 'login_init', 'send_frame_options_header', 10 );
remove_action( 'admin_init', 'send_frame_options_header', 10 );
// Habilita a visualização externa
header("Content-Security-Policy: frame-ancestors *");
header_remove("X-Frame-Options");
}
add_action('send_headers', 'allow_white_label_framing', 1);Fase 3: Habilitar Recursos Avançados (Opcional)
Para oferecer a melhor experiência aos seus usuários, adicione este script no <head> do seu site. O script habilita recursos adicionais como navegação otimizada e animações fluidas dentro do app.
1
Abra o arquivo HTML do seu site (ou o arquivo template do tema)
2
Localize a tag
<head> ... </head>3
Cole o script a seguir antes do fechamento de
</head>html
<script src="https://scripts.travelinfluencer.co/horizon-webview-helper.js" data-horizon-webview async></script>O que este script faz: Habilita navegação otimizada, animações fluidas e transições avançadas quando seu site é exibido dentro do app Travelinfluencer. O site continua funcionando normalmente mesmo sem o script.
Opcional, mas recomendado: O script é leve, carrega de forma assíncrona e não afeta o desempenho do seu site. Não faz nada se o site não for aberto dentro do app.
Requisitos Fundamentais
Protocolo HTTPS: Seu site/blog deve ter um certificado SSL ativo. Sites em
http:// (não seguros) não podem ser carregados.Cloudflare: Se você usa Cloudflare, desative quaisquer regras do tipo "HSTS" ou "Origin Shield" que forcem o header
X-Frame-Options: SAMEORIGIN.Suporte: Se, depois de aplicar estas alterações, o teste continuar falhando, entre em contato com o suporte técnico do seu provedor fornecendo a captura de tela do teste realizado em IFrameTester.com.
Social Embed: Algumas plataformas sociais permitem integrar (embed) seus conteúdos diretamente no seu app. A disponibilidade deste recurso depende da plataforma social: nem todas as redes sociais oferecem suporte ao embed. Se a rede social permitir, o conteúdo será exibido nativamente dentro do app sem necessidade de configurações adicionais.
Dominio Personalizado (White-Label)
Se o seu plano inclui a opção Custom Domain, você pode vincular seu domínio ou subdomínio (ex. app.seunome.com.br) à plataforma. Seus usuários acessarão seu app pelo seu endereço web.
Como funciona o apontamento DNS
🌐 app.seunome.com.br
→
🔗 Registro CNAME
aponta para
→
connect.travelinfluencer.co
🔒 Certificado SSL
generado automáticamente
generado automáticamente
→
✅ Seu App está no ar!
acessível em app.seunome.com.br
acessível em app.seunome.com.br
Instruções para o Apontamento DNS
Acesse o painel de gerenciamento do seu domínio (ex. Aruba, Cloudflare, Register) e adicione um novo registro DNS:
| Campo | Valor a inserir |
|---|---|
| Tipo de Registro | CNAME |
| Host / Nome | app, ou o nome que preferir: viagens, portal, connect... |
| Destino / Valor | connect.travelinfluencer.co |
| TTL | Automático ou 3600 |
Observações Importantes
Não use registros do tipo A (endereços IP). Use exclusivamente o registro CNAME apontando para
connect.travelinfluencer.co. Isso garante que seu serviço permaneça ativo mesmo em caso de atualizações dos nossos servidores.SSL / HTTPS automático: Após configurado o apontamento, o sistema ativa automaticamente um certificado SSL gratuito para o seu domínio. A ativação ocorre normalmente em poucos minutos, mas pode depender de fatores técnicos externos (incluindo a propagação DNS) e, em casos excepcionais, exigir mais tempo.
Propagação DNS: As alterações nos DNS podem levar de poucos minutos até algumas horas para ficarem visíveis em nível global.
O que acontece depois?
1
Você cria o registro CNAME no seu painel DNS
2
Nosso sistema detecta o apontamento e gera automaticamente o certificado SSL
3
Seu app será acessível pelo seu endereço personalizado (ex.
app.seunome.com.br)Atenção. Rebaixamento de domínio personalizado para subdomínio: O domínio personalizado está integrado na configuração interna do seu app (sessões de usuário, certificados SSL, indexação). A passagem de um domínio personalizado para um subdomínio padrão envolve uma reestruturação completa do ambiente que torna incompatíveis os dados existentes. A configuração do app, as configurações personalizadas e os conteúdos associados ao domínio serão perdidos definitivamente. Esta operação é irreversível: antes de fazer um rebaixamento, certifique-se de ter salvo tudo o que você precisa.
Horizon Studio
O Horizon Studio é a plataforma que permite configurar seu app e gerenciar seu blog de conteúdos.
Plataforma completa: O Horizon Studio é muito mais do que um simples blog. Inclui editor avançado, badges promocionais, CTA com links externos, monitoramento de visualizações, sistema de curtidas, comentários e perfis de autor personalizáveis — tudo gerenciado pelo frontend.
📝 Criação e Gestão de Conteúdos
Tudo o que você precisa para criar e gerenciar seus artigos, diretamente pelo frontend.
| Recurso | Descrição |
|---|---|
| Editor frontend completo | Criação e edição de artigos com editor visual TinyMCE (barra de ferramentas completa). Formatação de texto, inserção de imagens, links e muito mais. |
| Imagens em destaque | Upload com prévia imediata. O sistema mostra uma prévia antes da publicação. |
| Status de publicação | Alternância rápida entre Publicado e Rascunho diretamente pela lista de artigos. Sem necessidade de confirmação: um clique para mudar de status. |
| Exclusão permanente | Exclusão de artigos com confirmação explícita. As imagens associadas são removidas automaticamente. |
| Comentários | Ativação/desativação para cada artigo. Template de comentários personalizado com suporte a respostas aninhadas. Ative ou desative os comentários individualmente para cada conteúdo. |
🏷️ Sistema de Badges
Cada artigo pode ser marcado com um badge visual exibido no card e no post individual. Os badges aparecem como etiquetas coloridas sobrepostas na imagem em destaque.
| Badge | Significado | Caso de uso |
|---|---|---|
| Promo | Oferta promocional | Descontos, ofertas por tempo limitado, códigos promocionais |
| Nuovo | Conteúdo recém-publicado | Destacar novidades, adições recentes ao catálogo |
| Hot | Conteúdo popular | Best-sellers, tendências do momento, conteúdos virais |
| Gratis | Conteúdo gratuito | Recursos gratuitos, guias gratuitos, trials, brindes |
Onde aparecem: Os badges são visíveis no card do artigo da lista, no perfil do autor e no post individual — sempre sobrepostos na imagem em destaque.
🔗 CTA com Links Externos
Cada artigo pode incluir uma Call-To-Action com link externo, perfeita para monetizar conteúdos e direcionar a recursos externos.
Casos de uso
| Tipo | Descrição | Exemplo |
|---|---|---|
| Link de afiliado | Direcionar a produtos/serviços de terceiros com rastreamento de comissões | Link para Booking.com, Amazon, etc. |
| Pacotes e produtos | Link para páginas de compra, landing pages, e-commerce | "Reserve o pacote de viagem" |
| Guias e recursos | Direcionar para tutoriais, documentação, cursos online | "Baixe o guia em PDF" |
| Sites externos | Qualquer URL externa para mais informações, demos, etc. | "Visite o site do parceiro" |
Como funciona no post individual
A CTA é exibida como um botão visível no box promo do post individual, com:
- Label — o texto do botão (ex. "R$ 29,99", "Descubra", "Reserve agora")
- Link — abre em uma nova aba com
rel="noopener noreferrer"por segurança - Ícone de seta — indica a ação de saída para o site externo
👁 Monitoramento de Visualizações
A contagem de visualizações é automática e está ativa por padrão para todos os artigos. Não é necessária nenhuma configuração.
| Recurso | Detalhe |
|---|---|
| Contador automático | O contador é incrementado automaticamente a cada visita ao post individual. |
| Exibição na lista | A contagem é exibida em cada card de artigo com o ícone 👁. |
| Sem configuração | O rastreamento está ativo por padrão para todos os artigos publicados. |
👤 Visualizações de Perfil
A contagem de visualizações dos perfis de autor/influencer é automática e está ativa por padrão. Não é necessária nenhuma configuração.
| Recurso | Detalhe |
|---|---|
| Contador automático | O contador é incrementado automaticamente a cada visita ao perfil do autor/influencer. |
| Exibição no perfil | A contagem é exibida na página do perfil de autor/influencer com o ícone 👁. |
| Sem configuração | O rastreamento está ativo por padrão para todos os perfis de autor/influencer publicados. |
❤️ Sistema de Curtidas
Sistema de apreciação pública, sem necessidade de login. Funciona para todos os visitantes, incluindo anônimos.
| Recurso | Detalhe |
|---|---|
| Curtida pública | Não é necessário login. Visitantes anônimos podem curtir qualquer artigo. |
| Prevenção de duplicados | O estado da curtida é salvo no navegador para evitar várias curtidas a partir do mesmo dispositivo. |
| Feedback visual | O coração se preenche e o contador é atualizado em tempo real com uma animação fluida. |
| Endpoint público | Acessível tanto por usuários autenticados quanto por visitantes anônimos. Não é necessária autenticação. |
👤 Perfis de Autor Personalizáveis
Cada autor tem uma página de perfil pública totalmente personalizável, visível para todos os visitantes.
| Elemento | Descrição |
|---|---|
| Imagem hero | Banner de largura total com sobreposição de degradê. A imagem cobre toda a parte superior do perfil. |
| Avatar | Imagem circular sobreposta ao hero. Torna-se o símbolo visual do autor em todo o site. |
| Bio HTML | Descrição com formatação enriquecida (negrito, links, listas). Suporta HTML completo para uma bio profissional. |
| Nickname | Nome de exibição personalizado, independente do nome de usuário. |
| Cores personalizadas | 6 cores personalizáveis (fundo, botões, texto, cards) + arredondamento de imagem. Cada perfil pode ter seu próprio estilo único. |
| Grade de artigos | Todos os posts publicados do autor, exibidos em grade com badge e preço em destaque em cada card. |
Personalização total: Os perfis de autor são totalmente independentes. Cada autor pode escolher suas próprias cores, seu próprio hero e seu próprio estilo — criando uma identidade visual única dentro da plataforma.
Configuração do App
Todos os campos já vêm pré-preenchidos com valores ideais. Altere apenas o que deseja personalizar. Você sempre pode voltar aos valores originais com o botão Reset.
Você não precisa preencher tudo! Os valores padrão já são ideais para a maioria dos usuários. Personalize apenas aquilo que torna seu app único.
Campos e planos: Alguns campos dependem do plano contratado (Starter, Premium, Pro). Os campos bloqueados pelo plano não são editáveis. Este guia mostra todos os campos disponíveis. Os que não estiverem acessíveis aparecerão desativados na configuração.
Primeiro acesso: Antes de poder acessar seu app, é solicitado que você escolha um nome de domínio (ex.
seunome.travelinfluencer.co). Para abrir o app, digite esse endereço na barra de pesquisa do seu navegador. branding · colors
A identidade visual do seu app: logo, cores e fonte.
| Campo | Padrão | O que faz |
|---|---|---|
logoUrlURL | Logo TravelInfluencer | A imagem que representa seu app. Formato PNG, mínimo 512×512px. Usada como ícone em cada parte do app. Como inserir o logo: faça upload de uma imagem pelo seu perfil e copie a URL gerada, ou cole diretamente a URL de uma imagem online. Se as imagens não carregarem, consulte a seção CORS Fix. |
backgroundColorCor | #00519C | A cor principal da sua marca. Usada na barra do navegador e como cor do tema. |
splashBackgroundColorCor | #FFFFFF | A cor de fundo quando o app é iniciado. Normalmente branco ou a cor da marca. |
Mostrar todas as cores personalizáveis
Cada cor está no formato #RRGGBB. Os valores exibidos são os padrão.
Superfície e Fundo
| Campo | Padrão | Uso |
|---|---|---|
colors.primary | #00519C | Botões primários, indicadores ativos, AppBar |
colors.surface | #FFFFFF | Fundo de cards, diálogos, bottom sheet |
colors.background | #F7F9FC | Fundo principal atrás de tudo |
colors.surfaceTint | #E8EDF5 | Fundos semitransparentes, switch track |
colors.surfaceTintLight | #F0F4FA | Variante mais clara de surfaceTint |
Texto
| Campo | Padrão | Uso |
|---|---|---|
colors.textPrimary | #0F172A | Títulos e conteúdos importantes |
colors.textSecondary | #475569 | Subtítulos e informações complementares |
colors.textTertiary | #94A3B8 | Hints, placeholders, informações pouco importantes |
colors.textDisabled | #CBD5E1 | Elementos desativados |
Estados
| Campo | Padrão | Uso |
|---|---|---|
colors.success | #16A34A | Confirmações, status "concluído" |
colors.warning | #F59E0B | Avisos e atenção |
colors.error | #DC2626 | Erros principais |
colors.errorLight | #FEF2F2 | Fundo claro para áreas de erro |
colors.errorBorder | #FECACA | Borda de cards/contêineres de erro |
colors.errorSecondary | #EF9A9A | Cor de erro secundária, fundo claro |
colors.errorText | #E53935 | Texto de mensagens de erro |
colors.errorDark | #D32F2F | Cor de erro escura, para ações importantes |
Categorias de Viagem
| Campo | Padrão | Uso |
|---|---|---|
colors.categoryAccommodation | Cor de hospedagem | Hotéis, pousadas, etc. |
colors.categoryTransport | Cor de transporte | Voos, trens, etc. |
colors.categoryFood | Cor de alimentação | Restaurantes, etc. |
colors.categoryActivities | Cor de atividades | Tours, passeios |
colors.categoryOther | Cor outros | Despesas não classificáveis |
Status de Viagem
| Campo | Uso |
|---|---|
colors.statusUpcoming | Badge "Em breve" |
colors.statusInProgress | Badge "Em andamento" |
colors.statusCompleted | Badge "Concluído" |
Diversos
| Campo | Uso |
|---|---|
colors.border | Borda padrão para cards e inputs |
colors.borderLight | Borda clara para separações sutis |
colors.divider | Linhas divisórias entre seções |
colors.iconSecondary | Ícones decorativos secundários |
colors.overlayBackground | Fundo de overlay escuro (popup, diálogo) |
colors.overlayText | Texto sobre fundo de overlay escuro |
colors.shadow | Cor base das sombras (normalmente #000000) |
colors.shadowOpacity0.0-1.0 | Transparência das sombras |
colors.onPrimary | Texto/ícones sobre a cor primary |
colors.onSecondary | Texto/ícones sobre a cor secondary |
colors.onSurface | Texto/ícones sobre a cor surface |
colors.onError | Texto/ícones sobre a cor error |
app
As informações básicas: nome, versão e identidade do app.
| Campo | Padrão | O que faz |
|---|---|---|
appNameTexto | Horizon | O nome do seu app exibido para os usuários: aparece no título, na barra e em todo o app. |
appVersionTexto | 1.0.0 | Número da versão (referência interna). |
poweredByTextTexto | powered by travelinfluencer.co | Texto "powered by" no final da página info. Visível apenas se "Mostrar powered by" estiver ativo. |
aiButtonTextTexto | HorizonAI | O nome do seu assistente AI: aparece na barra e na tela de AI. Para alterar a identidade, vá à seção ai. |
links
Todos os links e páginas conectados ao seu app.
| Campo | Tipo | O que faz |
|---|---|---|
website | URL | Link para seu site, Horizon Studio ou social (se embed for possível): exibido como botão "Explorar" na página info. Observação: o link para seu site personalizado está disponível apenas com o plano Pro. |
privacyPolicy | URL | Link para a página de Política de Privacidade. |
termsAndConditions | URL | Link para a página de Termos e Condições. |
promoPopup | URL | URL da página exibida no popup promocional. Aparece após X segundos da abertura. |
infoHeaderImageUrl | URL | Imagem de cabeçalho na parte superior da página info. Largura recomendada: 1200px+. Como inserir a imagem de cabeçalho: faça upload de uma imagem pelo seu perfil e copie a URL gerada, ou cole diretamente a URL de uma imagem online. Se as imagens não carregarem, consulte a seção CORS Fix. |
services · socialLinks
Os serviços exibidos na barra de navegação (bottom bar) e os links sociais no menu lateral (drawer) do app.
Máximo de 5 serviços ativos na barra de navegação. O número de serviços disponíveis depende do plano. Apenas os primeiros 5 serviços com toggle ativo aparecerão na barra inferior.
Serviços disponíveis
Para cada serviço, insira o link de afiliado e use o toggle para ativá-lo ou desativá-lo. O número de serviços disponíveis depende do plano.
| Icono | Nome do Serviço | O que inserir no campo URL |
|---|---|---|
| ✈️ | Flights | Link de afiliado para busca de voos |
| 🏨 | Hotels | Link de afiliado para reserva de hotel |
| 🏡 | Vacation Homes | Link de afiliado para casas de temporada e apartamentos |
| 📦 | Packages | Link de afiliado para pacotes de viagem (voo + hotel) |
| 🚗 | Cars | Link de afiliado para aluguel de carro |
| 🛡️ | Insurance | Link de afiliado para seguro de viagem |
| 📱 | eSIM | Link de afiliado para chips SIM virtuais (eSIM) |
| 🗺️ | Tours | Link de afiliado para tours, ingressos de museus e atividades |
| 🚢 | Cruises | Link de afiliado para cruzeiros |
| 🧳 | Luggage Storage | Link de afiliado para depósito de bagagem |
| 🚂 | Trains | Link de afiliado para passagens de trem |
| 🚌 | Bus | Link de afiliado para passagens de ônibus |
| ⛴️ | Ferries | Link de afiliado para balsas e ferries |
| 🚕 | Taxi | Link de afiliado para reserva de táxi |
| 🛺 | Airport Transfer | Link de afiliado para transfer do/para o aeroporto |
| 🔒 | VPN | Link de afiliado para serviços de VPN |
| 🍽️ | Restaurants | Link de afiliado para reserva de restaurantes |
| ⛷️ | Equipment Rental | Link de afiliado para aluguel de equipamentos esportivos |
| 🛥️ | Yachts | Link de afiliado para aluguel de iates e barcos |
| 🚐 | Camper | Link de afiliado para aluguel de motorhome e RV |
| 📋 | Book Now | Link para a página de reserva genérica |
| 🛍️ | Buy Now | Link para a página de compra |
| 🚲 | Bike | Link de afiliado para aluguel de bicicletas |
| 🏍️ | Motorcycle | Link de afiliado para aluguel de motos |
| 🔑 | Rent Now | Link de afiliado para aluguel genérico |
| 💬 | Escreva whatsapp: abre o chat com o número configurado em Empresa | |
| ✉️ | Escreva email: abre o cliente de email com o endereço da empresa | |
| 📞 | Phone | Escreva phone: abre o discador com o número da empresa |
URLs especiais: Para WhatsApp, Email e Telefone, use respectivamente
whatsapp, email, phone como URL: o app abrirá automaticamente o aplicativo correto. As informações de contato desses campos são definidas na seção "business".Plataformas Sociais (visíveis no menu lateral do app)
| Icono | Plataforma | O que inserir no campo URL |
|---|---|---|
| ▶️ | YouTube | URL do canal do YouTube, ex. https://youtube.com/@seucanal |
| 🎵 | TikTok | URL do perfil do TikTok, ex. https://tiktok.com/@seuperfil |
| 📸 | URL do perfil do Instagram, ex. https://instagram.com/seuperfil | |
| 👍 | URL da página do Facebook, ex. https://facebook.com/suapagina | |
| 🐦 | X (Twitter) | URL do perfil do X, ex. https://x.com/seuperfil |
| 💼 | URL da página ou perfil do LinkedIn, ex. https://linkedin.com/company/sua-empresa | |
| 📌 | URL do perfil ou painel do Pinterest, ex. https://pinterest.com/seuperfil | |
| 🎧 | Spotify | URL do perfil ou playlist do Spotify, ex. https://open.spotify.com/user/seuperfil |
| 🎶 | Apple Music | URL do perfil do Apple Music, ex. https://music.apple.com/seuperfil |
| ☁️ | SoundCloud | URL do perfil do SoundCloud, ex. https://soundcloud.com/seuperfil |
| 📦 | Amazon | URL da loja ou storefront da Amazon, ex. https://amazon.com/shop/seuperfil |
| 🎬 | Vimeo | URL do perfil do Vimeo, ex. https://vimeo.com/seuperfil |
ai
Configure o comportamento do seu assistente AI integrado. O modelo utilizado é o LFM da Liquid AI, executado inteiramente no dispositivo: nenhum dado é enviado a servidores externos.
| Campo | Padrão | O que faz |
|---|---|---|
aiModelTemperature0.0-1.0 | 0.5 | O quão criativa é a AI. 0 = precisa e repetitiva, 1 = criativa e variável. Recomendado: 0.3-0.7. |
aiModelTopKNúmero | 38 | Variedade das respostas a cada etapa. Valores baixos = mais focado, valores altos = mais variado. |
aiSystemPromptTexto | - | As instruções que definem o comportamento da sua AI. Você pode estruturar o prompt com tags XML e usar estes placeholders especiais:<identity> = identidade e papel do assistente<rules> = regras e restrições do comportamento<context> = contexto dinâmico (viagens e links)<user_trips> = lista de viagens do usuário<app_links> = links dos serviços ativos |
ui · webview
Controla o aspecto visual da interface: barra de navegação, ícones, sombras e mais.
| Campo | Padrão | O que faz |
|---|---|---|
useIslandBottomBarSim/Não | false | Estilo da barra de navegação: ativo = barra flutuante "ilha" com bordas arredondadas, desativado = barra clássica colada à borda. |
showBottomBarLabelsSim/Não | true | Exibe o texto sob os ícones na barra. Desativado = apenas ícones. |
showAISim/Não | true | Exibe o botão do assistente AI na barra. |
showMyTripsSim/Não | true | Exibe a aba "Minhas Viagens" na barra. |
loadingIndicatorShapeTexto | Circle | O formato da animação de carregamento. Ver todos os estilos disponíveis ↓ |
Mostrar configurações gráficas avançadas
| Campo | Padrão | O que faz |
|---|---|---|
useIconBackgroundHighlightSim/Não | false | Adiciona um fundo colorido atrás do ícone ativo na barra. |
showPoweredBySim/Não | true | Exibe o texto "powered by" no final da página info. |
showBusinessInfoCardSim/Não | true | Exibe o card com informações da empresa na página info. |
useOutlinedIconsSim/Não | true | Estilo dos ícones: ativo = apenas contorno, desativado = preenchidos. |
showInputFieldBordersSim/Não | false | Exibe a borda nos campos de input. Ativo = campos com borda visível, desativado = campos sem borda. |
showPromoPopupSim/Não | true | Habilita o popup promocional após X segundos. |
promoPopupDelaySecondsNúmero | 15 | Segundos de espera antes de exibir o popup. |
buttonRadiusPixel | 30.0 | Bordas arredondadas dos botões. 0 = quadrados, 30+ = muito arredondados. |
cardRadiusPixel | 30.0 | Bordas arredondadas dos cards. Mesmo princípio do buttonRadius. |
elevation0.0+ | 5.0 | Intensidade da sombra em cards e elementos flutuantes. 0 = sem sombra. |
redirect
A animação de transição quando o app abre um link externo.
| Campo | Padrão | O que faz |
|---|---|---|
redirectOverlayEnabledSim/Não | true | Exibe um overlay escuro de transição antes de abrir links externos. |
redirectOverlayDurationMsms | 800 | Duração do overlay em milissegundos. Valores típicos: 500-1500. |
business
As informações da empresa exibidas na página info do seu app.
| Campo | Tipo | O que faz |
|---|---|---|
whatsappPhoneNumberTexto | Número do WhatsApp | Número para contato rápido. Formato internacional: +39123456789 |
emailEmail | Email de contato | O email onde os clientes podem falar com você. |
phoneNumberTexto | Telefone | Número de telefone. Formato internacional: +39123456789 |
aboutDescriptionTexto | Texto livre | A descrição "Quem Somos" do seu negócio. |
businessAddressTexto | Endereço | O endereço legal da sua empresa. |
businessVatTexto | P. IVA | Número de IVA / VAT number. |
businessOpeningHoursTexto | Horários | Os horários de funcionamento do seu negócio. |
network
Como seu app se apresenta ao resto da web.
| Campo | Padrão | O que faz |
|---|---|---|
userAgentTexto | - | O "nome" com o qual seu app se apresenta aos sites. Formato recomendado: NomeApp/1.0 (email@exemplo.com) |
defaultCurrencyTexto | EUR | Moeda padrão para as viagens. Código ISO: EUR, USD, GBP, JPY, etc. |
map (avançadas)
A maioria dos usuários não precisa alterar estas configurações. O mapa usa OpenStreetMap.
| Campo | Padrão | O que faz |
|---|---|---|
defaultMapLatitudeNúmero | 41.9028 | Latitude do centro do mapa ao abrir (padrão: Roma). |
defaultMapLongitudeNúmero | 12.4964 | Longitude do centro do mapa ao abrir (padrão: Roma). |
mapInitialZoomNúmero | 3.0 | Zoom inicial. Valores baixos = vista de continente, altos = vista de rua. |
mapSelectedLocationZoomNúmero | 5.0 | Zoom ao selecionar uma localização da lista. |
mapMarkerSizePixel | 40.0 | Tamanho dos marcadores no mapa. |
mapPolylineWidthPixel | 3.0 | Espessura da linha que conecta os pontos do trajeto. |
mapZoomForSelectionNúmero | 15.0 | Zoom para a seleção precisa de um endereço. |
mapMinZoomNúmero | 2.0 | Zoom mínimo permitido. |
mapMaxZoomNúmero | 18.0 | Zoom máximo permitido. |
Lembre-se: você sempre tem o botão Reset para voltar aos valores padrão. Não dá para "quebrar" nada: tudo volta como estava com um clique.
Guia de Fontes
As fontes do seu app são carregadas do Google Fonts. Use o nome exato como aparece no Google Fonts: basta uma letra diferente para a fonte não carregar.
Atenção: O nome deve corresponder exatamente ao do Google Fonts, incluindo espaços e maiúsculas. Se a fonte não existir, será usada a fonte do sistema.
Os dois campos de fonte
| Campo | O que controla |
|---|---|
bodyFont | A fonte para todo o texto do app: parágrafos, descrições, listas, botões. Normalmente uma fonte simples e legível. |
titleFont | A fonte para os títulos: AppBar, títulos de seção, logo. Normalmente uma fonte mais decorativa ou em negrito. |
Fontes populares: clique para ver no Google Fonts
Sora
Moderna e geométrica. Ótima para títulos.
Onest
Limpa e legível. Perfeita para o corpo do texto.
Inter
A fonte mais usada para interfaces digitais.
Poppins
Geométrica e amigável. Muito popular.
Montserrat
Elegante e versátil. Ótima para a marca.
Lato
Clássica e profissional. Boa legibilidade.
Roboto
A fonte do Android. Familiar para todos.
Open Sans
Neutra e muito legível. Um grande clássico.
Playfair Display
Elegante com serifa. Perfeita para títulos de luxo.
Nunito
Suave e arredondada. Amigável.
Raleway
Fina e elegante. Muito estilosa.
Quicksand
Arredondada e divertida. Para um visual informal.
Não encontrou a fonte que procura? Visite fonts.google.com: há mais de 1500 fontes gratuitas. Lembre-se de copiar o nome exato!
Indicadores de Carregamento
Escolha a animação de carregamento do seu app. Cada estilo tem um nome: insira-o no campo loadingIndicatorShape da seção ui · webview.
Circle
Padrão
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
Como usar: Escolha a animação que preferir e insira o nome exato (como exibido acima) no campo
loadingIndicatorShape na seção ui · webview.📱 Como instalar o App
Seu app é uma PWA (Progressive Web App): não é baixado da App Store ou do Google Play Store, mas sim instalado diretamente do navegador. É rápido, leve e funciona como um app nativo. Siga o procedimento para o seu dispositivo.
🤖 Android (Chrome)
Para instalar o app em um dispositivo Android, use o navegador Google Chrome.
1
Abra o Chrome no seu telefone Android.
2
Abra seu app no navegador — acesse o endereço do seu app.
3
Toque no menu pressionando o ícone ⋮ (três pontos verticais) na parte superior direita da tela.
4
Selecione "Adicionar à tela inicial" ou "Instalar app" no menu suspenso.
5
Confirme tocando em "Adicionar" ou "Instalar" na janela de confirmação.
6
Pronto! O ícone do app aparecerá na sua tela inicial. Agora você pode abri-lo como qualquer outro app.
Dica: Em alguns dispositivos Android você pode ver um banner automático na parte inferior convidando a instalar o app. Nesse caso, basta tocar em "Instalar" diretamente no banner.
🍎 iPhone e iPad (Safari)
Para instalar o app no iPhone ou iPad, use o navegador Safari (não o Chrome ou outros navegadores).
1
Abra o Safari no seu iPhone ou iPad.
2
Abra seu app no navegador — acesse o endereço do seu app.
3
Toque no ícone Compartir pressionando ⬆️ (o quadrado com a seta apontando para cima) na barra inferior.
4
Deslize o menu para baixo e selecione "Adicionar à tela inicial".
5
Personalize o nome do app, se desejar, e toque em "Adicionar" na parte superior direita.
6
Pronto! O ícone do app aparecerá na sua tela inicial. Agora você pode abri-lo como qualquer outro app.
Importante: No iOS a instalação da PWA funciona apenas pelo Safari. Se você estiver usando Chrome, Firefox ou outro navegador no iPhone, a opção "Adicionar à tela inicial" não estará disponível. Abra o link no Safari.
🖥️ Desktop (Chrome, Edge, Brave)
Você também pode instalar o app no seu computador, com Google Chrome, Microsoft Edge ou Brave.
1
Abra o navegador (Chrome, Edge ou Brave) no seu computador.
2
Abra seu app no navegador — acesse o endereço do seu app.
3
Localize o ícone de instalação na barra de endereços: um ícone ⊕ (símbolo de instalação) ou o menu ⋮ (três pontos) na parte superior direita.
4
Clique em "Instalar app" ou "Instalar Travelinfluencer" no menu.
5
Confirme clicando em "Instalar" na janela de diálogo.
6
Pronto! O app abrirá em uma janela dedicada sem barra de endereços, e você encontrará o ícone na área de trabalho ou no menu de aplicativos.
Dica: No Chrome e no Edge você pode ver diretamente um ícone ⊕ na barra de endereços quando a PWA é detectada. Clique nele para uma instalação rápida com um clique.
Por que instalar o app? Após instalado, o app abrirá em tela cheia sem a barra do navegador, como um app nativo. Você terá um acesso mais rápido, uma experiência mais fluida e o ícone sempre à mão na sua tela inicial.
Problemas Comuns
Está com algum problema? Provavelmente a solução está logo abaixo. As alterações podem levar alguns minutos para aparecer no app. E lembre-se: você sempre tem o botão Reset para voltar aos valores originais.
Alterei um campo mas não vejo a mudança
Se um campo for deixado vazio ou removido, o sistema carrega automaticamente o valor padrão. Isso significa que sua alteração pode não ter sido salva corretamente.
O que fazer: Certifique-se de que o campo esteja preenchido com um valor válido. Se o campo estiver vazio, o sistema usará o valor padrão: não é um erro, é assim por design!
Dica: Depois de preencher o campo, lembre-se de salvar as alterações e recarregue a página para verificar.
A cor que inseri não funciona
As cores devem estar no formato HEX de 6 dígitos, com o símbolo # no início.
| Formato | Exemplo | Funciona? |
|---|---|---|
| HEX 6 dígitos | #00519C | ✅ Sí |
| Sem # | 00519C | ❌ No |
| Nome de cor | red | ❌ No |
| RGB | rgb(0,81,156) | ❌ No |
Precisa de inspiração? Use um color picker online como o ColorHunt para encontrar paletas harmônicas e copie o código HEX.
A fonte não muda
O nome da fonte deve corresponder exatamente ao do Google Fonts, incluindo maiúsculas, minúsculas e espaços. Se o nome não estiver correto, será usada a fonte do sistema.
| Nome inserido | Correto? |
|---|---|
Poppins | ✅ Sí |
poppins | ❌ Falta a maiúscula |
Playfair Display | ✅ Sim (com espaço) |
Playfairdisplay | ❌ Falta o espaço |
Fontes disponíveis: Você pode usar qualquer fonte do Google Fonts (mais de 1500 gratuitas). Copie o nome exato da página da fonte.
A URL de um serviço não abre
As URLs dos serviços devem ser completas e seguras. Aqui estão as regras:
URL correta: Deve começar com
https://, exemplo: https://flights.travelinfluencer.coURL não segura: URLs que começam com
http:// (sem o "s") não são carregadas por motivos de segurança.URLs especiais: Para WhatsApp, Email e Telefone, use simplesmente
whatsapp, email ou phone: nada de https, são gerenciados automaticamente!Ativei um serviço mas não o vejo na barra
A barra de navegação exibe no máximo 5 serviços ativos. Se você ativou mais, apenas os primeiros 5 aparecerão na barra.
Limite: 5 serviços. Se você tiver 6 ou mais serviços com o toggle ativo, o sexto e os seguintes não serão visíveis. Desative os serviços menos importantes para dar espaço aos que deseja exibir.
Ordem de prioridade: Os serviços são exibidos na ordem em que aparecem na lista. Os primeiros 5 ativos ganham. Os demais continuam disponíveis, porém ocultos da barra.
Fiz upload de uma imagem no perfil mas não a vejo no app
Quando você faz upload de uma imagem pelo seu perfil (logo ou imagem de capa), o sistema gera um link de URL para essa imagem. Você deve copiar essa URL e colá-la no campo correto da configuração.
Como fazer: No seu perfil, depois de fazer upload da imagem, use o botão correspondente para copiar a URL da imagem. Depois vá à configuração e cole-a no campo
logoUrl (para o logo) ou infoHeaderImageUrl (para a imagem de capa).Importante: A imagem não é vinculada automaticamente: você deve copiar a URL manualmente. Sem a URL no campo, o app continuará exibindo a imagem padrão.
Quero voltar ao subdomínio depois de usar um domínio personalizado
A passagem de domínio personalizado para subdomínio padrão é possível, mas envolve a perda completa dos dados associados ao seu app.
Por quê? O domínio personalizado está integrado na configuração interna (sessões, certificados SSL). O rebaixamento exige uma reestruturação do ambiente que torna os dados existentes incompatíveis.
Antes de prosseguir: Salve todas as configurações e conteúdos que você precise. Depois do rebaixamento, a configuração do app, as configurações personalizadas e os conteúdos associados ao domínio serão perdidos definitivamente. A operação é irreversível.
O site ou o app não estão acessíveis
Se você não consegue acessar o site, o app ou o Horizon Studio, pode estar em curso uma intervenção de manutenção programada ou extraordinária.
Manutenção programada: As manutenções programadas são comunicadas com antecedência por email ou por aviso na plataforma. Se você recebeu uma notificação, aguarde o tempo indicado e tente novamente.
Manutenção extraordinária: Em caso de emergências técnicas ou problemas de segurança, o serviço pode ser temporariamente suspenso sem aviso prévio. A equipe trabalha para restaurá-lo o mais rápido possível.
O que fazer: Verifique sua conexão com a internet. Se a conexão funcionar, aguarde alguns minutos e recarregue a página. Se o problema persistir por mais de 30 minutos, entre em contato com o suporte.
O app não funciona corretamente no modo anônimo/privado
Se você estiver usando o navegador em modo anônimo, InPrivate ou navegação privada, muitos recursos do app podem não funcionar corretamente. Isso se deve às restrições que os navegadores aplicam nesse modo.
Recursos limitados: Na navegação privada o navegador bloqueia muitas APIs de armazenamento. Isso significa que o download do modelo AI (HorizonAI) pode não funcionar, os dados de "Minhas Viagens" (documentos e itinerários) não serão salvos de forma permanente, e as preferências e configurações não serão mantidas.
Por que acontece: Os navegadores no modo privado limitam o acesso a alguns recursos de armazenamento para proteger a privacidade. O app precisa dessas tecnologias para funcionar corretamente.
Solução: Abra uma janela de navegação normal (não privada) no seu navegador e acesse o app a partir dela. Todos os recursos estarão disponíveis e seus dados serão salvos corretamente.
Meu site não tem navegação nem animações no app
Se o seu site aparece no app, mas a navegação parece limitada ou as animações não funcionam, pode estar faltando o script de integração na seção <head> do seu site.
O que fazer: Adicione este script antes do fechamento da tag
</head> no seu site:html
<script src="https://scripts.travelinfluencer.co/horizon-webview-helper.js" data-horizon-webview async></script>Detalhes: Este script habilita a navegação otimizada, as animações fluidas e outros recursos avançados quando seu site é aberto dentro do app. É leve, assíncrono e não afeta o desempenho do site. Consulte a seção Integração Site → Fase 3 para mais detalhes.
O app fecha depois de baixar a AI
Se o app fecha de repente ou trava após o download do modelo AI (HorizonAI), o problema se deve a recursos insuficientes no seu dispositivo.
Por que acontece: O HorizonAI executa o modelo AI localmente no dispositivo. Isso requer uma quantidade significativa de RAM e poder de processamento. Se o seu telefone tem pouca memória disponível ou um processador antigo, o sistema não consegue gerenciar o modelo e o app fecha.
O que fazer: Tente fechar todos os outros apps em segundo plano para liberar memória e abra o app novamente. Se o problema persistir, seu dispositivo pode não ter os recursos mínimos de hardware necessários para executar a AI. Nesse caso, você pode desativar a AI nas configurações (defina
showAI como false): todas as demais funções do app continuarão funcionando normalmente.Não dá para quebrar nada! Você sempre tem o botão Reset para voltar aos valores padrão com um clique. Se algo não funcionar como deveria, use o Reset e recomece: é para isso que ele serve! Se o problema persistir mesmo após o reset, entre em contato com o suporte.
Cancelamento de Conta
Se deseja encerrar sua conta e excluir todos os seus dados, siga atentamente este procedimento. A operação é irreversível: leia bem cada etapa antes de prosseguir.
Etapa 1. Cancele sua assinatura
Antes de poder encerrar a conta, você deve cancelar sua assinatura ativa. Não é possível excluir a conta se você tem um plano vigente.
Atenção: O cancelamento da assinatura não exclui imediatamente a sua conta. Sua assinatura permanecerá ativa até a data de vencimento natural do período já pago.
Suspensão ou pagamento inválido: Se sua assinatura for suspensa por falta de pagamento, cartão expirado ou método de pagamento inválido, aplica-se o mesmo procedimento: após o vencimento da assinatura, sua conta entra automaticamente no período de carência de 30 dias e, em seguida, é cancelada definitivamente. Você receberá emails de notificação antes que isso aconteça.
Etapa 2. Período de carência (30 dias)
Após o vencimento da assinatura, sua conta entra em um período de carência de 30 dias. Durante esse período:
Ainda dá para reativar: Se você mudar de ideia, pode reativar sua assinatura a qualquer momento durante os 30 dias e encontrar tudo exatamente como havia deixado: configuração, dados e ajustes estarão intactos.
Seus dados estão seguros: Durante o período de carência, todos os seus dados são preservados e protegidos. Nenhuma informação é excluída nesta fase.
💡 Alternativa: Mude para o Plano Starter
Se você não quer perder sua conta, mas não deseja mais uma assinatura cara, pode mudar para o Plano Starter, o plano básico de baixo custo. Isso permite:
- ✅ Preservar sua conta e os dados do perfil
- ✅ Manter o acesso à plataforma
- ✅ Evitar o cancelamento automático por inatividade ou falta de assinatura
Atenção — Configuração do app perdida: A mudança para o Plano Starter é um rebaixamento e envolve a exclusão e recriação da pasta de configuração do app. Todas as configurações personalizadas anteriores (layout, conteúdos, ajustes, integrações) serão perdidas definitivamente. Recomendamos salvar suas configurações antes de fazer o rebaixamento.
Etapa 3. Cancelamento definitivo
Ao final dos 30 dias de carência, todos os seus dados serão excluídos automática e permanentemente. Isso inclui:
- Configuração do app e configurações personalizadas
- Dados do perfil e informações da empresa
- Imagens enviadas (logo, capa)
- Histórico e estatísticas de uso
- Quaisquer outros dados associados à sua conta
Irreversível: Esta operação é permanente e irreversível. Aplica-se em todos os casos: cancelamento voluntário da assinatura, suspensão por falta de pagamento, cartão expirado ou método de pagamento inválido. Uma vez excluídos, os dados não poderão ser recuperados de forma alguma. Se você acha que pode voltar no futuro, recomendamos mudar para o Plano Starter para preservar sua conta (observe que a configuração do app será perdida).
Tem dúvidas? Se você tem perguntas sobre o cancelamento ou quer assistência, entre em contato com o suporte. Estamos aqui para ajudar.
Buscar
Configurações e seções