Comment intégrer une visite virtuelle sur un site internet ?
Vous disposez d’une visite virtuelle 360° et souhaitez l’afficher directement sur votre site ? Dans de nombreux cas, l’intégration se fait à l’aide d’un code iframe fourni par la solution qui héberge la visite.
Cette page explique comment intégrer une visite virtuelle de manière propre et responsive, où la placer, comment l’adapter aux smartphones et quelles précautions prendre pour conserver une page agréable à utiliser.
Comment fonctionne l’intégration d’une visite virtuelle sur un site web ?
Dans la plupart des configurations, la visite virtuelle n’est pas réellement stockée dans la page de votre site. Elle est hébergée sur une plateforme dédiée, puis affichée à l’intérieur de votre page.
Le fonctionnement ressemble à l’intégration d’une vidéo ou d’une carte interactive : un morceau de code indique au navigateur qu’il doit charger un contenu provenant d’une autre adresse.
Cela permet de conserver la navigation interactive, les panoramas 360°, les liens entre les différentes vues et les fonctionnalités proposées par la plateforme.
Pour l’entreprise, l’intérêt est simple : le visiteur peut découvrir le lieu directement depuis le site sans devoir télécharger un fichier lourd ou comprendre comment ouvrir un format particulier.
Si vous êtes encore au stade de la réalisation, commencez par notre guide consacré à la création d’une visite virtuelle 360°.
Le parcours le plus courant
La visite est hébergée → un code d’intégration est généré → ce code est inséré dans votre page → la visite devient interactive directement sur votre site.
Qu’est-ce qu’un iframe ?
Un iframe est un élément HTML qui permet d’afficher dans une page web un contenu provenant d’une autre adresse internet.
Votre site reste la page principale
Le texte, les titres, les boutons et le reste du contenu appartiennent toujours à votre propre site.
La visite est chargée à l’intérieur
L’iframe crée une fenêtre dans laquelle la visite virtuelle interactive peut être affichée.
Le visiteur reste dans votre page
Il peut explorer le lieu puis poursuivre sa navigation vers un formulaire, une réservation ou une autre page de votre site.
Exemple de code pour intégrer une visite virtuelle
Voici un exemple de structure similaire à celle utilisée pour afficher une visite Monsieur360. L’adresse présente dans src correspond à la visite qui doit être chargée.
L’attribut width= »100% » permet à l’iframe d’utiliser toute la largeur disponible dans son conteneur.
La hauteur peut être adaptée selon votre design, mais une hauteur fixe n’est pas toujours idéale sur tous les écrans. Pour obtenir un comportement réellement responsive, il est préférable d’utiliser un conteneur adapté.
Comment rendre une visite virtuelle responsive ?
Une intégration responsive adapte automatiquement sa largeur et sa hauteur à l’espace disponible.
Cette approche est particulièrement importante sur mobile. Une iframe définie uniquement avec une largeur et une hauteur rigides peut dépasser de l’écran ou devenir trop petite selon le téléphone utilisé.
Une solution simple consiste à placer l’iframe dans un conteneur utilisant un ratio d’affichage.
Le navigateur conserve alors automatiquement les bonnes proportions lorsque la largeur de la page change.
Les objectifs
- pas de débordement horizontal ;
- une visite suffisamment grande ;
- des proportions cohérentes ;
- une utilisation confortable au doigt ;
- aucun code différent à créer pour chaque écran.
Comment intégrer une visite virtuelle dans WordPress ?
WordPress permet généralement d’ajouter le code d’intégration sans modifier les fichiers du thème.
Ouvrez la page
Modifiez la page ou l’article sur lequel vous souhaitez faire apparaître la visite.
Ajoutez un bloc HTML
Dans l’éditeur WordPress, ajoutez un bloc destiné au code HTML personnalisé.
Collez l’intégration
Insérez le code iframe fourni par votre plateforme de visite virtuelle.
Testez la page
Vérifiez le fonctionnement sur ordinateur et smartphone avant de considérer l’intégration terminée.
Comment intégrer une visite virtuelle avec Elementor ?
Avec Elementor, le principe reste similaire. Il n’est généralement pas nécessaire d’installer une extension uniquement pour afficher une iframe.
Ajoutez un widget HTML dans la section où la visite doit apparaître, puis collez le code fourni.
Vous pouvez ensuite utiliser les réglages de largeur de la section ou du conteneur Elementor pour définir l’espace disponible autour de la visite.
Si vous utilisez le code responsive présenté plus haut, l’iframe occupera automatiquement toute la largeur disponible dans ce conteneur.
Structure simple avec Elementor
Section ou conteneur → titre → texte d’introduction → widget HTML contenant la visite → bouton de contact ou réservation.
Cette structure est généralement plus utile qu’une visite déposée seule au milieu d’une page.
Où placer une visite virtuelle sur une page web ?
La bonne position dépend du rôle de la visite. Elle doit arriver au moment où l’internaute a suffisamment compris le lieu pour avoir envie de l’explorer.
Après une introduction
Un titre et quelques lignes permettent d’expliquer ce que l’utilisateur va découvrir avant de lancer l’expérience.
Près des photos
Une galerie et la visite virtuelle remplissent des rôles complémentaires et peuvent être regroupées dans la même partie de page.
Avant l’action commerciale
Après la découverte, placez un bouton vers le devis, la réservation, le contact ou la prise de rendez-vous.
Quelle taille donner à une visite virtuelle sur un site internet ?
Une visite virtuelle a besoin d’espace. Si l’iframe est trop petite, l’utilisateur doit manipuler un environnement complexe dans une fenêtre minuscule.
Sur une page classique, une largeur proche de la largeur principale du contenu est souvent adaptée.
Pour la hauteur, un ratio permet d’obtenir une présentation plus régulière qu’une valeur arbitraire.
Le ratio 4/3 offre une fenêtre relativement généreuse. Un ratio plus panoramique peut fonctionner si la page est très large, mais il faut tester l’expérience réelle sur téléphone.
À éviter
- une iframe très basse ;
- une largeur dépassant du smartphone ;
- une visite coincée dans une petite colonne ;
- des marges qui réduisent excessivement la zone interactive ;
- une hauteur parfaite sur ordinateur mais inutilisable sur mobile.
Comment vérifier qu’une visite virtuelle fonctionne correctement sur mobile ?
Une intégration n’est réellement terminée qu’après un test sur écran tactile.
Orientation
Testez la visite en mode portrait et, si pertinent, en paysage.
Navigation tactile
Vérifiez que l’utilisateur peut se déplacer et regarder autour de lui sans difficulté.
Lisibilité
Les boutons ou éléments de navigation intégrés à la visite doivent rester suffisamment grands.
Défilement de la page
Assurez-vous que l’iframe n’empêche pas l’utilisateur de reprendre facilement la navigation sur le reste de la page.
Une visite virtuelle peut-elle ralentir une page ?
Une visite interactive nécessite le chargement de ressources supplémentaires. Comme pour une vidéo, une carte ou un autre contenu embarqué, son impact dépend de la plateforme utilisée et de la manière dont elle est chargée.
Il est donc préférable de ne pas multiplier plusieurs visites lourdes dans une même page sans nécessité.
Si votre activité comporte plusieurs lieux, vous pouvez présenter une miniature ou un bouton par établissement puis envoyer vers une page dédiée à chaque visite.
Cela permet aussi de mieux organiser le contenu et d’éviter une page interminable contenant de nombreux environnements interactifs.
Une page, une intention claire
Si vous présentez un hôtel, une maison ou un restaurant, une visite principale bien placée est généralement plus utile que plusieurs intégrations qui chargent simultanément.
Pourquoi utiliser loading= »lazy » sur une iframe ?
L’attribut loading= »lazy » indique au navigateur qu’un iframe situé plus bas dans la page peut être chargé plus tard, lorsqu’il devient pertinent pour l’affichage.
Cette option est particulièrement cohérente lorsque la visite se situe après plusieurs paragraphes ou sections.
En revanche, si la visite constitue immédiatement le contenu principal visible en haut de la page, le comportement recherché peut être différent. L’intégration doit donc être adaptée à la structure réelle de la page.
Pourquoi une visite virtuelle refuse-t-elle parfois de s’afficher dans un iframe ?
Tous les contenus web ne peuvent pas être intégrés librement dans un autre site.
La plateforme qui héberge la visite peut imposer des restrictions techniques ou fournir une adresse particulière destinée à l’intégration.
Si vous copiez simplement l’adresse visible dans votre navigateur, elle ne correspond pas nécessairement à l’adresse prévue pour être affichée dans un iframe.
Il est donc préférable d’utiliser le bouton « partager », « embed », « intégrer » ou l’équivalent proposé par le service utilisé.
Si la visite ne s’affiche pas
- vérifiez le code fourni par la plateforme ;
- contrôlez l’adresse présente dans src ;
- testez le lien dans un autre navigateur ;
- vérifiez que l’intégration externe est autorisée ;
- évitez de transformer manuellement l’URL sans savoir si elle est prévue pour l’embed.
Que placer autour de la visite virtuelle pour transformer l’intérêt en action ?
Une visite immersive peut retenir l’attention plusieurs minutes. Une fois l’exploration terminée, l’étape suivante doit être évidente.
Demander un devis
Pertinent pour un commerce, une salle de réception ou une prestation professionnelle.
Réserver
Pour un hébergement ou un restaurant, un bouton de réservation peut suivre directement l’expérience.
Prendre rendez-vous
Un showroom ou une agence peut utiliser la visite comme première étape avant une rencontre physique.
La visite est un moyen, pas une fin
Le visiteur doit savoir quoi faire ensuite : réserver, demander un tarif, appeler, prendre rendez-vous ou découvrir une offre plus précise.
Exemples d’utilisation selon votre secteur
Immobilier
La visite peut être placée sur la fiche d’un bien après les principales informations et photographies.
Hôtel ou gîte
L’expérience peut être intégrée avant le bouton de réservation ou sur une page dédiée aux chambres et espaces communs.
Chambre d’hôtes
Elle peut montrer la chambre, les espaces partagés et le jardin avant que le voyageur consulte les disponibilités.
Location saisonnière
Le visiteur peut explorer le logement puis revenir directement vers la réservation ou la demande de disponibilité.
Restaurant
Salle, terrasse ou espace privatisable peuvent être montrés avant un bouton de réservation de table.
Camping
Un accès peut orienter le vacancier vers les hébergements, la piscine ou les principales zones de loisirs.
Commerce et showroom
La visite peut précéder un bouton vers le catalogue, la prise de rendez-vous ou le formulaire de devis.
Salle de réception
Le client peut explorer le lieu puis demander les disponibilités ou organiser une visite physique.
Agence immobilière
L’intégration peut être utilisée sur les annonces sélectionnées pour compléter photos, description et informations du bien.
Les erreurs fréquentes lors de l’intégration d’une visite virtuelle
Utiliser une iframe trop petite
Une visite difficile à manipuler perd une grande partie de son intérêt. Donnez-lui suffisamment de largeur et de hauteur.
Oublier le mobile
Une intégration parfaite sur un grand écran peut déborder ou devenir peu pratique sur smartphone.
Mettre plusieurs visites sur la même page
Cela peut rendre la page lourde et difficile à comprendre si chaque intégration n’a pas une fonction précise.
Ne mettre aucun texte autour
Expliquez ce que le visiteur peut découvrir et donnez-lui un point de sortie clair après l’expérience.
Utiliser une URL non prévue pour l’intégration
L’adresse publique d’une visite n’est pas forcément identique à l’adresse à utiliser dans un iframe.
Oublier le bouton d’action
Après avoir exploré votre lieu, le visiteur doit pouvoir réserver, demander un devis ou vous contacter facilement.
Voici à quoi ressemble une visite virtuelle intégrée dans une page web
L’exemple ci-dessous est affiché directement à l’intérieur de cette mise en page grâce à une iframe responsive.
Sur ordinateur, utilisez votre souris. Sur smartphone ou tablette, utilisez votre doigt pour regarder autour de vous et naviguer dans l’expérience.
Pourquoi accompagner la visite d’un vrai contenu ?
Une iframe seule ne répond pas forcément aux questions du visiteur. La page doit également présenter le lieu, expliquer ce qu’il peut découvrir et lui donner les informations nécessaires pour poursuivre son projet.
Pour un bien immobilier, cela peut être la surface, le nombre de pièces et la localisation. Pour un hôtel, les services et les informations de réservation. Pour un showroom, les gammes proposées et les horaires.
L’intérêt est de réunir dans la même page les informations rationnelles et l’expérience immersive.
Vous pouvez également créer une page dédiée à la visite puis relier celle-ci depuis vos contenus principaux.
La bonne logique
Informer → montrer → rassurer → proposer une action.
L’intégration technique est importante, mais la structure complète de la page l’est tout autant pour l’utilisateur.
Vous n’avez pas encore de visite virtuelle ?
L’intégration sur le site intervient seulement après la création et l’hébergement de la visite.
1. Préparer le lieu
Les espaces à présenter sont sélectionnés et préparés avant la captation.
2. Créer la visite
Les panoramas sont réalisés puis reliés pour construire une navigation cohérente.
3. Intégrer sur le site
Une fois la visite disponible, le code peut être placé dans votre page internet.
Pour revenir au sujet général, consultez notre guide sur la visite virtuelle 360°. Vous pouvez également découvrir le prix d’une visite virtuelle ou le détail de sa création.
Approfondissez votre projet
FAQ : intégrer une visite virtuelle sur un site internet
Comment intégrer une visite virtuelle sur un site internet ?
La méthode la plus courante consiste à utiliser le code iframe fourni par la plateforme qui héberge la visite, puis à le placer dans un bloc HTML de la page.
Peut-on intégrer une visite virtuelle dans WordPress ?
Oui. Le code iframe peut généralement être inséré dans un bloc HTML personnalisé de l’éditeur WordPress.
Peut-on intégrer une visite virtuelle avec Elementor ?
Oui. Un widget HTML peut être utilisé pour accueillir le code d’intégration fourni par la plateforme.
Comment rendre une visite virtuelle responsive ?
Il est possible de placer l’iframe dans un conteneur occupant 100 % de la largeur et utilisant un ratio d’affichage afin que la hauteur s’adapte automatiquement.
Quelle largeur utiliser ?
Une largeur de 100 % du conteneur est généralement pratique afin que la visite s’adapte à la taille disponible sur la page.
Faut-il tester la visite sur mobile ?
Oui. Il est important de vérifier la navigation tactile, la hauteur de l’iframe, la lisibilité et l’absence de débordement horizontal.
Que signifie loading= »lazy » ?
Cet attribut permet au navigateur de différer le chargement d’un iframe situé plus bas dans une page jusqu’à ce qu’il devienne pertinent pour l’affichage.
Pourquoi mon iframe ne s’affiche-t-il pas ?
La plateforme peut imposer des restrictions ou nécessiter une URL spécialement prévue pour l’intégration. Utilisez de préférence le code embed fourni directement par le service.
Où placer la visite sur la page ?
Elle peut être positionnée après une introduction ou une galerie, puis suivie d’un bouton de réservation, de contact, de prise de rendez-vous ou de demande de devis.
Peut-on intégrer plusieurs visites dans une même page ?
Oui techniquement dans de nombreux cas, mais il est préférable de vérifier que chaque intégration est réellement utile et que la page reste rapide et facile à parcourir.
Monsieur360 peut-il créer la visite à intégrer ?
Oui. Retrouvez le processus sur notre page consacrée à la création d’une visite virtuelle ou présentez directement votre projet depuis la page Contact.
Vous souhaitez créer puis intégrer une visite virtuelle 360° sur votre site ?
Monsieur360 peut réaliser une visite adaptée à votre activité et vous permettre de la présenter directement à vos visiteurs : immobilier, hébergement, restaurant, camping, commerce, showroom ou salle de réception.