Intégrer une Visite Virtuelle sur son Site Internet [2026]

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.

Performance et Core Web Vitals

Placez la visite sous le premier écran (below the fold) quand possible, utilisez le lazy loading, et évitez plusieurs iframes sur la même page. Une seule visite bien placée convertit mieux qu’une page alourdie par trois lecteurs 360°.

Intégrer une visite virtuelle sur WordPress (détail)

Sur WordPress, le bloc « HTML personnalisé » est la méthode la plus fiable. Collez le code iframe Travvir, publiez, puis testez en mobile. Si votre thème ou un plugin de sécurité bloque les iframes, autorisez le domaine Travvir ou utilisez le lien partageable en bouton CTA. Guide dédié : ajouter une visite virtuelle sur WordPress.

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.