Intégrer une visite virtuelle sur son site : le guide

Voici comment intégrer une visite virtuelle sur son site : copier le code de la visite, le coller dans un bloc HTML de la page du bien, ajuster la taille et tester sur mobile avant de publier. La méthode est la même pour une simple photo 360, comme le séjour ou la terrasse d'un T3 à Bordeaux.

Ce guide vous donne les étapes pour WordPress, Wix et Squarespace, un code expliqué ligne par ligne que vous pouvez copier, et une liste de vérifications à faire sur votre téléphone.

Ce qu'il vous faut avant de commencer

Quatre choses, que vous ayez fait la visite vous-même ou qu'un photographe vous l'ait livrée :

Le code d'intégration, pas seulement le lien. Le code commence par <iframe. Un lien ouvre la visite sur sa propre page ; le code l'affiche à l'intérieur de la vôtre, entre les photos et la description.
Une visite publique. Une visite privée affiche « Cette visite est privée » dans le cadre, et vos visiteurs ne voient rien d'autre.
Le droit de modifier la page. Sur WordPress, il faut un compte autorisé à ajouter du code (voir plus bas). Sinon, envoyez le code par e-mail à la personne qui gère le site de l'agence.
Pour une seule photo 360, faites-en une visite d'une seule pièce. Vous pouvez d'abord la regarder dans notre visionneuse 360 gratuite pour vérifier qu'elle est bien droite et nette.

Si vous débutez avec les visites, notre guide sur la visite virtuelle immobilière explique ce qu'elle apporte à une annonce.

Étape 1 : copier le code d'intégration

La plupart des outils de visite rangent le code sous un bouton Partager, Intégrer ou Publier. Cherchez une zone de texte qui commence par <iframe et un bouton pour la copier. Copiez tout, de <iframe jusqu'à </iframe> : un caractère oublié et le cadre reste vide.

Dans Vistura, le code se trouve dans Partager > « Intégrer à un site web » > « Copier le code », sur toutes les offres, avec l'indication « Collez ce code dans la page du bien sur votre site. » Le code occupe déjà toute la largeur de la page et porte le nom de la visite comme titre, ce qui le rend lisible par les lecteurs d'écran.

Panneau « Intégrer à un site web » de Vistura avec le code iframe dans un cadre et le bouton « Copier le code » en surbrillance

Étape 2 : coller le code dans votre site

Chaque outil de création de site a son bloc pour le code, et chacun a son piège.

Outil	Où va le code	Le piège
WordPress (installé chez vous)	Bloc Custom HTML	Un compte sans le droit `unfiltered_html` voit l'iframe supprimée
WordPress.com	Bloc Custom HTML	Iframe seulement avec une offre qui accepte les extensions
Wix	Élément « Code d'intégration »	Seul un code en HTTPS s'affiche
Squarespace	Bloc Code	Iframe seulement sur les offres Core, Plus ou Advanced
Site fourni par votre logiciel	Un bloc HTML, Code ou Widget	À demander au fournisseur

WordPress (votre propre installation)

Ouvrez la page du bien et placez-vous à l'endroit voulu.
Ajoutez le bloc Custom HTML depuis l'outil d'ajout de blocs, ou tapez /html dans un nouveau paragraphe.
Cliquez sur Edit HTML, collez le code, puis enregistrez la page (Update dans la documentation).

Le piège est dans les droits. La documentation de WordPress (en anglais) précise que si un utilisateur n'a pas la capacité unfiltered_html, par exemple un Contributeur (Contributor), WordPress nettoie le bloc et supprime des balises comme <iframe> à l'enregistrement. Le code disparaît sans message. Demandez à un Administrateur de coller le code, ou de vous donner ce droit.

WordPress.com

Sur WordPress.com, les iframes ne sont autorisées que sur un site doté d'une offre qui accepte les extensions, avec les fonctions d'hébergement activées. Les sites gratuits ont des limites sur le code qu'on peut ajouter, et avant l'activation, ces mêmes limites s'appliquent. Vérifiez votre offre avant de chercher une erreur dans le code.

Wix

Dans l'éditeur, ouvrez « Ajouter des éléments » > « Code d'intégration » > « Intégrations populaires » et choisissez l'intégration HTML.
Cliquez sur l'élément, saisissez le code et appliquez.
Agrandissez l'élément dans l'éditeur jusqu'à la taille voulue.

Wix prévient : « Votre code doit contenir HTTPS et non HTTP. » L'élément de Wix est lui-même un cadre, donc la visite ne s'adapte pas toute seule à l'écran : mettez la largeur et la hauteur à 100 % dans le code, puis réglez la taille de l'élément. Vérifiez aussi la vue mobile dans l'éditeur Wix.

Squarespace

La page d'aide de Squarespace n'existe qu'en anglais ; les noms ci-dessous sont les siens.

Cliquez sur Add block, puis Code.
Collez le code dans le bloc. Laissez Display Source désactivé : cette option affiche le code comme du texte.
Enregistrez et regardez le résultat en Safe Mode.

Pour ajouter une iframe dans un bloc Code, le site doit être sur l'offre Core, Plus ou Advanced. Le code peut aussi ne pas apparaître tant que vous êtes connecté : Squarespace conseille l'aperçu en Safe Mode. Il prévient enfin que du code personnalisé peut casser l'apparence du site, surtout sur mobile.

Un site fourni par votre logiciel d'agence

Beaucoup d'agences publient leur site depuis leur logiciel de transaction. Sur la fiche du bien, cherchez un champ ou un bloc nommé HTML, Code, Intégration ou Widget. S'il n'y en a pas, demandez au fournisseur où placer une iframe : certains ont un champ prévu pour la visite, d'autres ajoutent le code pour vous.

Étape 3 : adapter le cadre à tous les écrans

Un code d'intégration n'est qu'une ligne d'instructions. Voici ce que dit chaque partie, d'après la référence de MDN sur l'iframe :

Attribut	Ce qu'il fait	À changer ?
`src`	L'adresse de la visite	Jamais
`title`	Ce que les lecteurs d'écran annoncent	Oui, si le titre est vague
`width="100%"`	Le cadre occupe toute la largeur disponible	Rarement
`height`	La hauteur du cadre	C'est le chiffre à régler
`allow` / `allowfullscreen`	Les autorisations accordées au contenu du cadre ; `allowfullscreen` est un ancien attribut remplacé par `allow="fullscreen"`	Non
`frameborder`	La bordure ; attribut obsolète, remplacé par `border:0` en CSS	Vous pouvez le remplacer

Trois téléphones affichant une page avec une visite intégrée : un cadre si haut qu'il remplit l'écran, un cadre si plat qu'il ne montre qu'une bande, et un cadre au format 16:9 avec le texte en dessous — Une hauteur fixe sur téléphone : trop haute ou trop plate. Un cadre avec un ratio garde sa forme.

Charger la visite seulement quand on s'en approche

Si la visite se trouve sous les photos, ajoutez loading="lazy". Le navigateur attend que le lecteur arrive près du cadre pour le charger. Selon web.dev, ce chargement différé est bien pris en charge par les principaux navigateurs, économise des données, accélère le reste de la page et réduit la mémoire utilisée.

Garder une forme stable sur tous les écrans

Une hauteur fixe de 500 pixels donne une bande étroite sur ordinateur et un mur sur téléphone. La propriété CSS aspect-ratio garde un rapport largeur et hauteur quelle que soit la taille de l'écran, et elle fonctionne dans les navigateurs courants depuis septembre 2021. Voici un exemple à adapter, avec l'adresse de votre visite :

<iframe src="https://ADRESSE-DE-VOTRE-VISITE" title="T3 à Bordeaux, visite 360"
  width="100%" loading="lazy" allow="fullscreen"
  style="border:0; aspect-ratio:4/3; max-height:80vh"></iframe>

Trois réglages font le travail :

aspect-ratio:4/3 donne un cadre assez haut sur téléphone. Un format 16/9 très large laisse une fine bande où la pièce se voit mal.
max-height:80vh garde le cadre plus petit que l'écran du téléphone, pour qu'il reste toujours un bout de page autour pour faire défiler.
border:0 remplace l'ancien frameborder.

La page de MDN ne parle pas des iframes : testez le résultat sur un vrai téléphone avant de publier.

Où placer la visite sur la page du bien

En haut, après la galerie de photos, avant la longue description. C'est là que l'acheteur décide s'il continue.
Gardez le texte sur la page elle-même. Prix, surface en m², pièces, DPE et description restent écrits sur votre page : la visite dans le cadre vit à une autre adresse.
Sous le cadre, un lien simple « Ouvrir la visite 360 en plein écran » vers l'adresse de la visite. Sur téléphone, ce lien permet de la voir sur toute la surface de l'écran.
Une visite par page. Plusieurs cadres lourds sur la même page la ralentissent.

Page d'annonce dessinée avec des barres : photos en haut, visite encadrée de bleu en dessous, un lien sous le cadre, le texte ensuite et un second cadre barré — Les numéros suivent la liste ci-dessus.

Étape 4 : tester sur votre téléphone avant de publier

Ouvrez la page sur votre propre téléphone et faites ces six tests :

Faites défiler la page d'un pouce. Si chaque glissement fait tourner la pièce au lieu de descendre, réduisez la hauteur du cadre.
Faites glisser votre doigt dans le cadre. La pièce doit tourner.
Touchez le lien sous le cadre. La visite doit s'ouvrir sur sa propre page.
Regardez la page déconnecté, ou dans une fenêtre de navigation privée. Squarespace masque parfois le code aux personnes connectées.
Chargez la page en 4G ou 5G, pas seulement sur le Wi-Fi de l'agence.
Si le cadre est vide, vérifiez dans cet ordre : HTTPS (Wix), l'offre (WordPress.com, Squarespace), les droits du compte (WordPress), puis la visite elle-même, qui est peut-être privée.

Site, portails et e-mail : trois usages différents

Votre site prend le code d'intégration.
Les portails comme SeLoger ou leboncoin ont chacun leurs règles pour les visites virtuelles. Collez le lien dans le champ prévu pour la visite virtuelle, là où le portail en propose un, et suivez ses instructions. Dans Vistura, « Lien pour les portails » donne un lien par portail, avec l'option « Sans mes coordonnées ni mon logo », et les visites de chaque portail apparaissent à part (la vue Par portail est réservée à Pro).
Les e-mails et messages : envoyez une image de la visite avec un lien vers elle, pas le code.

Pour la vitrine et le panneau, le même lien devient un QR code : voyez notre guide du QR code immobilier.

Savoir si la visite sert sur votre site

Une visite intégrée avec Vistura garde dans le cadre la carte agent, WhatsApp et le formulaire, et chaque contact arrive complet, sur toutes les offres. Les visites venues de votre site sont comptées comme une source à part, « Votre site web (intégration) ». Le détail par source s'affiche avec Pro, et il est conservé depuis le premier jour : vous voyez tout l'historique dès que vous passez à Pro. Avec Pro, la visite porte aussi votre logo et vos couleurs, sans badge « Créé avec Vistura », et « Activer la rotation automatique dans les nouvelles visites » fait tourner la photo d'elle-même quand le visiteur ne bouge plus, idéal pour une page laissée ouverte sur l'écran de la vitrine. Pro coûte 24 dollars US par mois, ou 19 dollars US en annuel, au prix fondateur pour les abonnements souscrits jusqu'au 31 décembre 2026. Vous pouvez l'essayer en Gratuit avec 3 visites en ligne à la fois, avec la marque Vistura. Comparez les offres sur la page tarifs.

Si la visite ne s'affiche pas

Ce que vous voyez	Ce qu'il faut faire
Le code s'affiche comme du texte	Vous l'avez collé dans un bloc de texte : utilisez un bloc HTML ou Code
Un espace vide	Vérifiez HTTPS, l'offre de votre site et les droits de votre compte
« Cette visite est privée »	Rendez la visite publique ; inutile de recopier le code
Le cadre est trop haut ou trop bas	Changez `height` ou le rapport `aspect-ratio`
Vos visiteurs la voient, pas vous	Sur Squarespace, regardez la page en Safe Mode

Questions fréquentes

Peut-on intégrer une visite virtuelle sur un site Wix gratuit ?

L'aide de Wix sur l'intégration HTML ne cite aucune offre, seulement un code en HTTPS. Les limites viennent surtout d'ailleurs : WordPress.com exige une offre avec extensions, Squarespace l'offre Core, Plus ou Advanced.

La visite ralentit-elle la page du bien ?

Beaucoup moins si vous ajoutez loading="lazy" au code : le navigateur ne charge la visite que lorsque le lecteur s'en approche, et le reste de la page s'affiche plus vite.

Peut-on coller le code sur SeLoger ou leboncoin ?

Chaque portail a ses propres règles pour les visites virtuelles. Consultez ses instructions pour savoir s'il prévoit un champ pour la visite et quelles visites il affiche.

Faut-il un nouveau code quand on modifie la visite ?

Non, tant que le code pointe vers la visite elle-même et non vers une copie. Avec Vistura, vos modifications apparaissent sur votre site sans toucher au code.