Guida Configurazione
Horizon Studio e Configura la tua App
Personalizza la tua app e scopri tutte le funzionalità di Horizon Studio. I campi sono già pre-compilati con valori ottimali: cambia solo quello che vuoi personalizzare.
CORS Fix per Integrazione Esterna
Se il tuo sito è mostrato dentro l'app e le immagini non si vedono, devi aggiungere queste righe al tuo server. Senza questa impostazione, l'app non può caricare le immagini dal tuo sito.
Perché serve il CORS?
📱 La tua App
→
🌐 Il tuo sito
❌ Immagini bloccateIl server non permette il caricamento esterno
📱 La tua App
→
✅ Il tuo sito
con CORS attivo
con CORS attivo
✅ Immagini caricate!Il server permette il caricamento
Copia questo codice in cima al tuo file
.htaccess. Deve essere il primo blocco del file. Se non sai dove trovare questo file, chiedi al tuo webmaster o al tuo provider di hosting. .htaccess
# CORS FIX PER FLUTTER
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"
Dopo aver aggiunto il codice, le immagini del tuo sito saranno visibili nell'app entro pochi minuti. Se il problema persiste, contatta il supporto.
Integrazione Blog (White-Label)
Per visualizzare il tuo blog all'interno della piattaforma, il tuo sito deve permettere il "framing". Segui questa procedura. In pochi minuti è tutto pronto.
Fase 1: Test di Compatibilità
Prima di modificare qualsiasi cosa, verifica se il tuo blog è già pronto.
1
Vai sul sito IFrameTester.com
2
Incolla l'URL completo del tuo blog (es.
https://www.ilmioblog.it)3
Clicca su Render
Il tuo sito appare nel riquadro? Non devi fare nulla: il tuo blog è già compatibile!
Vedi un errore tipo "Refused to connect" o un riquadro grigio? Il tuo server sta bloccando l'integrazione. Procedi alla Fase 2.
Fase 2: Soluzione Tecnica
Chiedi al tuo webmaster o al tuo provider di hosting di applicare una di queste configurazioni. Queste istruzioni rimuovono i blocchi di sicurezza e permettono alla piattaforma di visualizzare il tuo contenuto.
Opzione A: Server Nginx
Modifica il file di configurazione del sito aggiungendo queste righe:
nginx
# Rimuove il blocco di sicurezza restrittivo
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options "" always;
# Permette l'integrazione universale (White-Label)
add_header Content-Security-Policy "frame-ancestors *;" always;Opzione B: Server Apache (.htaccess) ← Consigliata
Aggiungi queste righe in cima al tuo file .htaccess:
apache
<IfModule mod_headers.c>
Header always unset X-Frame-Options
Header always set Content-Security-Policy "frame-ancestors *"
</IfModule>Opzione C: functions.php ← Più semplice
Se non hai accesso ai file del server, aggiungi questo codice al file functions.php del tuo tema attivo:
php
function allow_white_label_framing() {
// Sblocca le restrizioni di sicurezza del sito
remove_action( 'login_init', 'send_frame_options_header', 10 );
remove_action( 'admin_init', 'send_frame_options_header', 10 );
// Abilita la visualizzazione esterna
header("Content-Security-Policy: frame-ancestors *");
header_remove("X-Frame-Options");
}
add_action('send_headers', 'allow_white_label_framing', 1);Requisiti Fondamentali
Protocollo HTTPS: Il tuo blog deve avere un certificato SSL attivo. I siti in
http:// (non sicuri) non possono essere caricati.Cloudflare: Se usi Cloudflare, disattiva eventuali regole di tipo "HSTS" o "Origin Shield" che forzano l'header
X-Frame-Options: SAMEORIGIN.Supporto: Se dopo aver applicato queste modifiche il test continua a fallire, contatta il supporto tecnico del tuo provider fornendo lo screenshot del test effettuato su IFrameTester.com.
Dominio Personalizzato (White-Label)
Se il tuo piano include l'opzione Custom Domain, puoi collegare il tuo dominio o sottodominio (es. app.tuonome.it) alla piattaforma. I tuoi utenti accederanno alla tua app dal tuo indirizzo web.
Come funziona il puntamento DNS
🌐 app.tuonome.it
→
🔗 CNAME Record
punta a
→
connect.travelinfluencer.it
🔒 Certificato SSL
generato automaticamente
generato automaticamente
→
✅ La tua App è online!
accessibile da app.tuonome.it
accessibile da app.tuonome.it
Istruzioni per il Puntamento DNS
Accedi al pannello di gestione del tuo dominio (es. Aruba, Cloudflare, Register) e aggiungi un nuovo record DNS:
| Campo | Valore da inserire |
|---|---|
| Tipo di Record | CNAME |
| Host / Nome | app, oppure il nome che preferisci: viaggi, portal, connect... |
| Destinazione / Valore | connect.travelinfluencer.it |
| TTL | Automatico oppure 3600 |
Note Importanti
Non usare record di tipo A (indirizzi IP). Usa esclusivamente il record CNAME puntato a
connect.travelinfluencer.it. Questo garantisce che il tuo servizio rimanga attivo anche in caso di aggiornamenti dei nostri server.SSL / HTTPS automatico: Una volta configurato il puntamento, il nostro sistema genererà automaticamente un certificato SSL gratuito per il tuo dominio entro pochi minuti.
Propagazione DNS: Le modifiche ai DNS possono richiedere da pochi minuti fino a qualche ora per essere visibili a livello globale.
Cosa succede dopo?
1
Crei il record CNAME nel tuo pannello DNS
2
Il nostro sistema rileva il puntamento e genera automaticamente il certificato SSL
3
La tua app sarà accessibile dal tuo indirizzo personalizzato (es.
app.tuonome.it)Attenzione. Downgrade da dominio personalizzato a sottodominio: Il dominio personalizzato è integrato nella configurazione interna della tua app (database, sessioni utente, certificati SSL, indicizzazione). Il passaggio da un dominio personalizzato a un sottodominio standard comporta una ristrutturazione completa dell'ambiente che rende incompatibili i dati esistenti. Configurazione dell'app, impostazioni personalizzate e contenuti associati al dominio verranno persi definitivamente. Questa operazione è irreversibile: prima di effettuare un downgrade, assicurati di aver salvato tutto ciò di cui hai bisogno.
Horizon Studio
Horizon Studio è la piattaforma che ti permette di configurare la tua app e gestire il tuo blog di contenuti.
Piattaforma completa: Horizon Studio è molto più di un semplice blog. Include editor avanzato, badge promozionali, CTA con link esterni, monitoraggio visualizzazioni, sistema like, commenti e profili autore personalizzabili — tutto gestito dal frontend.
📝 Creazione e Gestione Contenuti
Tutto quello che serve per creare e gestire i tuoi articoli, direttamente dal frontend.
| Funzionalità | Descrizione |
|---|---|
| Editor frontend completo | Creazione e modifica articoli con editor visuale TinyMCE (toolbar completa). Formattazione del testo, inserimento immagini, link e molto altro. |
| Immagini in evidenza | Upload con anteprima immediata. Il sistema mostra un'anteprima prima della pubblicazione. |
| Stato pubblicazione | Toggle rapido tra Pubblicato e Bozza direttamente dalla lista articoli. Nessuna conferma richiesta: un click per cambiare stato. |
| Eliminazione permanente | Eliminazione articoli con conferma esplicita. Le immagini associate vengono rimosse automaticamente. |
| Commenti | Toggle on/off per ogni articolo. Template commenti personalizzato con supporto risposte annidate. Attiva o disattiva i commenti singolarmente per ogni contenuto. |
🏷️ Sistema Badge
Ogni articolo può essere contrassegnato con un badge visivo mostrato sulla card e nel singolo post. I badge appaiono come etichette colorate in overlay sull'immagine in evidenza.
| Badge | Significato | Caso d'uso |
|---|---|---|
| Promo | Offerta promozionale | Sconti, offerte a tempo limitato, codici promo |
| Nuovo | Contenuto appena pubblicato | Segnalare novità, recenti aggiunte al catalogo |
| Hot | Contenuto popolare | Best-seller, trend del momento, contenuti virali |
| Gratis | Contenuto gratuito | Risorse free, guide gratuite, trial, omaggi |
Dove appaiono: I badge sono visibili sulla card articolo nella lista, nel profilo autore e nel singolo post — sempre in overlay sull'immagine in evidenza.
🔗 CTA con Link Esterni
Ogni articolo può includere una Call-To-Action con link esterno, perfetta per monetizzare i contenuti e rimandare a risorse esterne.
Casi d'uso
| Tipo | Descrizione | Esempio |
|---|---|---|
| Link di affiliazione | Rimandare a prodotti/servizi di terze parti con tracciamento commissioni | Link a Booking.com, Amazon, ecc. |
| Pacchetti e prodotti | Link a pagine di acquisto, landing page, e-commerce | "Prenota il pacchetto vacanza" |
| Guide e risorse | Rimandare a tutorial, documentazione, corsi online | "Scarica la guida PDF" |
| Siti esterni | Qualsiasi URL esterno per approfondimenti, demo, ecc. | "Visita il sito del partner" |
Come funziona nel singolo post
La CTA viene mostrata come un pulsante visibile nel box promo del singolo post, con:
- Label — il testo del pulsante (es. "€29.99", "Scopri", "Prenota ora")
- Link — apre in una nuova scheda con
rel="noopener noreferrer"per sicurezza - Icona freccia — indica l'azione di uscita verso il sito esterno
👁 Monitoraggio Visualizzazioni
Il conteggio delle visualizzazioni è automatico e attivo di default per tutti gli articoli. Nessuna configurazione richiesta.
| Funzionalità | Dettaglio |
|---|---|
| Contatore automatico | Il contatore viene incrementato automaticamente ad ogni visita al singolo post. |
| Visualizzazione nella lista | Il conteggio è mostrato su ogni card articolo con l'icona 👁. |
| Nessuna configurazione | Il tracking è attivo di default per tutti gli articoli pubblicati. |
❤️ Sistema Like
Sistema di apprezzamento pubblico, senza login richiesto. Funziona per tutti i visitatori, anonimi inclusi.
| Funzionalità | Dettaglio |
|---|---|
| Like pubblico | Nessun login richiesto. I visitatori anonimi possono mettere like a qualsiasi articolo. |
| Prevenzione duplicati | Lo stato del like è salvato in localStorage del browser per evitare like multipli dallo stesso dispositivo. |
| Feedback visivo | Il cuore si riempie e il contatore si aggiorna in tempo reale con un'animazione fluida. |
| Endpoint pubblico | Accessibile sia da utenti autenticati che da visitatori anonimi. Nessuna autenticazione necessaria. |
👤 Profili Autore Personalizzabili
Ogni autore ha una pagina profilo pubblica completamente personalizzabile, visibile a tutti i visitatori.
| Elemento | Descrizione |
|---|---|
| Immagine hero | Banner a larghezza piena con overlay gradiente. L'immagine copre tutta la parte superiore del profilo. |
| Avatar | Immagine circolare sovrapposta all'hero. Diventa il simbolo visivo dell'autore in tutto il sito. |
| Bio HTML | Descrizione con formattazione ricca (grassetto, link, elenchi). Supporta HTML completo per una bio professionale. |
| Nickname | Nome visualizzato personalizzato, indipendente dal nome utente WordPress. |
| Colori personalizzati | 6 colori personalizzabili (sfondo, pulsanti, testo, card) + arrotondamento immagine. Ogni profilo può avere il suo stile unico. |
| Griglia articoli | Tutti i post pubblicati dell'autore, mostrati in griglia con badge e prezzo in evidenza su ogni card. |
Personalizzazione totale: I profili autore sono completamente indipendenti. Ogni autore può scegliere i propri colori, la propria hero e il proprio stile — creando un'identità visiva unica all'interno della piattaforma.
Tutto dal frontend: Horizon Studio è progettato per non richiedere mai l'accesso al pannello di amministrazione WordPress. Creazione, modifica, pubblicazione, profilo autore — tutto avviene direttamente dall'interfaccia utente.
Configurazione dell'App
Tutti i campi sono già pre-compilati con valori ottimali. Cambia solo quello che vuoi personalizzare. Puoi sempre tornare ai valori originali con il pulsante Reset.
Non devi compilare tutto! I valori predefiniti sono già ottimali per la maggior parte degli utenti. Personalizza solo ciò che rende la tua app unica.
Campi e piani: Alcuni campi dipendono dal piano sottoscritto (Starter, Premium, Pro). I campi bloccati dal piano non sono modificabili. Questa guida mostra tutti i campi disponibili. Quelli non accessibili appariranno disabilitati nella configurazione.
branding · colors
L'identità visiva della tua app: logo, colori e font.
| Campo | Default | Cosa fa |
|---|---|---|
logoUrlURL | Logo TravelInfluencer | L'immagine che rappresenta la tua app. Formato PNG, minimo 512×512px. Usata come icona in ogni punto dell'app. Come inserire il logo: carica un'immagine dal tuo profilo e copia l'URL generato, oppure incolla direttamente l'URL di un'immagine online. Se le immagini non si caricano, consulta la sezione CORS Fix. |
backgroundColorColore | #00519C | Il colore principale del tuo brand. Usato nella barra browser e come colore tema. |
splashBackgroundColorColore | #FFFFFF | Il colore di sfondo quando l'app si avvia. Di solito bianco o il colore del brand. |
Mostra tutti i colori personalizzabili
Ogni colore è in formato #RRGGBB. I valori mostrati sono i default.
Superficie e Sfondo
| Campo | Default | Uso |
|---|---|---|
colors.primary | #00519C | Bottoni primari, indicatori attivi, AppBar |
colors.surface | #FFFFFF | Sfondo di card, dialog, bottom sheet |
colors.background | #F7F9FC | Sfondo principale dietro a tutto |
colors.surfaceTint | #E8EDF5 | Sfondi semi-trasparenti, switch track |
colors.surfaceTintLight | #F0F4FA | Variante più chiara di surfaceTint |
Testo
| Campo | Default | Uso |
|---|---|---|
colors.textPrimary | #0F172A | Titoli e contenuti importanti |
colors.textSecondary | #475569 | Sottotitoli e info complementari |
colors.textTertiary | #94A3B8 | Hint, placeholder, info poco importanti |
colors.textDisabled | #CBD5E1 | Elementi disabilitati |
Stati
| Campo | Default | Uso |
|---|---|---|
colors.success | #16A34A | Conferme, stato "completato" |
colors.warning | #F59E0B | Avvisi e attenzione |
colors.error | #DC2626 | Errori principali |
colors.errorLight | #FEF2F2 | Sfondo leggero per aree di errore |
colors.errorBorder | #FECACA | Bordo card/contenitori di errore |
Categorie Trip
| Campo | Default | Uso |
|---|---|---|
colors.categoryAccommodation | Colore alloggi | Hotel, B&B, ecc. |
colors.categoryTransport | Colore trasporti | Voli, treni, ecc. |
colors.categoryFood | Colore cibo | Ristoranti, ecc. |
colors.categoryActivities | Colore attività | Tour, escursioni |
colors.categoryOther | Colore altro | Spese non classificabili |
Stati Trip
| Campo | Uso |
|---|---|
colors.statusUpcoming | Badge "In arrivo" |
colors.statusInProgress | Badge "In corso" |
colors.statusCompleted | Badge "Completato" |
Varie
| Campo | Uso |
|---|---|
colors.border | Bordo standard per card e input |
colors.borderLight | Bordo leggero per separazioni sottili |
colors.divider | Linee divisori tra sezioni |
colors.iconSecondary | Icone decorative secondarie |
colors.overlayBackground | Sfondo overlay scuro (popup, dialog) |
colors.overlayText | Testo su sfondo overlay scuro |
colors.shadow | Colore base ombre (di solito #000000) |
colors.shadowOpacity0.0-1.0 | Trasparenza delle ombre |
colors.onPrimary | Testo/icone sopra il colore primary |
colors.onSurface | Testo/icone sopra il colore surface |
app
Le informazioni base: nome, versione e identità dell'app.
| Campo | Default | Cosa fa |
|---|---|---|
appNameTesto | Horizon | Il nome della tua app mostrato agli utenti: appare nel titolo, nella barra e ovunque nell'app. |
appVersionTesto | 1.0.0 | Numero versione (riferimento interno). |
poweredByTextTesto | powered by travelinfluencer.it | Testo "powered by" in fondo alla pagina info. Visibile solo se "Mostra powered by" è attivo. |
aiButtonTextTesto | HorizonAI | Il nome del tuo assistente AI: appare nella barra e nella schermata AI. Per cambiare l'identità vai alla sezione ai. |
links
Tutti i link e le pagine collegate alla tua app.
| Campo | Tipo | Cosa fa |
|---|---|---|
website | URL | Link al tuo sito web, horizon studio o social (se embed è possibile): mostrato come bottone "Esplora" nella pagina info. |
privacyPolicy | URL | Link alla pagina Privacy Policy. |
termsAndConditions | URL | Link alla pagina Termini e Condizioni. |
promoPopup | URL | URL della pagina mostrata nel popup promozionale. Appare dopo X secondi dall'apertura. |
infoHeaderImageUrl | URL | Immagine header in cima alla pagina info. Larghezza consigliata: 1200px+. Come inserire l'immagine header: carica un'immagine dal tuo profilo e copia l'URL generato, oppure incolla direttamente l'URL di un'immagine online. Se le immagini non si caricano, consulta la sezione CORS Fix. |
services · socialLinks
I servizi mostrati nella barra di navigazione (bottom bar) e i link social nel menu laterale (drawer) dell'app.
Massimo 5 servizi attivi nella barra di navigazione. Il numero di servizi disponibili dipende dal piano. Solo i primi 5 servizi con toggle attivo appariranno nella barra in basso.
Servizi disponibili
Per ogni servizio inserisci il link di affiliazione e usa il toggle per attivarlo o disattivarlo. Il numero di servizi disponibili dipende dal piano.
| Icona | Nome Servizio | Cosa inserire nel campo URL |
|---|---|---|
| ✈️ | Flights | Link affiliato per la ricerca voli |
| 🏨 | Hotels | Link affiliato per prenotazione hotel |
| 🏡 | Vacation Homes | Link affiliato per case vacanza e appartamenti |
| 📦 | Packages | Link affiliato per pacchetti vacanza (volo + hotel) |
| 🚗 | Cars | Link affiliato per noleggio auto |
| 🛡️ | Insurance | Link affiliato per assicurazione viaggio |
| 📱 | eSIM | Link affiliato per schede SIM virtuali |
| 🗺️ | Tours | Link affiliato per tour, biglietti musei e attività |
| 🚢 | Cruises | Link affiliato per crociere |
| 🧳 | Luggage Storage | Link affiliato per deposito bagagli |
| 🚂 | Trains | Link affiliato per biglietti treno |
| 🚌 | Bus | Link affiliato per biglietti autobus |
| ⛴️ | Ferries | Link affiliato per traghetti e ferry |
| 🚕 | Taxi | Link affiliato per prenotazione taxi |
| 🛺 | Airport Transfer | Link affiliato per transfer da/per aeroporto |
| 🔒 | VPN | Link affiliato per servizi VPN |
| 🍽️ | Restaurants | Link affiliato per prenotazione ristoranti |
| ⛷️ | Equipment Rental | Link affiliato per noleggio attrezzatura sportiva |
| 🛥️ | Yachts | Link affiliato per noleggio yacht e barche |
| 🚐 | Camper | Link affiliato per noleggio camper e RV |
| 📋 | Book Now | Link alla pagina di prenotazione generica |
| 💬 | Scrivi whatsapp: apre chat con il numero impostato in Azienda | |
| ✉️ | Scrivi email: apre client email con l'indirizzo aziendale | |
| 📞 | Phone | Scrivi phone: apre compositore con il numero aziendale |
URL speciali: Per WhatsApp, Email e Telefono usa rispettivamente
whatsapp, email, phone come URL: l'app aprirà automaticamente l'applicazione corretta. Le informazioni di contatto di questi campi vengono impostate nella sezione "business".Piattaforme Social (visibili nel menu laterale dell'app)
| Icona | Piattaforma | Cosa inserire nel campo URL |
|---|---|---|
| ▶️ | YouTube | URL del canale YouTube, es. https://youtube.com/@iltuocanale |
| 🎵 | TikTok | URL del profilo TikTok, es. https://tiktok.com/@iltuoprofilo |
| 📸 | URL del profilo Instagram, es. https://instagram.com/iltuoprofilo | |
| 👍 | URL della pagina Facebook, es. https://facebook.com/latuapagina | |
| 🐦 | X (Twitter) | URL del profilo X, es. https://x.com/iltuoprofilo |
| 💼 | URL della pagina o profilo LinkedIn, es. https://linkedin.com/company/la-tua-azienda | |
| 📌 | URL del profilo o board Pinterest, es. https://pinterest.com/iltuoprofilo | |
| 🎧 | Spotify | URL del profilo o playlist Spotify, es. https://open.spotify.com/user/iltuoprofilo |
| 🎶 | Apple Music | URL del profilo Apple Music, es. https://music.apple.com/iltuoprofilo |
| ☁️ | SoundCloud | URL del profilo SoundCloud, es. https://soundcloud.com/iltuoprofilo |
| 📦 | Amazon | URL dello store o storefront Amazon, es. https://amazon.com/shop/iltuoprofilo |
| 🎬 | Vimeo | URL del profilo Vimeo, es. https://vimeo.com/iltuoprofilo |
ai
Configura il comportamento del tuo assistente AI integrato. Il processing avviene interamente sul dispositivo: nessun dato viene inviato a server esterni.
| Campo | Default | Cosa fa |
|---|---|---|
aiModelMaxTokensNumero | 16000 | La capacità totale del modello. Più alto = risposte più lunghe e complesse. Valori tipici: 8000-32000. |
aiModelTemperature0.0-1.0 | 0.5 | Quanto è creativo l'AI. 0 = preciso e ripetitivo, 1 = creativo e variabile. Consigliato: 0.3-0.7. |
aiModelTopKNumero | 35 | Varietà delle risposte ad ogni step. Valori bassi = più focalizzato, valori alti = più vario. |
aiResponseReserveTokensNumero | 1500 | Spazio riservato per la risposta. L'input disponibile = maxTokens - reserveTokens. |
aiSystemPromptTesto | - | Le istruzioni che definiscono il comportamento del tuo AI. Puoi strutturare il prompt con tag XML e usare questi placeholder speciali:<identity> = identità e ruolo dell'assistente<rules> = regole e vincoli del comportamento<context> = contesto dinamico (viaggi e link)<user_trips> = elenco viaggi dell'utente<app_links> = link dei servizi attivi |
ui · webview
Controlla l'aspetto visivo dell'interfaccia: barra di navigazione, icone, ombre e altro.
| Campo | Default | Cosa fa |
|---|---|---|
useIslandBottomBarSì/No | true | Stile barra di navigazione: attivo = barra floating "isola" con bordi arrotondati, disattivato = barra classica attaccata al bordo. |
showBottomBarLabelsSì/No | true | Mostra il testo sotto le icone nella barra. Disattivato = solo icone. |
showAISì/No | true | Mostra il bottone dell'assistente AI nella barra. |
showMyTripsSì/No | true | Mostra il tab "I Miei Viaggi" nella barra. |
loadingIndicatorShapeTesto | Circle | La forma dell'animazione di caricamento. Vedi tutti gli stili disponibili ↓ |
Mostra impostazioni grafiche avanzate
| Campo | Default | Cosa fa |
|---|---|---|
useIconBackgroundHighlightSì/No | false | Aggiunge uno sfondo colorato dietro l'icona attiva nella barra. |
showPoweredBySì/No | true | Mostra il testo "powered by" in fondo alla pagina info. |
showBusinessInfoCardSì/No | true | Mostra la card con informazioni aziendali nella pagina info. |
useOutlinedIconsSì/No | true | Stile icone: attivo = solo contorno, disattivato = piene. |
showPromoPopupSì/No | true | Abilita il popup promozionale dopo X secondi. |
promoPopupDelaySecondsNumero | 15 | Secondi di attesa prima di mostrare il popup. |
bottomBarItemHeightPixel | 70.0 | Altezza di ogni elemento della barra di navigazione. |
buttonRadiusPixel | 30.0 | Bordi arrotondati dei bottoni. 0 = squadrati, 30+ = molto arrotondati. |
cardRadiusPixel | 30.0 | Bordi arrotondati delle card. Stesso principio di buttonRadius. |
elevation0.0+ | 5.0 | Intensità dell'ombra su card ed elementi floating. 0 = nessuna ombra. |
redirect
L'animazione di transizione quando l'app apre un link esterno.
| Campo | Default | Cosa fa |
|---|---|---|
redirectOverlayEnabledSì/No | true | Mostra un overlay scuro di transizione prima di aprire link esterni. |
redirectOverlayDurationMsms | 800 | Durata dell'overlay in millisecondi. Valori tipici: 500-1500. |
business
Le informazioni aziendali mostrate nella pagina info della tua app.
| Campo | Tipo | Cosa fa |
|---|---|---|
whatsappPhoneNumberTesto | Numero WhatsApp | Numero per contatto rapido. Formato internazionale: +39123456789 |
emailEmail | Email di contatto | L'email dove i clienti possono raggiungerti. |
phoneNumberTesto | Telefono | Numero telefono. Formato internazionale: +39123456789 |
aboutDescriptionTesto | Testo libero | La descrizione "Chi Siamo" della tua attività. |
businessAddressTesto | Indirizzo | L'indirizzo legale della tua azienda. |
businessVatTesto | P. IVA | Partita IVA / VAT number. |
businessOpeningHoursTesto | Orari | Gli orari di apertura della tua attività. |
network
Come la tua app si presenta al resto del web.
| Campo | Default | Cosa fa |
|---|---|---|
userAgentTesto | - | Il "nome" con cui la tua app si presenta ai siti web. Formato consigliato: NomeApp/1.0 (email@esempio.com) |
defaultCurrencyTesto | EUR | Valuta predefinita per i viaggi. Codice ISO: EUR, USD, GBP, JPY, ecc. |
map (avanzate)
La maggior parte degli utenti non ha bisogno di cambiare queste impostazioni. La mappa usa OpenStreetMap.
| Campo | Default | Cosa fa |
|---|---|---|
defaultMapLatitudeNumero | 41.9028 | Latitudine del centro mappa all'apertura (default: Roma). |
defaultMapLongitudeNumero | 12.4964 | Longitudine del centro mappa all'apertura (default: Roma). |
mapInitialZoomNumero | 3.0 | Zoom iniziale. Valori bassi = vista continente, alti = vista strada. |
mapSelectedLocationZoomNumero | 5.0 | Zoom quando selezioni una posizione dalla lista. |
mapMarkerSizePixel | 40.0 | Dimensione dei marker sulla mappa. |
mapPolylineWidthPixel | 3.0 | Spessore della linea che collega i punti del percorso. |
mapZoomForSelectionNumero | 15.0 | Zoom per la selezione precisa di un indirizzo. |
mapMinZoomNumero | 2.0 | Zoom minimo consentito. |
mapMaxZoomNumero | 18.0 | Zoom massimo consentito. |
Ricorda: hai sempre il pulsante Reset per tornare ai valori predefiniti! Non puoi "rompere" nulla: torna tutto come prima con un click.
Guida Font
I font della tua app vengono caricati da Google Fonts. Usa il nome esatto come appare su Google Fonts: anche una lettera diversa e il font non caricherà.
Attenzione: Il nome deve corrispondere esattamente a quello su Google Fonts, inclusi spazi e maiuscole. Se il font non esiste, verrà usato il font di sistema.
I due campi font
| Campo | Cosa controlla |
|---|---|
bodyFont | Il font per tutto il testo dell'app: paragrafi, descrizioni, elenchi, bottoni. Di solito un font semplice e leggibile. |
titleFont | Il font per i titoli: AppBar, titoli di sezione, logo. Di solito un font più decorativo o in grassetto. |
Font popolari: clicca per vedere su Google Fonts
Sora
Moderno e geometrico. Ottimo per titoli.
Onest
Pulito e leggibile. Perfetto per il corpo testo.
Inter
Il font più usato per interfacce digitali.
Poppins
Geometrico e amichevole. Molto popolare.
Montserrat
Elegante e versatile. Ottimo per il brand.
Lato
Classico e professionale. Buona leggibilità.
Roboto
Il font di Android. Familiare per tutti.
Open Sans
Neutrale e molto leggibile. Grande classico.
Playfair Display
Elegante con grazie. Perfetto per titoli di lusso.
Nunito
Morbido e arrotondato. Amichevole.
Raleway
Sottile ed elegante. Molto stiloso.
Quicksand
Arrotondato e giocoso. Per un look informale.
Non trovi il font che cerchi? Visita fonts.google.com: ci sono oltre 1500 font gratuiti. Ricorda di copiare il nome esatto!
Indicatori di Caricamento
Scegli l'animazione di caricamento per la tua app. Ogni stile ha un nome e inseriscilo nel campo loadingIndicatorShape della sezione ui · webview.
Circle
Default
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
Come usarlo: Scegli l'animazione che preferisci e inserisci il nome esatto (come mostrato sopra) nel campo
loadingIndicatorShape nella sezione ui · webview.📱 Come installare l'App
La tua app è una PWA (Progressive Web App): non si scarica dall'App Store o dal Google Play Store, ma si installa direttamente dal browser. È veloce, leggera e funziona come un'app nativa. Segui la procedura per il tuo dispositivo.
🤖 Android (Chrome)
Per installare l'app su un dispositivo Android, utilizza il browser Google Chrome.
1
Apri Chrome sul tuo telefono Android.
2
Apri la tua app nel browser — vai all'indirizzo della tua app.
3
Tocca il menu premendo sull'icona ⋮ (tre puntini verticali) in alto a destra dello schermo.
4
Seleziona "Aggiungi alla schermata Home" oppure "Installa app" dal menu a tendina.
5
Conferma premendo su "Aggiungi" o "Installa" nella finestra di conferma.
6
Fatto! L'icona dell'app apparirà nella tua schermata Home. Ora puoi aprirla come qualsiasi altra app.
Suggerimento: Su alcuni dispositivi Android potresti vedere un banner automatico in basso che ti invita a installare l'app. In tal caso, basta toccare "Installa" direttamente dal banner.
🍎 iPhone e iPad (Safari)
Per installare l'app su iPhone o iPad, utilizza il browser Safari (non Chrome o altri browser).
1
Apri Safari sul tuo iPhone o iPad.
2
Apri la tua app nel browser — vai all'indirizzo della tua app.
3
Tocca l'icona Condivisione premendo su ⬆️ (il quadrato con la freccia che punta verso l'alto) nella barra in basso.
4
Scorri il menu verso il basso e seleziona "Aggiungi alla Home" (o "Aggiungi alla schermata Home").
5
Personalizza il nome dell'app se lo desideri, poi tocca "Aggiungi" in alto a destra.
6
Fatto! L'icona dell'app apparirà nella tua schermata Home. Ora puoi aprirla come qualsiasi altra app.
Importante: Su iOS l'installazione della PWA funziona solo da Safari. Se stai usando Chrome, Firefox o un altro browser su iPhone, l'opzione "Aggiungi alla Home" non sarà disponibile. Apri il link in Safari.
🖥️ Desktop (Chrome, Edge, Brave)
Puoi installare l'app anche sul tuo computer, con Google Chrome, Microsoft Edge o Brave.
1
Apri il browser (Chrome, Edge o Brave) sul tuo computer.
2
Apri la tua app nel browser — vai all'indirizzo della tua app.
3
Cerca l'icona di installazione nella barra degli indirizzi: un'icona ⊕ (simbolo di installazione) oppure il menu ⋮ (tre puntini) in alto a destra.
4
Clicca su "Installa app" o "Installa Travelinfluencer" dal menu.
5
Conferma cliccando su "Installa" nella finestra di dialogo.
6
Fatto! L'app si aprirà in una finestra dedicata senza barra degli indirizzi, e troverai l'icona sul desktop o nel menu delle applicazioni.
Suggerimento: Su Chrome e Edge potresti vedere direttamente un'icona ⊕ nella barra degli indirizzi quando la PWA è rilevata. Cliccala per un'installazione rapida con un solo clic.
Perché installare l'app? Una volta installata, l'app si aprirà a schermo intero senza la barra del browser, come un'app nativa. Avrai un accesso più rapido, un'esperienza più fluida e l'icona sempre a portata di mano sulla tua Home.
Problemi Comuni
Hai un problema? Probabilmente la soluzione è qui sotto. Le modifiche possono richiedere qualche minuto per essere visibili nell'app. E ricordati: hai sempre il pulsante Reset per tornare ai valori originali!
Ho modificato un campo ma non vedo il cambiamento
Se un campo viene lasciato vuoto o rimosso, il sistema carica automaticamente il valore predefinito. Questo significa che la tua modifica potrebbe non essere stata salvata correttamente.
Cosa fare: Assicurati che il campo sia compilato con un valore valido. Se il campo è vuoto, il sistema userà il default: non è un errore, è di design!
Suggerimento: Dopo aver compilato il campo, ricordati di salvare le modifiche, poi ricarica la pagina per verificare.
Il colore che ho inserito non funziona
I colori devono essere nel formato HEX a 6 cifre, con il simbolo # all'inizio.
| Formato | Esempio | Funziona? |
|---|---|---|
| HEX 6 cifre | #00519C | ✅ Sì |
| Senza # | 00519C | ❌ No |
| Nome colore | red | ❌ No |
| RGB | rgb(0,81,156) | ❌ No |
Serve ispirazione? Usa un color picker online come ColorHunt per trovare palette armoniose, poi copia il codice HEX.
Il font non cambia
Il nome del font deve corrispondere esattamente a quello su Google Fonts, incluse maiuscole, minuscole e spazi. Se il nome non è corretto, verrà usato il font di sistema.
| Nome inserito | Corretto? |
|---|---|
Poppins | ✅ Sì |
poppins | ❌ Manca la maiuscola |
Playfair Display | ✅ Sì (con spazio) |
Playfairdisplay | ❌ Manca lo spazio |
Font disponibili: Puoi usare qualsiasi font su Google Fonts (oltre 1500 gratuiti). Copia il nome esatto dalla pagina del font.
L'URL di un servizio non si apre
Gli URL dei servizi devono essere completi e sicuri. Ecco le regole:
URL corretto: Deve iniziare con
https://, esempio: https://flights.travelinfluencer.itURL non sicuro: Gli URL che iniziano con
http:// (senza la "s") non vengono caricati per motivi di sicurezza.URL speciali: Per WhatsApp, Email e Telefono usa semplicemente
whatsapp, email o phone: niente https, sono gestiti automaticamente!Ho abilitato un servizio ma non lo vedo nella barra
La barra di navigazione mostra al massimo 5 servizi attivi. Se ne hai abilitati di più, solo i primi 5 appariranno nella barra.
Limite: 5 servizi. Se hai 6 o più servizi con toggle attivo, il sesto e successivi non saranno visibili. Disabilita i servizi meno importanti per far spazio a quelli che vuoi mostrare.
Ordine di priorità: I servizi vengono mostrati nell'ordine in cui appaiono nella lista. I primi 5 attivi vincono. Gli altri restano disponibili ma nascosti dalla barra.
Ho caricato un'immagine nel profilo ma non la vedo nell'app
Quando carichi un'immagine dal tuo profilo (logo o immagine copertina), il sistema genera un link URL per quell'immagine. Devi copiare quell'URL e incollarlo nel campo corretto della configurazione.
Come fare: Nel tuo profilo, dopo aver caricato l'immagine, usa il pulsante apposito per copiare l'URL dell'immagine. Poi vieni nella configurazione e incollalo nel campo
logoUrl (per il logo) o infoHeaderImageUrl (per l'immagine di copertina).Importante: L'immagine non viene collegata automaticamente: devi copiare l'URL manualmente. Senza l'URL nel campo, l'app continuerà a mostrare l'immagine predefinita.
Voglio tornare al sottodominio dopo aver usato un dominio personalizzato
Il passaggio da dominio personalizzato a sottodominio standard è possibile, ma comporta la perdita completa dei dati associati alla tua app.
Perché? Il dominio personalizzato è integrato nella configurazione interna (database, sessioni, certificati SSL). Il downgrade richiede una ristrutturazione dell'ambiente che rende i dati esistenti incompatibili.
Prima di procedere: Salva tutte le impostazioni e i contenuti di cui hai bisogno. Dopo il downgrade, configurazione dell'app, impostazioni personalizzate e contenuti associati al dominio verranno persi definitivamente. L'operazione è irreversibile.
Non puoi rompere nulla! Hai sempre il pulsante Reset per tornare ai valori predefiniti con un click. Se qualcosa non funziona come dovrebbe, usa Reset e ricomincia: è fatto apposta! Se il problema persiste anche dopo il reset, contatta il supporto.
Cancellazione Account
Se desideri chiudere il tuo account e rimuovere tutti i tuoi dati, segui attentamente questa procedura. L'operazione è irreversibile: leggi bene ogni passaggio prima di procedere.
Passaggio 1. Cancella il tuo abbonamento
Prima di poter chiudere l'account, devi cancellare il tuo abbonamento attivo. Non è possibile eliminare l'account se hai un piano in corso.
Attenzione: La cancellazione dell'abbonamento non elimina immediatamente il tuo account. Il tuo abbonamento rimarrà attivo fino alla data di scadenza naturale del periodo già pagato.
Passaggio 2. Periodo di grazia (30 giorni)
Una volta scaduto l'abbonamento, il tuo account entra in un periodo di grazia di 30 giorni. Durante questo periodo:
Puoi ancora riattivare: Se cambi idea, puoi riattivare il tuo abbonamento in qualsiasi momento durante i 30 giorni e ritrovare tutto esattamente come lo avevi lasciato: configurazione, dati e impostazioni saranno intatti.
I tuoi dati sono al sicuro: Durante il periodo di grazia, tutti i tuoi dati vengono conservati e protetti. Nessuna informazione viene cancellata in questa fase.
Passaggio 3. Cancellazione definitiva
Al termine dei 30 giorni di grazia, tutti i tuoi dati verranno cancellati automaticamente e permanentemente. Questo include:
- Configurazione dell'app e impostazioni personalizzate
- Dati del profilo e informazioni aziendali
- Immagini caricate (logo, copertina)
- Cronologia e statistiche di utilizzo
- Qualsiasi altro dato associato al tuo account
Irreversibile: Questa operazione è permanente e non reversibile. Una volta cancellati, i dati non potranno essere recuperati in alcun modo. Se pensi di poter tornare in futuro, ti consigliamo di semplicemente cancellare l'abbonamento e riattivarlo quando vuoi, senza chiudere l'account.
Hai dubbi? Se hai domande sulla cancellazione o vuoi assistenza, contatta il supporto. Siamo qui per aiutarti.
Cerca
Impostazioni e sezioni