RoomTour

Comment intégrer une visite virtuelle sur votre site web (code inclus)

· 2 min de lecture

Une visite virtuelle vend davantage sur votre propre site que sous forme de lien sur lequel les gens ne cliqueront peut-être jamais. L'intégrer permet aux visiteurs de regarder le bien sans quitter votre page. Il suffit d'un copier et d'un coller, à condition d'utiliser le bon code.

Le code d'intégration

Toute visite intégrable vous donne une <iframe>. Voici la version que nous recommandons, déjà responsive (elle occupe toute la largeur et garde un format 16:9) :

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://roomtourapp.com/embed/votre-visite"
    title="Visite virtuelle 360°"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; xr-spatial-tracking"
    allowfullscreen loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

Le rôle de chaque partie :

  • aspect-ratio:16/9 sur le bloc garde les proportions de la visite sur tous les écrans. Sans lui, beaucoup de thèmes écrasent l'iframe à 150 pixels de haut.
  • allow="…gyroscope; accelerometer…" permet aux visiteurs de regarder autour d'eux en bougeant leur téléphone. Sans lui, le navigateur bloque les capteurs dans l'iframe.
  • allowfullscreen fait fonctionner le bouton plein écran.
  • loading="lazy" signifie que la visite ne se charge que lorsque le visiteur fait défiler la page jusqu'à elle, pour que votre page reste rapide.
  • title est lu par les lecteurs d'écran. Décrivez le bien.

Avec RoomTour, vous n'avez pas à l'écrire : la page de la visite dans le tableau de bord web a le code prêt à copier, avec l'adresse de votre visite.

Où le coller

  • WordPress (éditeur de blocs) : ajoutez un bloc HTML personnalisé (Custom HTML) et collez le code. Dans l'éditeur classique, passez d'abord à l'onglet Texte.
  • Wix : Add → Embed code → Embed HTML, collez le code et étirez le bloc sur toute la largeur de la section.
  • Squarespace : ajoutez un bloc Code et collez le code.
  • Webflow : faites glisser un élément Embed sur la page et collez le code.
  • HTML simple : collez-le là où la visite doit apparaître.

Les portails immobiliers

Les portails ne permettent pas de coller un code d'intégration : ils ont un champ pour le lien de la visite virtuelle. Utilisez-y le lien court de la visite, pas le code d'intégration. Notre guide pas à pas explique comment faire une visite virtuelle avec son téléphone, de la capture à la publication.

Problèmes fréquents

  1. La visite s'affiche comme une fine bande. Le thème ignore la hauteur de l'iframe. Utilisez le conteneur avec aspect-ratio ci-dessus.
  2. Regarder autour de soi en bougeant le téléphone ne fonctionne pas. L'attribut allow manque ou votre outil de création de site le supprime. Collez le code complet.
  3. La page est lente. Vérifiez que loading="lazy" est toujours là et qu'il n'y a qu'une visite par page.
  4. Deux logos. Si votre site porte déjà votre marque, utilisez le mode intégré de la visite, qui masque le logo du prestataire. Les adresses /embed/ de RoomTour le font.

Questions fréquentes

Comment intégrer une visite virtuelle sur mon site web ?

Copiez le code d'intégration de la visite (une iframe) chez votre prestataire et collez-le dans un bloc HTML ou d'intégration de la page. Utilisez un conteneur responsive pour qu'elle garde ses proportions sur téléphone.

À quoi ressemble le code d'intégration d'une visite virtuelle ?

C'est une iframe qui pointe vers la visite, avec les autorisations pour le plein écran et les capteurs de mouvement du téléphone, pour que les visiteurs puissent regarder autour d'eux en bougeant leur téléphone. La version responsive l'enveloppe dans un bloc aux proportions fixes.

Une visite intégrée ralentit-elle mon site ?

Pas si elle se charge en différé : avec loading=« lazy », la visite ne commence à se charger que lorsque le visiteur fait défiler la page jusqu'à elle. Évitez de mettre plusieurs visites sur la même page.

Peut-on intégrer une visite virtuelle sur un portail immobilier ?

Les portails n'acceptent généralement pas de code d'intégration. Ils ont à la place un champ pour le lien d'une visite virtuelle : collez-y le lien de la visite.

Plus d'articles