Comment intégrer une carte 3D Georivo dans Squarespace
Ajoutez un iframe HTTPS Georivo avec un bloc Code Squarespace, vérifiez la compatibilité de votre forfait, rendez-le réactif, autorisez le domaine et validez la page publique.
Pour intégrer une présentation interactive Georivo dans Squarespace, commencez par publier le widget et par autoriser le domaine exact de votre site web public dans Georivo. Copiez l'iframe HTTPS généré, ajoutez-le via l'élément HTML ou le bloc de code pris en charge par la plateforme, préservez son format d'affichage et publiez la page. Vérifiez l'URL publique en direct sur ordinateur et mobile, en contrôlant l'accès au domaine, le chargement, l'attribution, le comportement de consentement et la gestion du repli.
Prérequis et compatibilité des forfaits
Avant de tenter d'intégrer une présentation interactive en 3D dans votre site web, vous devez confirmer que plusieurs prérequis techniques et administratifs sont pleinement satisfaits. Tout d'abord, vous devez disposer d'un widget Georivo publié et prêt dans votre compte. Ce widget représente la présentation configurée de votre propriété, qui peut utiliser des modèles tels que la Vitrine de Propriété, l'Histoire de Quartier ou le Guide d'Arrivée. Chacun de ces modèles s'appuie sur des images géospatiales sous licence pour construire un environnement 3D photoréaliste, doté de mouvements de caméra programmés et de marqueurs spatiaux personnalisés.
Deuxièmement, vous devez vous assurer que vous disposez d'un accès éditeur ou administrateur approprié à votre site web Squarespace. Il est essentiel de vérifier votre forfait d'abonnement Squarespace avant de continuer. Squarespace limite l'utilisation de blocs de code personnalisés, de HTML brut et d'intégrations d'iframe externes à certains niveaux premium spécifiques, commençant généralement par leur forfait Business. Si votre site web utilise un forfait personnel ou de base qui ne permet pas l'exécution de code personnalisé, la carte 3D intégrée ne s'affichera pas. Cette exigence de la plateforme a été vérifiée par rapport à la documentation d'aide officielle des blocs de code Squarespace le 24 juillet 2026.
Enfin, vous devez configurer l'autorisation de domaine dans votre tableau de bord Georivo. Georivo utilise des intégrations liées au domaine comme fonctionnalité de sécurité principale pour protéger vos visualisations géospatiales sous licence. En limitant l'exécution de l'iframe à votre seul domaine public autorisé, vous empêchez des tiers non autorisés de copier votre code d'intégration et d'afficher votre contenu 3D interactif sur des sites externes non approuvés. Vous devez saisir le domaine public exact de votre site Squarespace dans Georivo avant que l'intégration ne fonctionne sur vos pages en ligne.
Copier le code d'intégration Georivo
Une fois tous les prérequis remplis, vous pouvez récupérer le code iframe sécurisé depuis votre tableau de bord Georivo. Accédez aux paramètres du projet pour votre présentation 3D publiée. Dans le panneau de partage ou de publication, le système propose une option dédiée pour copier le code d'intégration. Ce code est structuré comme un élément iframe HTTPS standard conçu pour charger l'environnement 3D interactif de manière sécurisée et fluide sur des plateformes externes.
Lorsque vous copiez ce code, vous devez respecter strictement le contrat d'intégration. Vous devez utiliser uniquement le code iframe exact et non modifié, copié directement depuis l'interface du widget Georivo publié. Ne tentez jamais d'exposer, de modifier ou de recréer manuellement l'URL protégée ou le jeton de sécurité intégré dans le code. Modifier ces paramètres ou tenter de rétro-concevoir l'URL source annulera la validation de sécurité, ce qui amènera le système de protection lié au domaine à bloquer la requête et à afficher une erreur.
Le fragment d'iframe copié contient des attributs par défaut spécifiques, notamment des paramètres de largeur et de hauteur, conçus pour établir une mise en page de base. Conservez ce code copié dans votre presse-papiers sans aucun ajustement manuel, car toute modification des attributs sources principaux peut interférer avec la connexion sécurisée établie entre l'environnement d'hébergement Squarespace et les serveurs de visualisation de Georivo.
Ajouter le bloc Code dans Squarespace
Avec le code iframe HTTPS sécurisé copié dans votre presse-papiers, connectez-vous à votre compte Squarespace et accédez à l'éditeur de page pour la page spécifique où vous souhaitez afficher la carte 3D. Localisez la section cible sur la mise en page de votre page où la visualisation apportera le plus de valeur à vos visiteurs, par exemple directement sous les détails principaux de la propriété ou dans une section dédiée à l'exploration du quartier.
Ajoutez un nouveau bloc à la section choisie et sélectionnez le bloc Code parmi les options disponibles. Le bloc Code est l'élément désigné pour restituer du HTML brut et des fragments d'iframe personnalisés sur Squarespace. Une fois le bloc ajouté, ouvrez son panneau de configuration. Il est essentiel de s'assurer que le paramètre de format dans le bloc Code est configuré spécifiquement sur HTML. Si le bloc est laissé en mode texte brut, le navigateur affichera le code brut sous forme de texte plutôt que d'exécuter l'iframe pour charger la carte 3D interactive.
Collez le code de l'iframe Georivo copié directement dans la zone de texte du bloc Code. Pendant que vous travaillez dans l'éditeur Squarespace, vous pouvez voir un espace réservé ou un message indiquant que l'aperçu a été désactivé. Il s'agit d'un comportement standard de la plateforme conçu pour optimiser les performances de l'éditeur et empêcher les scripts externes ou les contextes WebGL complexes d'interférer avec l'interface d'édition. La présentation 3D interactive complète s'affichera et fonctionnera normalement une fois la page consultée sur l'URL publique en direct.
Gérer la mise en page réactive et les formats d'affichage
Pour garantir une expérience utilisateur fluide sur tous les appareils, vous devez gérer la mise en page réactive de la carte 3D intégrée. Le code iframe fourni par Georivo est conçu pour s'adapter horizontalement afin de remplir la largeur de son conteneur. Par conséquent, la réactivité de la carte est en grande partie déterminée par la façon dont vous configurez le conteneur du bloc Code environnant dans votre mise en page Squarespace.
Lorsque vous utilisez le moteur de mise en page de Squarespace, vous pouvez ajuster les limites du bloc Code pour établir un format d'affichage équilibré. Pour les écrans d'ordinateur, il est fortement recommandé de maintenir un format d'affichage large, tel que le 16:9. Cette proportion garantit que le relief 3D photoréaliste, les mouvements de caméra programmés et les points d'intérêt à proximité sont clairement visibles sans nécessiter de défilement vertical excessif. Cela offre également un espace suffisant pour que les utilisateurs interagissent confortablement avec la carte.
Après avoir configuré la mise en page pour ordinateur, passez à la vue d'édition mobile dans Squarespace. Les écrans mobiles ayant un espace horizontal limité, vous devez ajuster la hauteur et la largeur du bloc Code spécifiquement pour les fenêtres d'affichage mobiles. Assurez-vous que le bloc est assez haut pour éviter que les commandes interactives et la visualisation 3D ne paraissent trop serrées, tout en évitant une hauteur excessive qui pourrait perturber le flux vertical de la mise en page de votre page mobile.
Publier et vérifier la page en direct
Après avoir positionné le bloc Code et ajusté ses dimensions, enregistrez vos modifications et publiez la page mise à jour pour la mettre en ligne. La vérification est une étape finale essentielle du processus d'intégration. Comme le widget Georivo utilise une sécurité liée au domaine, vous ne pouvez pas vérifier pleinement sa fonctionnalité uniquement dans l'aperçu d'édition de Squarespace. Vous devez tester l'URL publique en direct pour confirmer que toutes les vérifications de sécurité et d'affichage réussissent.
Ouvrez une nouvelle fenêtre de navigateur, idéalement en mode de navigation privée pour contourner les sessions d'édition actives ou les fichiers mis en cache, et accédez à l'URL publique en direct de votre page Squarespace. Confirmez que la carte 3D interactive se charge complètement et que les mouvements de caméra programmés initiaux se déroulent de manière fluide. Une fois la lecture automatique terminée, vérifiez que le mode d'exploration en direct est actif, vous permettant d'interagir avec l'environnement 3D photoréaliste en faisant glisser, en zoomant et en faisant pivoter la vue.
Au cours de ce processus de vérification, examinez les mises en page pour ordinateur et pour mobile. Assurez-vous que toutes les attributions requises, obligatoires en vertu des conditions d'utilisation de Google Maps Platform, sont clairement visibles et lisibles au bas de l'interface de la carte. De plus, vérifiez le comportement de l'intégration par rapport aux bannières de consentement aux cookies ou aux paramètres de confidentialité de votre site, afin de vous assurer qu'un blocage de script externe n'empêche pas le chargement de la carte pour les nouveaux visiteurs.
Résolution des problèmes d'intégration courants
Si la carte 3D intégrée ne s'affiche pas correctement sur votre site Squarespace en direct, vous pouvez résoudre le problème méthodiquement à l'aide d'une liste de contrôle de dépannage standard. Un iframe vide ou une erreur de chargement explicite est le plus souvent causé par un domaine bloqué ou incorrect. Retournez dans les paramètres de votre projet Georivo et vérifiez que le domaine autorisé correspond exactement à l'URL publique de votre site Squarespace en direct, y compris les sous-domaines ou les préfixes comme 'www'.
Un autre obstacle potentiel est une politique de sécurité du contenu (CSP) ou un blocage de contenu mixte. Comme Georivo nécessite une connexion sécurisée, votre site Squarespace doit être entièrement desservi via HTTPS. S'il y a des éléments non sécurisés sur votre page, le navigateur peut bloquer le chargement de l'iframe sécurisé. De plus, vérifiez la présence de cache de navigateur obsolète ou de blocages de consentement tiers agressifs. Certains plugins de confidentialité ou outils de gestion des cookies sur votre site Squarespace peuvent bloquer les scripts externes ou les cadres WebGL jusqu'à ce que le visiteur donne explicitement son consentement.
Les problèmes de mise en page, tels qu'une hauteur incorrecte ou un affichage rogné sur les appareils mobiles, peuvent être résolus en ajustant les paramètres du conteneur. Si la carte semble écrasée verticalement ou présente des barres noires, examinez les attributs de hauteur et de largeur dans votre code iframe ou redimensionnez les limites du bloc Code dans le Fluid Engine de Squarespace. S'assurer que la largeur de l'iframe est définie sur 100 % et que le conteneur dispose d'une marge interne verticale adéquate résoudra la plupart des problèmes de mise en page réactive.
Optimisation des performances et comportement de chargement
Comme les cartes interactives Georivo utilisent des images géospatiales sous licence à haute résolution pour construire des environnements 3D photoréalistes, il est important de gérer leur impact sur les performances de la page. Les intégrations Georivo sont conçues pour se charger de manière asynchrone, ce qui signifie qu'elles ne bloquent pas le chemin de rendu critique de votre page Squarespace. Vos textes principaux, images et éléments de navigation se chargeront en premier, garantissant une vitesse de page initiale rapide pour vos visiteurs.
Pour optimiser davantage les performances, vous pouvez implémenter le chargement différé natif (lazy loading). En ajoutant l'attribut loading='lazy' directement à votre balise iframe HTTPS copiée dans le bloc Code de Squarespace, vous indiquez aux navigateurs modernes de retarder le téléchargement des ressources 3D jusqu'à ce que le visiteur fasse défiler la page jusqu'à la section contenant la carte. Cela permet d'économiser de la bande passante et de la puissance de calcul, en particulier pour les utilisateurs mobiles qui pourraient ne pas faire défiler la page pour afficher le contenu interactif.
De plus, évitez d'intégrer plusieurs cartes 3D interactives sur une seule page. Le chargement simultané de plusieurs contextes WebGL peut surcharger les ressources du système, entraînant une dégradation des performances sur les appareils mobiles plus anciens ou les ordinateurs plus lents. Si vous devez présenter plusieurs vues ou différentes propriétés, il est préférable d'utiliser une seule intégration principale sur la page et de fournir des liens de partage protégés pour les présentations secondaires ou les histoires de quartier détaillées.
Limites et adéquation
Bien que Georivo soit un outil puissant pour les professionnels de l'immobilier, les spécialistes du marketing, les promoteurs et les équipes de l'hôtellerie, il est essentiel de comprendre ses limites techniques et ses critères d'adéquation. Georivo est une plateforme de visualisation 3D interactive alimentée par des images géospatiales sous licence ; ce n'est pas un service de production physique par drone. Elle ne fournit pas de flux vidéo en direct et en temps réel de propriétés physiques, et ne représente pas un survol physique par drone.
Comme la plateforme s'appuie sur des ensembles de données géospatiales compilés, l'environnement 3D peut ne pas refléter immédiatement les constructions récentes, les fermetures temporaires de routes ou les conditions météorologiques actuelles. Les spécialistes du marketing doivent clairement distinguer ces visualisations 3D interactives des séquences physiques par drone dans les descriptions de leurs annonces afin de gérer précisément les attentes des acheteurs.
De plus, il incombe aux utilisateurs de vérifier la couverture des adresses dans le système Georivo avant de finaliser leurs campagnes marketing. Vous devez également vous assurer que votre utilisation de la carte interactive est conforme aux conditions d'utilisation de Google Maps Platform, notamment en ce qui concerne l'affichage des attributions requises et le contexte d'utilisation autorisé de l'expérience cartographique en direct. Enfin, notez que ces visualisations 3D sont conçues pour offrir un contexte spatial et raconter l'histoire d'un quartier ; elles ne prouvent ni n'établissent de limites de propriété juridiques ou physiques.
| Fonctionnalité / Paramètre | Valeur recommandée | Objectif | Compatibilité Squarespace |
|---|---|---|---|
| Type de bloc | Bloc Code | Affiche proprement le HTML brut et le code iframe | Nécessite le forfait Business ou supérieur |
| Paramètre de format | HTML | Empêche Squarespace d'échapper les balises iframe | Disponible dans tous les blocs Code |
| Largeur de l'iframe | 100% | Permet à la carte de s'adapter à la largeur du conteneur | Pratique réactive standard |
| Hauteur de l'iframe | 500px à 600px | Fournit un espace vertical adéquat pour la navigation 3D | Ajustable via CSS personnalisé ou Fluid Engine |
| Attribut de chargement | lazy | Améliore la vitesse de chargement initial de la page et les performances | Pris en charge par les navigateurs modernes |
Étapes pour autoriser votre domaine et intégrer la carte
- Connectez-vous à votre tableau de bord Georivo et sélectionnez le projet de propriété spécifique que vous souhaitez afficher.
- Accédez aux paramètres de partage et saisissez le domaine public exact de votre site Squarespace pour l'autoriser.
- Copiez le fragment de code iframe HTTPS complet et généré directement dans votre presse-papiers.
- Ouvrez l'éditeur de page Squarespace, ajoutez un bloc Code à la section souhaitée et définissez le format sur HTML.
- Collez le code iframe dans le bloc, ajustez les dimensions du conteneur et publiez vos modifications pour mettre la carte 3D interactive en ligne.
L'intégration d'une visualisation 3D interactive directement dans les pages de propriétés comble le fossé entre l'imagerie statique et les visites physiques sur site, offrant aux acheteurs un contexte géographique immédiat.
Questions fréquentes
Pourquoi ma carte Georivo intégrée affiche-t-elle un écran blanc sur mon site Squarespace en direct ?
Cela se produit généralement si le domaine du site web en direct n'a pas été autorisé dans les paramètres de votre projet Georivo. Assurez-vous que le domaine public exact, y compris les sous-domaines, est ajouté à votre liste de domaines autorisés dans Georivo.
Ai-je besoin d'un forfait Squarespace premium pour intégrer une carte 3D Georivo ?
Oui, Squarespace limite généralement l'utilisation de blocs de code personnalisés et d'intégrations de code HTML/iframe brut à ses forfaits Business et Commerce. Vérifiez votre abonnement Squarespace actuel pour vous assurer qu'il autorise le code personnalisé.
En quoi une présentation 3D Georivo diffère-t-elle d'une séquence physique par drone ?
Georivo utilise des images géospatiales sous licence pour construire un environnement 3D interactif et photoréaliste que les utilisateurs peuvent explorer activement. Contrairement à une vidéo de drone préenregistrée et statique, Georivo permet des mouvements de caméra programmés et une exploration en direct des points d'intérêt à proximité après la lecture.
L'intégration de la carte 3D va-t-elle ralentir la vitesse de chargement de mon site Squarespace ?
Les intégrations Georivo sont optimisées pour se charger de manière asynchrone, ce qui signifie qu'elles ne bloquent pas le rendu du texte principal et des images de votre page Squarespace. Pour optimiser davantage les performances, vous pouvez activer le chargement différé natif (lazy loading) sur l'iframe.
Puis-je utiliser le bloc d'intégration standard de Squarespace à la place du bloc Code ?
Bien que le bloc d'intégration puisse fonctionner avec du code iframe brut sur certains forfaits, le bloc Code configuré en mode HTML reste la méthode la plus fiable pour restituer des éléments d'iframe HTTPS personnalisés sans modifications spécifiques à la plateforme.
Que dois-je faire si la carte 3D semble rognée sur les appareils mobiles ?
Assurez-vous que votre code iframe utilise du CSS réactif, par exemple en définissant la largeur sur 100 % et en gérant la hauteur avec des unités de fenêtre d'affichage (viewport) ou un conteneur à format d'affichage fixe. Vous devez également ajuster les paramètres de mise en page mobile dans le Fluid Engine de Squarespace.