Configuration Guide
Horizon Studio & Configure your App
Customize your app and discover all the features of Horizon Studio. Fields are pre-filled with optimal values: change only what you want to personalize.
CORS Fix for External Integration
If your site is shown inside the app and images don't load, you need to add these lines to your server. Without this setting, the app cannot load images from your site.
Why is CORS needed?
📱 Your App
→
🌐 Your site
❌ Images blockedThe server doesn't allow external loading
📱 Your App
→
✅ Your site
with CORS enabled
with CORS enabled
✅ Images loaded!The server allows loading
Copy this code at the top of your
.htaccess file. It must be the first block in the file. If you don't know where to find this file, ask your webmaster or hosting provider. .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>In case of a 500 error or if the server doesn't recognize the directives, you need to enable the Apache headers module from the server terminal with the command:
Then restart Apache with
sudo a2enmod headersThen restart Apache with
sudo systemctl restart apache2After adding the code, your site's images will be visible in the app within a few minutes. If the problem persists, contact support.
Website, Blog or Social Embed Integration (White-Label)
To display your website, blog or social content within the platform, the source must allow "framing". Follow this procedure. In a few minutes everything is ready.
Pro plan: Integrating your custom website or blog inside the app is available exclusively with the Pro plan. Starter and Premium plans use Horizon Studio as the publishing platform.
Step 1: Compatibility Test
Before changing anything, check whether your site/blog is already ready.
1
Go to the website IFrameTester.com
2
Paste the full URL of your site or blog (e.g.
https://www.myblog.com)3
Click Render
Does your site appear in the frame? You don't need to do anything: your site/blog is already compatible!
Do you see an error like "Refused to connect" or a gray frame? Your server is blocking the integration. Proceed to Step 2.
Step 2: Technical Solution
Ask your webmaster or hosting provider to apply one of these configurations. These instructions remove the security blocks and allow the platform to display your content.
Option A: Nginx Server
Edit the site configuration file by adding these lines:
nginx
# Removes the restrictive security block
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options "" always;
# Allows universal integration (White-Label)
add_header Content-Security-Policy "frame-ancestors *;" always;Option B: Apache Server (.htaccess) ← Recommended
Add these lines at the top of your .htaccess file:
apache
<IfModule mod_headers.c>
Header always unset X-Frame-Options
Header always set Content-Security-Policy "frame-ancestors *"
</IfModule>Option C: functions.php ← Simplest
If you don't have access to the server files, add this code to the functions.php file of your active theme:
php
function allow_white_label_framing() {
// Unlocks the site's security restrictions
remove_action( 'login_init', 'send_frame_options_header', 10 );
remove_action( 'admin_init', 'send_frame_options_header', 10 );
// Enables external display
header("Content-Security-Policy: frame-ancestors *");
header_remove("X-Frame-Options");
}
add_action('send_headers', 'allow_white_label_framing', 1);Step 3: Enable Advanced Features (Optional)
To offer the best experience to your users, add this script in the <head> of your site. The script enables additional features such as optimized navigation and smooth animations inside the app.
1
Open your site's HTML file (or the theme template file)
2
Find the
<head> ... </head> tag3
Paste the following script before the closing
</head>html
<script src="https://scripts.travelinfluencer.co/horizon-webview-helper.js" data-horizon-webview async></script>What this script does: Enables optimized navigation, smooth animations and advanced transitions when your site is viewed inside the Travelinfluencer app. The site continues to work normally even without the script.
Optional but recommended: The script is lightweight, loads asynchronously and doesn't affect your site's performance. It does nothing if the site isn't opened inside the app.
Fundamental Requirements
HTTPS protocol: Your site/blog must have an active SSL certificate. Sites on
http:// (insecure) cannot be loaded.Cloudflare: If you use Cloudflare, disable any "HSTS" or "Origin Shield" rules that force the
X-Frame-Options: SAMEORIGIN header.Support: If after applying these changes the test still fails, contact your provider's technical support providing the screenshot of the test performed on IFrameTester.com.
Social Embed: Some social platforms allow you to embed their content directly in your app. The availability of this feature depends on the social platform: not all social networks support embedding. If the platform allows it, the content will be displayed natively inside the app without additional configuration.
Custom Domain (White-Label)
If your plan includes the Custom Domain option, you can connect your domain or subdomain (e.g. app.yourname.com) to the platform. Your users will access your app from your web address.
How DNS pointing works
🌐 app.yourname.com
→
🔗 CNAME Record
points to
→
connect.travelinfluencer.co
🔒 SSL Certificate
generated automatically
generated automatically
→
✅ Your App is online!
accessible from app.yourname.com
accessible from app.yourname.com
DNS Pointing Instructions
Log in to your domain management panel (e.g. Aruba, Cloudflare, Register) and add a new DNS record:
| Field | Value to enter |
|---|---|
| Record Type | CNAME |
| Host / Name | app, or any name you prefer: travel, portal, connect... |
| Destination / Value | connect.travelinfluencer.co |
| TTL | Automatic or 3600 |
Important Notes
Do not use A records (IP addresses). Use only the CNAME record pointing to
connect.travelinfluencer.co. This ensures your service stays active even when our servers are updated.SSL / HTTPS automatic: Once the pointing is configured, our system will automatically generate a free SSL certificate for your domain within a few minutes.
DNS propagation: DNS changes can take from a few minutes up to a few hours to be visible globally.
What happens next?
1
You create the CNAME record in your DNS panel
2
Our system detects the pointing and automatically generates the SSL certificate
3
Your app will be accessible from your custom address (e.g.
app.yourname.com)Warning. Downgrade from custom domain to subdomain: The custom domain is integrated into your app's internal configuration (user sessions, SSL certificates, indexing). Switching from a custom domain to a standard subdomain requires a complete restructuring of the environment that makes existing data incompatible. App configuration, custom settings and content associated with the domain will be permanently lost. This operation is irreversible: before performing a downgrade, make sure you have saved everything you need.
Horizon Studio
Horizon Studio is the platform that lets you configure your app and manage your content blog.
Complete platform: Horizon Studio is much more than a simple blog. It includes an advanced editor, promotional badges, CTAs with external links, view tracking, like system, comments and customizable author profiles — all managed from the frontend.
📝 Content Creation and Management
Everything you need to create and manage your articles, directly from the frontend.
| Feature | Description |
|---|---|
| Full frontend editor | Create and edit articles with the TinyMCE visual editor (full toolbar). Text formatting, image insertion, links and much more. |
| Featured images | Upload with instant preview. The system shows a preview before publishing. |
| Publishing status | Quick toggle between Published and Draft directly from the article list. No confirmation required: one click to change status. |
| Permanent deletion | Delete articles with explicit confirmation. Associated images are removed automatically. |
| Comments | Toggle on/off for each article. Custom comment template with nested reply support. Enable or disable comments individually for each content. |
🏷️ Badge System
Each article can be marked with a visual badge shown on the card and in the single post. Badges appear as colored labels overlaid on the featured image.
| Badge | Meaning | Use case |
|---|---|---|
| Promo | Promotional offer | Discounts, limited-time offers, promo codes |
| Nuovo | Newly published content | Highlight news, recent additions to the catalog |
| Hot | Popular content | Best-sellers, current trends, viral content |
| Gratis | Free content | Free resources, free guides, trials, giveaways |
Where they appear: Badges are visible on the article card in the list, in the author profile and in the single post — always overlaid on the featured image.
🔗 CTAs with External Links
Each article can include a Call-To-Action with an external link, perfect for monetizing content and linking to external resources.
Use cases
| Type | Description | Example |
|---|---|---|
| Affiliate links | Link to third-party products/services with commission tracking | Links to Booking.com, Amazon, etc. |
| Packages and products | Links to purchase pages, landing pages, e-commerce | "Book the vacation package" |
| Guides and resources | Link to tutorials, documentation, online courses | "Download the PDF guide" |
| External sites | Any external URL for in-depth info, demos, etc. | "Visit the partner's site" |
How it works in the single post
The CTA is shown as a visible button in the promo box of the single post, with:
- Label — the button text (e.g. "€29.99", "Discover", "Book now")
- Link — opens in a new tab with
rel="noopener noreferrer"for security - Arrow icon — indicates the exit action to the external site
👁 View Tracking
The view counter is automatic and active by default for all articles. No configuration required.
| Feature | Detail |
|---|---|
| Automatic counter | The counter is incremented automatically on each visit to the single post. |
| Display in the list | The count is shown on each article card with the 👁 icon. |
| No configuration | Tracking is active by default for all published articles. |
👤 Profile Views
The view counter for author/influencer profiles is automatic and active by default. No configuration required.
| Feature | Detail |
|---|---|
| Automatic counter | The counter is incremented automatically on each visit to the author/influencer's profile. |
| Display in the profile | The count is shown on the author/influencer profile page with the 👁 icon. |
| No configuration | Tracking is active by default for all published author/influencer profiles. |
❤️ Like System
Public appreciation system, no login required. Works for all visitors, including anonymous ones.
| Feature | Detail |
|---|---|
| Public likes | No login required. Anonymous visitors can like any article. |
| Duplicate prevention | The like state is saved in the browser to prevent multiple likes from the same device. |
| Visual feedback | The heart fills and the counter updates in real time with a smooth animation. |
| Public endpoint | Accessible by both authenticated users and anonymous visitors. No authentication required. |
👤 Customizable Author Profiles
Each author has a fully customizable public profile page, visible to all visitors.
| Element | Description |
|---|---|
| Hero image | Full-width banner with gradient overlay. The image covers the entire top section of the profile. |
| Avatar | Circular image overlaid on the hero. It becomes the author's visual symbol across the entire site. |
| Bio HTML | Description with rich formatting (bold, links, lists). Supports full HTML for a professional bio. |
| Nickname | Custom display name, independent from the username. |
| Custom colors | 6 customizable colors (background, buttons, text, cards) + image rounding. Each profile can have its own unique style. |
| Article grid | All published posts by the author, shown in a grid with badges and featured price on each card. |
Total customization: Author profiles are completely independent. Each author can choose their own colors, hero and style — creating a unique visual identity within the platform.
App Configuration
All fields are already pre-filled with optimal values. Change only what you want to customize. You can always return to the original values with the Reset button.
You don't have to fill everything! The default values are already optimal for most users. Customize only what makes your app unique.
Fields and plans: Some fields depend on the subscribed plan (Starter, Premium, Pro). Fields locked by the plan are not editable. This guide shows all available fields. Those not accessible will appear disabled in the configuration.
First access: Before you can access your app, you are asked to choose a domain name (e.g.
yourname.travelinfluencer.co). To open the app, type that address in your browser's search bar. branding · colors
The visual identity of your app: logo, colors and font.
| Field | Default | What it does |
|---|---|---|
logoUrlURL | TravelInfluencer logo | The image that represents your app. PNG format, minimum 512×512px. Used as the icon everywhere in the app. How to add the logo: upload an image from your profile and copy the generated URL, or paste the URL of an online image directly. If images don't load, see the CORS Fix section. |
backgroundColorColor | #00519C | The main color of your brand. Used in the browser bar and as the theme color. |
splashBackgroundColorColor | #FFFFFF | The background color when the app starts. Usually white or the brand color. |
Show all customizable colors
Each color is in #RRGGBB format. The values shown are the defaults.
Surface and Background
| Field | Default | Usage |
|---|---|---|
colors.primary | #00519C | Primary buttons, active indicators, AppBar |
colors.surface | #FFFFFF | Background of cards, dialogs, bottom sheets |
colors.background | #F7F9FC | Main background behind everything |
colors.surfaceTint | #E8EDF5 | Semi-transparent backgrounds, switch track |
colors.surfaceTintLight | #F0F4FA | Lighter variant of surfaceTint |
Text
| Field | Default | Usage |
|---|---|---|
colors.textPrimary | #0F172A | Titles and important content |
colors.textSecondary | #475569 | Subtitles and complementary info |
colors.textTertiary | #94A3B8 | Hints, placeholders, low-importance info |
colors.textDisabled | #CBD5E1 | Disabled elements |
States
| Field | Default | Usage |
|---|---|---|
colors.success | #16A34A | Confirmations, "completed" status |
colors.warning | #F59E0B | Warnings and attention |
colors.error | #DC2626 | Main errors |
colors.errorLight | #FEF2F2 | Light background for error areas |
colors.errorBorder | #FECACA | Border of error cards/containers |
colors.errorSecondary | #EF9A9A | Secondary error color, light background |
colors.errorText | #E53935 | Error message text |
colors.errorDark | #D32F2F | Dark error color, for important actions |
Trip Categories
| Field | Default | Usage |
|---|---|---|
colors.categoryAccommodation | Accommodation color | Hotels, B&Bs, etc. |
colors.categoryTransport | Transport color | Flights, trains, etc. |
colors.categoryFood | Food color | Restaurants, etc. |
colors.categoryActivities | Activities color | Tours, excursions |
colors.categoryOther | Other color | Unclassifiable expenses |
Trip States
| Field | Usage |
|---|---|
colors.statusUpcoming | "Upcoming" badge |
colors.statusInProgress | "In progress" badge |
colors.statusCompleted | "Completed" badge |
Miscellaneous
| Field | Usage |
|---|---|
colors.border | Standard border for cards and inputs |
colors.borderLight | Light border for thin separations |
colors.divider | Divider lines between sections |
colors.iconSecondary | Secondary decorative icons |
colors.overlayBackground | Dark overlay background (popups, dialogs) |
colors.overlayText | Text on dark overlay background |
colors.shadow | Base shadow color (usually #000000) |
colors.shadowOpacity0.0-1.0 | Shadow transparency |
colors.onPrimary | Text/icons on top of the primary color |
colors.onSecondary | Text/icons on top of the secondary color |
colors.onSurface | Text/icons on top of the surface color |
colors.onError | Text/icons on top of the error color |
app
Basic information: name, version and app identity.
| Field | Default | What it does |
|---|---|---|
appNameText | Horizon | The name of your app shown to users: appears in the title, in the bar and everywhere in the app. |
appVersionText | 1.0.0 | Version number (internal reference). |
poweredByTextText | powered by travelinfluencer.co | "powered by" text at the bottom of the info page. Visible only if "Show powered by" is active. |
aiButtonTextText | HorizonAI | The name of your AI assistant: appears in the bar and on the AI screen. To change the identity, go to the ai section. |
links
All links and pages connected to your app.
| Field | Type | What it does |
|---|---|---|
website | URL | Link to your website, Horizon Studio or social (if embedding is possible): shown as an "Explore" button on the info page. Note: the link to your custom website is only available with the Pro plan. |
privacyPolicy | URL | Link to the Privacy Policy page. |
termsAndConditions | URL | Link to the Terms and Conditions page. |
promoPopup | URL | URL of the page shown in the promotional popup. Appears X seconds after opening. |
infoHeaderImageUrl | URL | Header image at the top of the info page. Recommended width: 1200px+. How to add the header image: upload an image from your profile and copy the generated URL, or paste the URL of an online image directly. If images don't load, see the CORS Fix section. |
services · socialLinks
The services shown in the navigation bar (bottom bar) and the social links in the app's side menu (drawer).
Maximum 5 active services in the navigation bar. The number of available services depends on the plan. Only the first 5 services with the toggle active will appear in the bottom bar.
Available services
For each service, enter the affiliate link and use the toggle to enable or disable it. The number of available services depends on the plan.
| Icon | Service Name | What to enter in the URL field |
|---|---|---|
| ✈️ | Flights | Affiliate link for flight search |
| 🏨 | Hotels | Affiliate link for hotel booking |
| 🏡 | Vacation Homes | Affiliate link for vacation homes and apartments |
| 📦 | Packages | Affiliate link for vacation packages (flight + hotel) |
| 🚗 | Cars | Affiliate link for car rental |
| 🛡️ | Insurance | Affiliate link for travel insurance |
| 📱 | eSIM | Affiliate link for virtual SIM cards |
| 🗺️ | Tours | Affiliate link for tours, museum tickets and activities |
| 🚢 | Cruises | Affiliate link for cruises |
| 🧳 | Luggage Storage | Affiliate link for luggage storage |
| 🚂 | Trains | Affiliate link for train tickets |
| 🚌 | Bus | Affiliate link for bus tickets |
| ⛴️ | Ferries | Affiliate link for ferries |
| 🚕 | Taxi | Affiliate link for taxi booking |
| 🛺 | Airport Transfer | Affiliate link for airport transfers |
| 🔒 | VPN | Affiliate link for VPN services |
| 🍽️ | Restaurants | Affiliate link for restaurant reservations |
| ⛷️ | Equipment Rental | Affiliate link for sports equipment rental |
| 🛥️ | Yachts | Affiliate link for yacht and boat rental |
| 🚐 | Camper | Affiliate link for camper and RV rental |
| 📋 | Book Now | Link to the generic booking page |
| 🛍️ | Buy Now | Link to the purchase page |
| 🚲 | Bike | Affiliate link for bicycle rental |
| 🏍️ | Motorcycle | Affiliate link for motorcycle rental |
| 🔑 | Rent Now | Affiliate link for generic rental |
| 💬 | Type whatsapp: opens chat with the number set in Business | |
| ✉️ | Type email: opens email client with the business address | |
| 📞 | Phone | Type phone: opens dialer with the business number |
Special URLs: For WhatsApp, Email and Phone, use
whatsapp, email, phone respectively as the URL: the app will automatically open the correct application. The contact information for these fields is set in the "business" section.Social Platforms (visible in the app's side menu)
| Icon | Platform | What to enter in the URL field |
|---|---|---|
| ▶️ | YouTube | YouTube channel URL, e.g. https://youtube.com/@yourchannel |
| 🎵 | TikTok | TikTok profile URL, e.g. https://tiktok.com/@yourprofile |
| 📸 | Instagram profile URL, e.g. https://instagram.com/yourprofile | |
| 👍 | Facebook page URL, e.g. https://facebook.com/yourpage | |
| 🐦 | X (Twitter) | X profile URL, e.g. https://x.com/yourprofile |
| 💼 | LinkedIn page or profile URL, e.g. https://linkedin.com/company/your-company | |
| 📌 | Pinterest profile or board URL, e.g. https://pinterest.com/yourprofile | |
| 🎧 | Spotify | Spotify profile or playlist URL, e.g. https://open.spotify.com/user/yourprofile |
| 🎶 | Apple Music | Apple Music profile URL, e.g. https://music.apple.com/yourprofile |
| ☁️ | SoundCloud | SoundCloud profile URL, e.g. https://soundcloud.com/yourprofile |
| 📦 | Amazon | Amazon store or storefront URL, e.g. https://amazon.com/shop/yourprofile |
| 🎬 | Vimeo | Vimeo profile URL, e.g. https://vimeo.com/yourprofile |
ai
Configure the behavior of your integrated AI assistant. The model used is LFM by Liquid AI, running entirely on-device: no data is sent to external servers.
| Field | Default | What it does |
|---|---|---|
aiModelTemperature0.0-1.0 | 0.5 | How creative the AI is. 0 = precise and repetitive, 1 = creative and variable. Recommended: 0.3-0.7. |
aiModelTopKNumber | 38 | Variety of responses at each step. Low values = more focused, high values = more varied. |
aiSystemPromptText | - | The instructions that define your AI's behavior. You can structure the prompt with XML tags and use these special placeholders:<identity> = assistant's identity and role<rules> = behavioral rules and constraints<context> = dynamic context (trips and links)<user_trips> = list of user's trips<app_links> = links to active services |
ui · webview
Controls the visual appearance of the interface: navigation bar, icons, shadows and more.
| Field | Default | What it does |
|---|---|---|
useIslandBottomBarYes/No | false | Navigation bar style: active = floating "island" bar with rounded edges, disabled = classic bar attached to the edge. |
showBottomBarLabelsYes/No | true | Shows the text under the icons in the bar. Disabled = icons only. |
showAIYes/No | true | Shows the AI assistant button in the bar. |
showMyTripsYes/No | true | Shows the "My Trips" tab in the bar. |
loadingIndicatorShapeText | Circle | The shape of the loading animation. See all available styles ↓ |
Show advanced graphic settings
| Field | Default | What it does |
|---|---|---|
useIconBackgroundHighlightYes/No | false | Adds a colored background behind the active icon in the bar. |
showPoweredByYes/No | true | Shows the "powered by" text at the bottom of the info page. |
showBusinessInfoCardYes/No | true | Shows the business information card on the info page. |
useOutlinedIconsYes/No | true | Icon style: active = outline only, disabled = filled. |
showInputFieldBordersYes/No | false | Shows the border on input fields. Active = fields with visible border, disabled = fields without border. |
showPromoPopupYes/No | true | Enables the promotional popup after X seconds. |
promoPopupDelaySecondsNumber | 15 | Seconds to wait before showing the popup. |
buttonRadiusPixel | 30.0 | Rounded corners of buttons. 0 = square, 30+ = very rounded. |
cardRadiusPixel | 30.0 | Rounded corners of cards. Same principle as buttonRadius. |
elevation0.0+ | 5.0 | Shadow intensity on cards and floating elements. 0 = no shadow. |
redirect
The transition animation when the app opens an external link.
| Field | Default | What it does |
|---|---|---|
redirectOverlayEnabledYes/No | true | Shows a dark transition overlay before opening external links. |
redirectOverlayDurationMsms | 800 | Duration of the overlay in milliseconds. Typical values: 500-1500. |
business
Business information shown on your app's info page.
| Field | Type | What it does |
|---|---|---|
whatsappPhoneNumberText | WhatsApp number | Number for quick contact. International format: +39123456789 |
emailEmail | Contact email | The email where customers can reach you. |
phoneNumberText | Phone | Phone number. International format: +39123456789 |
aboutDescriptionText | Free text | The "About Us" description of your business. |
businessAddressText | Address | The legal address of your company. |
businessVatText | VAT number | VAT number / Tax ID. |
businessOpeningHoursText | Hours | Your business opening hours. |
network
How your app presents itself to the rest of the web.
| Field | Default | What it does |
|---|---|---|
userAgentText | - | The "name" your app uses to identify itself to websites. Recommended format: AppName/1.0 (email@example.com) |
defaultCurrencyText | EUR | Default currency for trips. ISO code: EUR, USD, GBP, JPY, etc. |
map (advanced)
Most users don't need to change these settings. The map uses OpenStreetMap.
| Field | Default | What it does |
|---|---|---|
defaultMapLatitudeNumber | 41.9028 | Latitude of the map center on opening (default: Rome). |
defaultMapLongitudeNumber | 12.4964 | Longitude of the map center on opening (default: Rome). |
mapInitialZoomNumber | 3.0 | Initial zoom. Low values = continent view, high values = street view. |
mapSelectedLocationZoomNumber | 5.0 | Zoom when you select a location from the list. |
mapMarkerSizePixel | 40.0 | Size of markers on the map. |
mapPolylineWidthPixel | 3.0 | Thickness of the line connecting route points. |
mapZoomForSelectionNumber | 15.0 | Zoom for precise address selection. |
mapMinZoomNumber | 2.0 | Minimum allowed zoom. |
mapMaxZoomNumber | 18.0 | Maximum allowed zoom. |
Remember: you always have the Reset button to return to the default values! You can't "break" anything: everything goes back to how it was with one click.
Font Guide
Your app's fonts are loaded from Google Fonts. Use the exact name as it appears on Google Fonts: even one different letter and the font won't load.
Warning: The name must match exactly the one on Google Fonts, including spaces and capitalization. If the font doesn't exist, the system font will be used.
The two font fields
| Field | What it controls |
|---|---|
bodyFont | The font for all text in the app: paragraphs, descriptions, lists, buttons. Usually a simple, readable font. |
titleFont | The font for titles: AppBar, section titles, logo. Usually a more decorative or bold font. |
Popular fonts: click to view on Google Fonts
Sora
Modern and geometric. Great for titles.
Onest
Clean and readable. Perfect for body text.
Inter
The most used font for digital interfaces.
Poppins
Geometric and friendly. Very popular.
Montserrat
Elegant and versatile. Great for branding.
Lato
Classic and professional. Good readability.
Roboto
The Android font. Familiar to everyone.
Open Sans
Neutral and very readable. A great classic.
Playfair Display
Elegant with serifs. Perfect for luxury titles.
Nunito
Soft and rounded. Friendly.
Raleway
Thin and elegant. Very stylish.
Quicksand
Rounded and playful. For an informal look.
Can't find the font you're looking for? Visit fonts.google.com: there are over 1500 free fonts. Remember to copy the exact name!
Loading Indicators
Choose the loading animation for your app. Each style has a name — enter it in the loadingIndicatorShape field of the ui · webview section.
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
RotatingPlain
FadingCube
WaveSpinner
PulsingGrid
How to use it: Choose the animation you prefer and enter the exact name (as shown above) in the
loadingIndicatorShape field in the ui · webview section.📱 How to Install the App
Your app is a PWA (Progressive Web App): it's not downloaded from the App Store or Google Play Store, but installed directly from the browser. It's fast, lightweight and works like a native app. Follow the procedure for your device.
🤖 Android (Chrome)
To install the app on an Android device, use the Google Chrome browser.
1
Open Chrome on your Android phone.
2
Open your app in the browser — go to your app's address.
3
Tap the menu by pressing the ⋮ icon (three vertical dots) in the top right corner of the screen.
4
Select "Add to Home screen" or "Install app" from the dropdown menu.
5
Confirm by tapping "Add" or "Install" in the confirmation window.
6
Done! The app icon will appear on your Home screen. You can now open it like any other app.
Tip: On some Android devices you may see an automatic banner at the bottom prompting you to install the app. In that case, just tap "Install" directly from the banner.
🍎 iPhone and iPad (Safari)
To install the app on iPhone or iPad, use the Safari browser (not Chrome or other browsers).
1
Open Safari on your iPhone or iPad.
2
Open your app in the browser — go to your app's address.
3
Tap the Share icon by pressing ⬆️ (the square with the arrow pointing up) in the bottom bar.
4
Scroll down the menu and select "Add to Home Screen".
5
Customize the name of the app if you wish, then tap "Add" in the top right.
6
Done! The app icon will appear on your Home screen. You can now open it like any other app.
Important: On iOS, PWA installation works only from Safari. If you're using Chrome, Firefox or another browser on iPhone, the "Add to Home Screen" option won't be available. Open the link in Safari.
🖥️ Desktop (Chrome, Edge, Brave)
You can also install the app on your computer, with Google Chrome, Microsoft Edge or Brave.
1
Open the browser (Chrome, Edge or Brave) on your computer.
2
Open your app in the browser — go to your app's address.
3
Look for the install icon in the address bar: a ⊕ icon (install symbol) or the ⋮ menu (three dots) in the top right.
4
Click "Install app" or "Install Travelinfluencer" from the menu.
5
Confirm by clicking "Install" in the dialog window.
6
Done! The app will open in a dedicated window without an address bar, and you'll find the icon on your desktop or in the applications menu.
Tip: On Chrome and Edge you may see a ⊕ icon directly in the address bar when the PWA is detected. Click it for a quick one-click installation.
Why install the app? Once installed, the app will open in full screen without the browser bar, like a native app. You'll get faster access, a smoother experience and the icon always at your fingertips on your Home screen.
Common Issues
Having a problem? The solution is probably below. Changes may take a few minutes to be visible in the app. And remember: you always have the Reset button to return to the original values!
I changed a field but don't see the change
If a field is left empty or removed, the system automatically loads the default value. This means your change may not have been saved correctly.
What to do: Make sure the field is filled with a valid value. If the field is empty, the system will use the default: it's not an error, it's by design!
Tip: After filling in the field, remember to save the changes, then reload the page to verify.
The color I entered doesn't work
Colors must be in 6-digit HEX format, with the # symbol at the beginning.
| Format | Example | Works? |
|---|---|---|
| 6-digit HEX | #00519C | ✅ Yes |
| Without # | 00519C | ❌ No |
| Color name | red | ❌ No |
| RGB | rgb(0,81,156) | ❌ No |
Need inspiration? Use an online color picker like ColorHunt to find harmonious palettes, then copy the HEX code.
The font doesn't change
The font name must match exactly the one on Google Fonts, including uppercase, lowercase and spaces. If the name is incorrect, the system font will be used.
| Entered name | Correct? |
|---|---|
Poppins | ✅ Yes |
poppins | ❌ Missing capital letter |
Playfair Display | ✅ Yes (with space) |
Playfairdisplay | ❌ Missing space |
Available fonts: You can use any font on Google Fonts (over 1500 free). Copy the exact name from the font's page.
A service URL doesn't open
Service URLs must be complete and secure. Here are the rules:
Correct URL: Must start with
https://, example: https://flights.travelinfluencer.coInsecure URL: URLs starting with
http:// (without the "s") are not loaded for security reasons.Special URLs: For WhatsApp, Email and Phone simply use
whatsapp, email or phone: no https needed, they're handled automatically!I enabled a service but don't see it in the bar
The navigation bar shows a maximum of 5 active services. If you've enabled more, only the first 5 will appear in the bar.
Limit: 5 services. If you have 6 or more services with the toggle active, the sixth and subsequent ones won't be visible. Disable the less important services to make room for the ones you want to show.
Priority order: Services are shown in the order they appear in the list. The first 5 active ones win. The others remain available but hidden from the bar.
I uploaded an image to my profile but don't see it in the app
When you upload an image from your profile (logo or cover image), the system generates a URL link for that image. You need to copy that URL and paste it into the correct field in the configuration.
How to do it: In your profile, after uploading the image, use the dedicated button to copy the image URL. Then come to the configuration and paste it into the
logoUrl field (for the logo) or infoHeaderImageUrl (for the cover image).Important: The image is not linked automatically: you must copy the URL manually. Without the URL in the field, the app will continue to show the default image.
I want to go back to the subdomain after using a custom domain
Switching from a custom domain to the standard subdomain is possible, but it involves the complete loss of data associated with your app.
Why? The custom domain is integrated into the internal configuration (sessions, SSL certificates). The downgrade requires an environment restructuring that makes existing data incompatible.
Before proceeding: Save all the settings and content you need. After the downgrade, app configuration, custom settings and content associated with the domain will be permanently lost. The operation is irreversible.
The site or app is not accessible
If you can't access the site, the app or Horizon Studio, there may be scheduled or emergency maintenance in progress.
Scheduled maintenance: Scheduled maintenance is announced in advance via email or through a platform notice. If you received a notification, wait the indicated time and try again.
Emergency maintenance: In case of technical emergencies or security issues, the service may be temporarily suspended without notice. The team works to restore it as soon as possible.
What to do: Check your internet connection. If the connection works, wait a few minutes and reload the page. If the problem persists for more than 30 minutes, contact support.
The app doesn't work properly in incognito/private mode
If you're using the browser in incognito, InPrivate or private browsing mode, many app features may not work properly. This is due to the restrictions browsers apply in this mode.
Limited features: In private browsing, the browser blocks many storage APIs. This means the AI model download (HorizonAI) may not work, "My Trips" data (documents and itineraries) won't be saved permanently, and preferences and configuration won't be retained.
Why it happens: Browsers in private mode restrict access to some storage features to protect privacy. The app needs these technologies to work properly.
Solution: Open a normal (non-private) browsing window in your browser and access the app from there. All features will be available and your data will be saved correctly.
My site has no navigation or animations in the app
If your site is visible in the app but navigation seems limited or animations don't work, the integration script may be missing in the <head> section of your site.
What to do: Add this script before the closing
</head> tag on your site:html
<script src="https://scripts.travelinfluencer.co/horizon-webview-helper.js" data-horizon-webview async></script>Details: This script enables optimized navigation, smooth animations and other advanced features when your site is opened inside the app. It's lightweight, asynchronous and doesn't affect site performance. See the Site Integration → Phase 3 section for more details.
The app crashes after downloading the AI
If the app closes unexpectedly or freezes after downloading the AI model (HorizonAI), the problem is due to insufficient resources on your device.
Why it happens: HorizonAI runs the AI model locally on the device. This requires a significant amount of RAM and computing power. If your phone has little available memory or an outdated processor, the system can't handle the model and the app crashes.
What to do: Try closing all other apps in the background to free up memory, then reopen the app. If the problem persists, your device may not have the minimum hardware resources needed to run the AI. In this case, you can disable the AI from the configuration (set
showAI to false): all other app features will continue to work normally.You can't break anything! You always have the Reset button to return to the default values with one click. If something doesn't work as it should, use Reset and start over: that's what it's for! If the problem persists even after reset, contact support.
Account Cancellation
If you wish to close your account and remove all your data, follow this procedure carefully. The operation is irreversible: read each step carefully before proceeding.
Step 1. Cancel your subscription
Before you can close your account, you must cancel your active subscription. It's not possible to delete the account if you have an active plan.
Warning: Canceling the subscription doesn't immediately delete your account. Your subscription will remain active until the natural expiration date of the period already paid for.
Suspension or invalid payment: If your subscription is suspended due to failed payment, expired card, or invalid payment method, the exact same procedure applies: after the subscription expires, your account automatically enters the 30-day grace period and is then permanently deleted. You'll receive notification emails before this happens.
Step 2. Grace period (30 days)
Once the subscription expires, your account enters a 30-day grace period. During this period:
You can still reactivate: If you change your mind, you can reactivate your subscription at any time during the 30 days and find everything exactly as you left it: configuration, data and settings will be intact.
Your data is safe: During the grace period, all your data is stored and protected. No information is deleted at this stage.
💡 Alternative: Switch to the Free Plan
If you don't want to lose your account but no longer want a paid subscription, you can downgrade to the free plan. This allows you to:
- ✅ Preserve your account and profile data
- ✅ Maintain access to the platform
- ✅ Avoid automatic cancellation for inactivity or lack of subscription
Warning — App configuration lost: Downgrading to the free plan involves deleting and recreating the app configuration folder. All previous custom configurations (layout, content, settings, integrations) will be permanently lost. We recommend saving your configurations before downgrading.
Step 3. Permanent deletion
At the end of the 30-day grace period, all your data will be automatically and permanently deleted. This includes:
- App configuration and custom settings
- Profile data and business information
- Uploaded images (logo, cover)
- Usage history and statistics
- Any other data associated with your account
Irreversible: This operation is permanent and non-reversible. It applies in all cases: voluntary subscription cancellation, suspension for failed payment, expired card or invalid payment method. Once deleted, data cannot be recovered in any way. If you think you might return in the future, we recommend downgrading to the free plan to preserve your account (keep in mind that the app configuration will be lost).
Have doubts? If you have questions about cancellation or need assistance, contact support. We're here to help.
Search
Settings and sections