Guide de configuration

Horizon Studio et Configurez votre application

Personnalisez votre application et découvrez toutes les fonctionnalités d'Horizon Studio. Les champs sont déjà pré-remplis avec des valeurs optimales : modifiez uniquement ce que vous souhaitez personnaliser.

CORS Fix pour intégration externe

Si votre site est affiché dans l'application et que les images ne s'affichent pas, vous devez ajouter ces lignes à votre serveur. Sans ce paramètre, l'application ne peut pas charger les images de votre site.

Pourquoi le CORS est-il nécessaire ?
?? Votre application
?
?? Votre site
? Images bloquéesLe serveur n'autorise pas le chargement externe
?? Votre application
?
? Votre site
avec CORS actif
? Images chargées !Le serveur autorise le chargement
??
Copiez ce code en haut de votre fichier .htaccess. Il doit être le premier bloc du fichier. Si vous ne savez pas où trouver ce fichier, demandez à votre webmaster ou à votre hébergeur.
.htaccess
# CORS FIX
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, OPTIONS, POST"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</IfModule>
??
En cas d'erreur 500 ou si le serveur ne reconnaît pas les directives, il faut activer le module headers d'Apache depuis le terminal du serveur avec la commande :
sudo a2enmod headers
Redémarrez ensuite Apache avec sudo systemctl restart apache2
?
Après avoir ajouté le code, les images de votre site seront visibles dans l'application en quelques minutes. Si le problème persiste, contactez le support.

Intégration Site, Blog ou Social Embed (White-Label)

Pour afficher votre site web, blog ou contenus sociaux au sein de la plateforme, la source doit autoriser le « framing ». Suivez cette procédure. En quelques minutes, tout est prêt.

??
Plan Pro : L'intégration de votre site web ou blog personnalisé au sein de l'application est disponible exclusivement avec le plan Pro. Les plans Starter et Premium utilisent Horizon Studio comme plateforme de publication.

Étape 1 : Test de compatibilité

Avant de modifier quoi que ce soit, vérifiez si votre site/blog est déjà prêt.

1
Rendez-vous sur le site IFrameTester.com
2
Collez l'URL complète de votre site ou blog (ex. https://www.monblog.fr)
3
Cliquez sur Render
?
Votre site apparaît dans le cadre ? Vous n'avez rien à faire : votre site/blog est déjà compatible !
?
Vous voyez une erreur du type « Refused to connect » ou un cadre gris ? Votre serveur bloque l'intégration. Passez à l'étape 2.

Étape 2 : Solution technique

Demandez à votre webmaster ou à votre hébergeur d'appliquer l'une de ces configurations. Ces instructions suppriment les blocages de sécurité et permettent à la plateforme d'afficher votre contenu.

Option A : Serveur Nginx

Modifiez le fichier de configuration du site en ajoutant ces lignes :

nginx
# Supprime la restriction de sécurité stricte
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options "" always;
# Autorise l'intégration universelle (White-Label)
add_header Content-Security-Policy "frame-ancestors *;" always;
Option B : Serveur Apache (.htaccess) ? Recommandée

Ajoutez ces lignes en haut de votre fichier .htaccess :

apache
<IfModule mod_headers.c>
Header always unset X-Frame-Options
Header always set Content-Security-Policy "frame-ancestors *"
</IfModule>
Option C : functions.php ? Plus simple

Si vous n'avez pas accès aux fichiers du serveur, ajoutez ce code au fichier functions.php de votre thème actif :

php
function allow_white_label_framing() {
// Débloque les restrictions de sécurité du site
remove_action( 'login_init', 'send_frame_options_header', 10 );
remove_action( 'admin_init', 'send_frame_options_header', 10 );
// Active l'affichage externe
header("Content-Security-Policy: frame-ancestors *");
header_remove("X-Frame-Options");
}
add_action('send_headers', 'allow_white_label_framing', 1);

Étape 3 : Activer les fonctionnalités avancées (Facultatif)

Pour offrir la meilleure expérience à vos utilisateurs, ajoutez ce script dans l'<head> de votre site. Le script active des fonctionnalités supplémentaires telles qu'une navigation optimisée et des animations fluides au sein de l'application.

1
Ouvrez le fichier HTML de votre site (ou le fichier template du thème)
2
Trouvez la balise <head> ... </head>
3
Collez le script suivant avant la fermeture de </head>
html
<script src="https://scripts.travelinfluencer.co/horizon-webview-helper.js" data-horizon-webview async></script>
?
Ce que fait ce script : Il active une navigation optimisée, des animations fluides et des transitions avancées lorsque votre site est affiché au sein de l'application Travelinfluencer. Le site continue de fonctionner normalement même sans le script.
??
Facultatif mais recommandé : Le script est léger, se charge de manière asynchrone et n'affecte pas les performances de votre site. Il ne fait rien si le site n'est pas ouvert dans l'application.

Exigences fondamentales

??
Protocole HTTPS : Votre site/blog doit disposer d'un certificat SSL actif. Les sites en http:// (non sécurisés) ne peuvent pas être chargés.
??
Cloudflare : Si vous utilisez Cloudflare, désactivez les éventuelles règles de type « HSTS » ou « Origin Shield » qui forcent l'en-tête X-Frame-Options: SAMEORIGIN.
??
Support : Si, après avoir appliqué ces modifications, le test échoue toujours, contactez le support technique de votre hébergeur en fournissant la capture d'écran du test effectué sur IFrameTester.com.
??
Social Embed : Certaines plateformes sociales permettent d'intégrer (embed) leurs contenus directement dans votre application. La disponibilité de cette fonctionnalité dépend de la plateforme sociale : toutes ne prennent pas en charge l'embed. Si le réseau social l'autorise, le contenu sera affiché nativement au sein de l'application sans configuration supplémentaire.

Domaine personnalisé (White-Label)

Si votre plan inclut l'option Custom Domain, vous pouvez relier votre domaine ou sous-domaine (ex. app.votrenom.fr) à la plateforme. Vos utilisateurs accéderont à votre application depuis votre adresse web.

Comment fonctionne le pointage DNS
?? app.votrenom.fr
?
?? Enregistrement CNAME
pointe vers
?
connect.travelinfluencer.co
?? Certificat SSL
généré automatiquement
?
? Votre application est en ligne !
accessible depuis app.votrenom.fr
?
connect.travelinfluencer.co