Comment intégrer une visite virtuelle sur son site internet

Il existe principalement deux manières d’intégrer sa visite virtuelle sur son site internet :

• via un lien URL direct
• via une intégration iframe

 

Récupérer l’adresse URL de sa visite virtuelle et la partager

Une visite virtuelle, qu’elle soit Google, Matterport ou autre… bénéficie d’une adresse web unique.

Celle-ci vous permet de regarder en plein écran uniquement la visite virtuelle sur une adresse dédiée.

Il vous suffit d’intégrer dans un bouton, un texte ou une image ce lien. Comme ce bouton par exemple :

Tout comme les vidéos YouTube, la visite virtuelle peut s’intégrer en “iframe”.

Il vous suffit d’intégrer simplement l’adresse URL vue ci-dessus dans son emplacement de code :

<iframe src="https://atlanticdigital.fr/visite-virtuelle/ecole/ecv/nantes" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>

Dans l’emplacement entre guillemets, ajoutez ou remplacez l’URL de votre visite virtuelle.

 

Modifier les dimensions de ma visite virtuelle

Vous pouvez modifier les dimensions dans lesquelles votre visite virtuelle va apparaître dans les emplacements “width” et “height” .

Width correspond à la largeur de l’écran, si vous indiquez “100%”, la visite prendra l’intégralité de la largeur. Elle sera donc “responsive design”. Vous pouvez donc utilisez des pourcentages ou un nombre de pixels définis. Nous vous recommandons de ne pas baisser en dessous de 600 pixels pour cette donnée, en dessous le contenu enrichi sera illisible ou bugué.

Height correspond à la hauteur de votre écran. Ici, nous vous conseillons d’osciller entre 600 et 800px, au delà l’image ne tiendra pas dans un écran et, sur smartphone et tablettes notamment, l’utilisateur ne pourra pas descendre plus bas dans l’écran (il restera bloqué sur la visite virtuelle en appuyant dessus). En dessous, elle manquera de visibilité.

 

 

Pour résumer, voici les différentes données permettant de personnaliser son iframe :

src : URL de votre visite virtuelle

width : Permet de définir une largeur en pixels

height : Permet de définir une hauteur en pixels

allowfullscreen : Autorise le plein écran