À ce stade, nous aborderons les trois questions les plus courantes et les plus importantes qui se posent après la publication d’une visite.
1. Comment intégrer rapidement une visite virtuelle sur n’importe quel site Web
La méthode la plus simple et la plus universelle est l’intégration d’iframe .
Il fonctionne avec presque tous les sites Web et ne nécessite aucune compétence en programmation.
Nous examinerons des exemples utilisant des plates-formes CMS populaires : WordPress, Tilda et Bitrix .
Exemple : WordPress (Gutenberg / Elementor)
- Copiez le code iframe de votre visite depuis la page de publication de Space Pano.
- Sur votre site internet, ajoutez un bloc HTML :
- dans Gutenberg – utilisez le bloc HTML personnalisé ;
- dans Elementor – utilisez le HTML .
- Collez entièrement le code copié dans le bloc HTML.
- Enregistrez la page.
Terminé : la visite guidée est intégrée et fonctionne.
La même approche s’applique à Tilda, Bitrix et à tout autre CMS prenant en charge l’insertion de code HTML.
2. Comment héberger une visite sur votre propre site Web sans abonnement
Cette option convient si vous souhaitez une visite entièrement autonome qui fonctionne sans abonnement actif .
⚠️ Important
Cette méthode ne convient pas à Tilda et aux créateurs de sites Web similaires qui ne donnent pas accès à un système de fichiers.
Étapes :
- Téléchargez l’archive ZIP de la visite sur votre appareil.⚠️ Remarque : la visite ne s’ouvrira pas localement sur votre ordinateur. Un environnement de serveur (localhost) est requis pour la visualisation locale. Si vous n’avez aucune expérience de travail avec des serveurs locaux, nous vous déconseillons de le configurer séparément, car cela dépasse la portée du créateur de visite.
- Téléchargez l’archive sur votre hébergement/serveur :
- via un gestionnaire de fichiers tel que ISPmanager ou cPanel ;
- ou en vous connectant via FTP .
- Ne téléchargez pas la visite dans le répertoire racine si votre hébergement dispose déjà d’un site Web actif. Sinon, la visite écrasera les fichiers système et interrompra le site. Approche recommandée :
- crée un dossier, par exemple :monsite.com/tour
- téléchargez l’archive dans ce dossier ;
- extrait l’archive.
Après cela, la visite sera disponible à l’adresse correspondante, par exemple : https://mysite.com/tour
3. Intégration d’une visite via iframe (option avancée)
Si vous hébergez la visite sur votre propre serveur ou si vous avez besoin d’une intégration personnalisée, vous pouvez utiliser un code iframe standard en remplaçant le lien par le vôtre.
Exemple d’iframe de base :
Paramètres :
- width= »100 % » : largeur du bloc ;
- height= »600″ : hauteur du bloc (peut être ajustée pour correspondre à la conception de votre site).
Intégration conviviale avec affiche et bouton de lecture Pour une meilleure expérience utilisateur, nous vous recommandons d’utiliser le code d’intégration étendu fourni par nos développeurs :
- la page défile normalement jusqu’au lancement de la visite guidée ;
- l’iframe ne capture pas les événements de défilement, de balayage ou de molette de la souris ;
- , la visite s’active uniquement après avoir cliqué sur le bouton Lire .
Ce code peut être utilisé :
- avec des visites organisées sur Space Tour ;
- ou avec des visites hébergées sur votre propre serveur .
/* Wrapper : définit la zone où la visite sera affichée */
.espace-pano {
position : relative ;
largeur : 100 % ;
hauteur : 600px ; /* Vous pouvez modifier la hauteur, par ex. 500px ou 80vh */
débordement : caché ;
}
/* Faire en sorte que l’iframe remplisse tout le wrapper */
.space-pano iframe {
largeur : 100 % ;
hauteur : 100 % ;
bordure : 0 ;
/* Point clé :
Tant que la visite n’est pas lancée, l’iframe ne capture PAS les clics/défilement
donc la page défile normalement */
événements de pointeur : aucun ;
}
/* Superposition (affiche + bouton Play) */
.space-pano__overlay {
position : absolue ;
encart : 0 ;
affichage : flexible ;
align-items : centre ;
justifier-contenu : centre ;
débordement : caché ;
transition : opacité facilité 0,25s, visibilité facilité 0,25s ;
}
/* Image de l’affiche */
.space-pano__overlay-img {
position : absolue ;
encart : 0 ;
largeur : 100 % ;
hauteur : 100 % ;
ajustement de l’objet : couverture ;
}
/* Bouton de lecture en haut de l’affiche */
.space-pano__play {
position : relative ;
indice z : 2 ;
fond : transparent ;
bordure : aucune ;
remplissage : 0 ;
curseur : pointeur ;
}
/* Masquer la superposition après le lancement */
.space-pano__overlay.is-hidden {
opacité : 0 ;
visibilité : cachée ;
événements de pointeur : aucun ;
}
- /* Wrapper : définit la zone où la visite sera affichée */ .espace-pano { position : relative ; largeur : 100 % ; hauteur : 600px ; /* Vous pouvez modifier la hauteur, par ex. 500px ou 80vh */ débordement : caché ; } /* Faire en sorte que l’iframe remplisse tout le wrapper */ .space-pano iframe { largeur : 100 % ; hauteur : 100 % ; bordure : 0 ; /* Point clé : Tant que la visite n’est pas lancée, l’iframe ne capture PAS les clics/défilement donc la page défile normalement */ événements de pointeur : aucun ; } /* Superposition (affiche + bouton Play) */ .space-pano__overlay { position : absolue ; encart : 0 ; affichage : flexible ; align-items : centre ; justifier-contenu : centre ; débordement : caché ; transition : opacité facilité 0,25s, visibilité facilité 0,25s ; } /* Image de l’affiche */ .space-pano__overlay-img { position : absolue ; encart : 0 ; largeur : 100 % ; hauteur : 100 % ; ajustement de l’objet : couverture ; } /* Bouton de lecture en haut de l’affiche */ .space-pano__play { position : relative ; indice z : 2 ; fond : transparent ; bordure : aucune ; remplissage : 0 ; curseur : pointeur ; } /* Masquer la superposition après le lancement */ .space-pano__overlay.is-hidden { opacité : 0 ; visibilité : cachée ; événements de pointeur : aucun ; }
- // Démarre la visite lorsque l’utilisateur clique sur le bouton Play : // 1) rendre l’iframe cliquable (activer les événements de pointeur) // 2) supprimer la superposition d’affiche document.addEventListener(‘clic’, fonction (événement) { const btn = event.target.closest(‘.space-pano__play’); si (!btn) revient ; const wrapper = btn.closest(‘.space-pano’); if (!wrapper) retourne; const iframe = wrapper.querySelector(‘iframe’); const overlay = wrapper.querySelector(‘.space-pano__overlay’); if (iframe) iframe.style.pointerEvents = ‘auto’;si (superposition) { overlay.classList.add(‘is-hidden’); setTimeout (fonction () { superposition.remove(); }, 300); } }); // Si l’affiche est manquante ou ne se charge pas, supprimez l’image afin qu’elle ne bloque pas l’interface utilisateur document.addEventListener(‘DOMContentLoaded’, fonction () { document.querySelectorAll(‘.space-pano__overlay-img’).forEach(function (img) { const src = img.getAttribute(‘src’); si (!src) { img.remove(); retour; } img.addEventListener(‘erreur’, fonction () { img.remove(); }); }); });
Résumé
A ce stade, vous savez désormais comment :
intègre une visite guidée sur n’importe quel site Web en quelques minutes seulement ;
organise une visite de manière indépendante sans abonnement ;
- utilise l’intégration d’iframe dans les formats de base et avancés.
- ✅ Le guide est complet.
- Vous comprenez désormais l’ensemble du flux de travail, du téléchargement de panoramas à la publication et à l’utilisation de votre visite virtuelle.
