Comment Intégrer une Visite Virtuelle 360° sur son Site Web 2026 | Travvir

Comment fonctionne l'intégration d'une visite virtuelle

La méthode iFrame

La méthode standard consiste à utiliser une balise HTML iFrame. L'iFrame charge le contenu de la visite (hébergé sur Travvir) à l'intérieur d'une fenêtre sur votre page. Voici la structure de base :

<iframe
  src="https://app.travvir.com/tour/VOTRE-ID-VISITE"
  width="100%"
  height="500"
  frameborder="0"
  allowfullscreen
  allow="xr-spatial-tracking; gyroscope; accelerometer"
></iframe>

L'attribut allowfullscreen active le mode plein écran. L'attribut allow accorde les permissions nécessaires pour le gyroscope sur mobile — indispensable pour une bonne expérience mobile.

Récupérer le code d'intégration depuis Travvir

Dans votre tableau de bord Travvir : sélectionnez votre visite → cliquez sur Partager → sélectionnez Intégrer → copiez le code iFrame fourni. Le code Travvir inclut déjà les permissions correctes et les ratios d'affichage préconfigurés.

Intégration par plateforme

WordPress

Dans l'éditeur Gutenberg : ajoutez un bloc "HTML personnalisé" à l'endroit voulu, collez le code iFrame, puis publiez. N'utilisez pas le mode "HTML" d'un bloc paragraphe — il supprime les balises iFrame. Vous devez utiliser le bloc HTML dédié.

Squarespace

Ajoutez un bloc Embed à votre page, basculez sur l'option "Code d'intégration" (pas l'intégration par URL), et collez le code iFrame. Squarespace conserve les iFrames et les affiche correctement.

Wix

Dans l'éditeur Wix : Ajouter → Intégrer → HTML iFrame → collez votre code. Redimensionnez le composant sur le canevas pour ajuster les dimensions.

Webflow

Ajoutez un élément Embed dans votre canevas Webflow, collez le code iFrame dans le champ HTML. Webflow restitue les iFrames nativement avec interactivité complète, y compris le gyroscope sur mobile.

Optimiser l'intégration pour les performances

Chargement différé (lazy loading)

Ajoutez loading="lazy" à votre balise iFrame pour que la visite ne se charge qu'au moment où l'utilisateur fait défiler jusqu'à elle. Cela améliore sensiblement le temps de chargement initial de la page.

Hauteur minimale recommandée

Définissez une hauteur d'au moins 500 px pour un confort de navigation sur desktop. Sur mobile, utilisez un ratio responsive via CSS (ex. : padding-bottom: 56.25%) pour que la visite s'adapte automatiquement à l'écran.

Questions fréquentes

L'intégration ralentit-elle mon site ?

Non si vous utilisez le lazy loading. La visite virtuelle ne se charge que lorsque le visiteur fait défiler jusqu'à elle, ce qui préserve la vitesse de chargement initial.

Puis-je intégrer plusieurs visites sur une même page ?

Techniquement oui, mais déconseillé. Privilégiez une visite par page, ou des onglets pour charger une seule visite à la fois.