Pourquoi intégrer un Gaussian Splat 3D ?
Les images statiques et même les photos à 360 degrés ne peuvent montrer que peu de choses. Une intégration de Gaussian Splat donne à vos visiteurs la capacité de se promener dans une scène 3D entièrement photoréaliste — en faisant pivoter, en zoomant et en explorant depuis n'importe quel angle — sans installer la moindre application.
Que vous soyez un agent immobilier présentant un bien, une entreprise de construction partageant l'avancement d'un site avec les parties prenantes, ou un studio créatif construisant un portfolio interactif, l'intégration d'un visualiseur Gaussian Splat transforme les spectateurs passifs en explorateurs actifs.
Avec Splat Labs Cloud, l'intégration est aussi simple que de copier une seule ligne HTML.
Comment ça fonctionne
Chaque projet que vous téléchargez sur Splat Labs Cloud obtient une URL de visualiseur partageable. Cette URL peut être ouverte directement dans un navigateur, ou enveloppée dans une balise HTML <iframe> pour l'intégrer dans n'importe quelle page web — votre propre site, un blog, une annonce Zillow, une page MLS, un document Notion, ou un CMS comme WordPress, Squarespace ou Webflow.
Voici le processus :
Étape 1 : Ouvrez la boîte de dialogue de partage
Après avoir téléchargé et traité votre Gaussian Splat sur Splat Labs Cloud, ouvrez votre projet. Sur le côté gauche du visualiseur, vous verrez un tiroir de barre latérale. En bas de cette barre latérale, cliquez sur le bouton Partager.
Cela ouvre la boîte de dialogue de partage, où vous pouvez contrôler les paramètres d'accès et obtenir votre code d'intégration.
La boîte de dialogue de partage de Splat Labs. Assurez-vous que "Partage de lien activé" est coché, puis cliquez sur le bouton INTÉGRER pour obtenir votre code iframe.
Étape 2 : Obtenez votre URL d'intégration ou code
Dans la boîte de dialogue de partage :
- Assurez-vous que "Partage de lien activé" est coché — cela permet à toute personne disposant du lien de voir votre projet.
- Cliquez sur le bouton INTÉGRER pour développer la section d'intégration.
Vous verrez maintenant deux champs :
- URL d'intégration — L'URL du visualiseur que vous pouvez utiliser directement ou coller dans des plateformes comme Zillow, Notion ou MLS.
- Code d'intégration — Un extrait HTML
<iframe>prêt à l'emploi que vous pouvez copier et coller directement dans votre site web.
Après avoir cliqué sur INTÉGRER, la boîte de dialogue affiche votre URL d'intégration et le code HTML d'intégration complet — cliquez simplement sur l'icône de copie à côté de l'un ou l'autre champ.
Les deux champs ont une icône de copie sur le côté droit. Cliquez dessus pour copier la valeur dans votre presse-papiers.
Cette URL charge un visualiseur 3D interactif qui fonctionne dans n'importe quel navigateur moderne — bureau, tablette ou mobile.
Étape 3 : Collez le code d'intégration
Prenez le code d'intégration (ou enveloppez l'URL du visualiseur dans une balise HTML <iframe> standard) et déposez-le dans le HTML de votre site web :
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
C'est tout. Vos visiteurs peuvent maintenant explorer la scène 3D complète sans quitter votre page.
Conseil pro : Définissez
width="100%"pour que le visualiseur s'étende pour remplir son conteneur sur n'importe quelle taille d'écran. Ajustezheightpour convenir à votre mise en page — 500 à 700 pixels fonctionne bien pour la plupart des designs.
Exemples en direct
Ci-dessous se trouvent deux scènes Gaussian Splat hébergées sur Splat Labs Cloud. Interagissez avec elles ici même — cliquez et faites glisser pour orbiter, faites défiler pour zoomer et explorez chaque angle. Ces intégrations sont gratuites pour utilisation sur votre propre site web. N'hésitez pas à copier le code d'intégration sous chaque visualiseur et à le coller dans votre site. Le visualiseur partagé inclut le filigrane Splat Labs.
Exemple 1 : Chantier de construction
Un chantier de construction multi-semaines capturé avec LiDAR et traité en Gaussian Splat. C'est le type d'intégration que les équipes de construction partagent avec les parties prenantes à distance pour qu'elles puissent explorer le chantier sans se déplacer.
URL d'intégration :
https://cloud.splatlabs.ai/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat
Code d'intégration (copier & coller) :
<iframe
src="https://cloud.splatlabs.ai/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Exemple 2 : Village de Niseko — Station de ski enneigée
Une capture photoréaliste d'un village de station de ski enneigé à Niseko, Japon. Ce type d'intégration immersive est parfait pour le tourisme, l'hôtellerie et le marketing de destination — permettant aux visiteurs potentiels d'explorer un lieu avant de réserver.
URL d'intégration :
https://cloud.splatlabs.ai/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3
Code d'intégration (copier & coller) :
<iframe
src="https://cloud.splatlabs.ai/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Personnaliser votre intégration
Hauteur responsive
Pour une intégration responsive qui maintient un rapport d'aspect 16:9 sur n'importe quel écran, enveloppez votre iframe dans un conteneur :
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
</div>
Cette technique — parfois appelée la boîte de rapport d'aspect — est largement utilisée pour les intégrations de vidéos et de cartes. Elle garantit que votre visualiseur est beau sur tout, d'un moniteur 4K à un téléphone mobile.
Intégration pleine largeur
Vous voulez que le visualiseur sorte de votre colonne de contenu et couvre toute la largeur du navigateur ? Utilisez ce conteneur :
<div style="position: relative; width: 100vw; left: 50%; margin-left: -50vw;">
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
</div>
Comportement de chargement
loading="eager"— Le visualiseur commence à se charger immédiatement au chargement de la page. Idéal quand l'intégration est au-dessus du pli ou est le contenu principal.loading="lazy"— Le visualiseur ne se charge que quand l'utilisateur le fait défiler dans la vue. Idéal pour les pages avec plusieurs intégrations ou quand le visualiseur est plus bas dans la page.
Guide d'intégration plateforme par plateforme
Le visualiseur Splat Labs fonctionne partout qui prend en charge HTML ou iframes. Voici une présentation détaillée pour chaque plateforme principale.
WordPress
WordPress offre plusieurs façons d'intégrer un iframe, selon que vous utilisez l'éditeur de blocs (Gutenberg) ou l'éditeur classique.
Éditeur de blocs (Gutenberg) — recommandé :
- Ouvrez la page ou l'article où vous souhaitez intégrer le visualiseur.
- Cliquez sur l'inserteur de bloc + et recherchez HTML personnalisé.
- Ajoutez le bloc HTML personnalisé à la page.
- Collez le code d'intégration iframe complet dans le bloc.
- Cliquez sur Aperçu pour confirmer qu'il s'affiche correctement, puis publiez.
Éditeur classique :
- Ouvrez votre page ou article et passez à l'onglet Texte (pas Visuel).
- Collez le code d'intégration iframe directement là où vous voulez qu'il apparaisse.
- Repassez à l'onglet Visuel pour prévisualiser, puis publiez.
Utiliser un plugin (optionnel) :
Si vous intégrez des iframes fréquemment, le plugin iFrame (disponible sur WordPress.org avec 70 000+ installations actives) vous permet d'utiliser un shortcode simple au lieu de HTML brut :
[iframe src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat" width="100%" height="600"]
Cela fonctionne à la fois dans l'éditeur de blocs et l'éditeur classique sans avoir besoin de basculer en vue HTML.
Elementor / autres constructeurs de pages :
La plupart des constructeurs de pages comme Elementor, Divi et Beaver Builder incluent un bloc HTML ou Code. Déposez ce bloc sur votre page et collez le code iframe.
Dépannage : Si l'intégration affiche un espace blanc, assurez-vous que votre site WordPress et le visualiseur Splat Labs sont tous deux servis en HTTPS. Le contenu mixte (iframe HTTP sur une page HTTPS) est bloqué par les navigateurs modernes. Splat Labs Cloud utilise toujours HTTPS, donc cela ne devrait pas être un problème. Si vous êtes sur une installation WordPress Multisite, confirmez que le HTML non filtré est activé pour votre rôle d'utilisateur.
Squarespace
Squarespace prend en charge les iframes via des Blocs de code, mais il y a une exigence de plan importante à prendre en compte.
Exigence de plan : L'ajout de JavaScript ou d'iframes aux blocs de code nécessite les plans Business, Commerce Basic, Commerce Advanced, Core, Plus ou Advanced. Le plan Personal prend uniquement en charge le HTML simple, Markdown et CSS dans les blocs de code — les iframes ne seront pas rendus.
Comment intégrer :
- Ouvrez l'éditeur de page dans Squarespace.
- Cliquez sur un point d'insertion (la ligne entre les sections de contenu) ou cliquez sur Ajouter un bloc.
- Sélectionnez Code dans le menu des blocs.
- Collez le code d'intégration iframe complet dans l'éditeur de bloc de code.
- Cliquez en dehors du bloc pour enregistrer. L'intégration devrait apparaître dans l'éditeur.
Si l'intégration n'apparaît pas lors de l'édition : C'est le comportement attendu. Squarespace cache parfois le contenu iframe quand vous êtes connecté comme mesure de sécurité. Cliquez sur Aperçu ou consultez votre site publié dans une fenêtre incognito pour confirmer que l'intégration s'affiche correctement pour les visiteurs.
Utiliser un bloc Embed plutôt qu'un bloc Code :
Squarespace a également un bloc Embed séparé qui accepte les URL des services compatibles oEmbed. Étant donné que Splat Labs Cloud n'est pas un fournisseur oEmbed, vous devriez utiliser la méthode bloc Code décrite ci-dessus — pas le bloc Embed. Si vous essayez le bloc Embed et collez l'URL brute, Squarespace peut échouer à le détecter ou afficher une erreur "non pris en charge."
Rendre responsive :
Les colonnes de contenu de Squarespace ont une largeur maximale fixe. Pour que l'iframe remplisse toute la largeur de la colonne, utilisez width="100%" dans votre code iframe. Pour une hauteur responsive, enveloppez l'iframe dans le conteneur de rapport d'aspect affiché dans la section Personnaliser votre intégration ci-dessus.
Conseil : Si vous êtes sur un plan Personal Squarespace et ne pouvez pas utiliser les blocs de code avec des iframes, envisagez de passer au plan Business — ou liez directement à votre URL de visualiseur Splat Labs sous forme de lien hypertexte standard pour que les visiteurs puissent l'ouvrir dans un nouvel onglet.
Webflow
Webflow traite le code personnalisé comme un élément de design de première classe via son élément Embed (également appelé Code Embed).
Comment intégrer :
- Ouvrez le Designer Webflow pour votre projet.
- Ouvrez le panneau Ajouter (l'icône + dans la barre latérale gauche).
- Recherchez ou faites défiler jusqu'à Embed (sous la section Composants) et faites-le glisser sur le canvas où vous voulez que le visualiseur apparaisse.
- L'éditeur de code s'ouvre automatiquement — collez le code d'intégration iframe complet.
- Cliquez sur Enregistrer et fermer.
L'iframe sera prévisualisé directement sur le canvas Webflow. Le contenu enveloppé dans les balises <iframe> affiche un aperçu en direct dans le Designer, vous devriez donc voir le visualiseur Splat Labs immédiatement.
Exigence de plan : L'élément Embed est disponible sur tous les plans Workspace Webflow (Core, Growth, Agency, Freelancer) et n'importe quel site avec un plan Site actif. Les sites staging gratuits peuvent également l'utiliser.
Dimensionnement et responsivité :
Si l'iframe ne définit pas explicitement le dimensionnement, il prendra la largeur complète de son élément parent. Vous pouvez contrôler la largeur et la hauteur de l'élément Embed depuis le panneau Style de Webflow comme n'importe quel autre élément. Pour un comportement responsive, définissez la largeur de l'élément à 100% et utilisez une hauteur fixe, ou enveloppez-le dans un div avec la technique de padding-bottom de rapport d'aspect.
Intégration dans des éléments de Collection CMS :
Si vous souhaitez intégrer un visualiseur Splat Labs différent sur chaque page de Collection CMS (par exemple, un portfolio de scans 3D), vous pouvez stocker l'URL du visualiseur dans un champ de texte CMS et y référencer dynamiquement dans un élément Embed en utilisant la liaison de champ CMS de Webflow. Ajoutez un élément Embed à votre modèle de collection, puis insérez la référence du champ CMS dans l'attribut src de votre iframe.
Limite de caractères : Les éléments Embed ont une limite de 50 000 caractères. Un seul iframe Splat Labs est bien en dessous de ce chiffre, donc cela ne sera jamais un problème.
Note : La documentation sur le support du code personnalisé de Webflow indique explicitement que le code personnalisé peut entrer en conflit avec les fonctionnalités sous-jacentes de Webflow et que leur équipe de support ne peut pas aider à déboguer le code personnalisé. Cela dit, un simple iframe comme le visualiseur Splat Labs devrait fonctionner sans problème.
Wix
Wix fournit un élément HTML iFrame dédié pour intégrer du contenu externe.
Éditeur Wix — comment intégrer :
- Dans l'éditeur Wix, cliquez sur le bouton + (Ajouter) dans la barre latérale gauche.
- Naviguez vers Code intégré → Intégrer HTML.
- Une boîte grise apparaît sur votre page — faites-la glisser à votre position préférée et redimensionnez-la selon les besoins.
- Cliquez sur l'élément, puis cliquez sur Saisir le code.
- Sélectionnez Code (pas Adresse web).
- Collez le code d'intégration iframe complet dans la zone de texte.
- Cliquez sur Mettre à jour (ou Appliquer).
Éditeur Wix Studio :
- Cliquez sur Ajouter des éléments sur le côté gauche de l'éditeur.
- Cliquez sur Intégrer et réseaux sociaux.
- Sélectionnez Code intégré pour ajouter l'élément à la page.
- Cliquez sur Saisir le code, collez le code iframe et cliquez sur Appliquer.
Intégration via URL (méthode alternative) :
Au lieu de coller le code iframe, vous pouvez coller l'URL du visualiseur directement :
- Ajoutez un élément Embed comme décrit ci-dessus.
- Au lieu de sélectionner Code, sélectionnez Adresse web.
- Collez l'URL du visualiseur Splat Labs :
https://cloud.splatlabs.ai/viewer/{project-id}?view=splat - Cliquez sur Appliquer.
Cette méthode est plus simple mais vous donne moins de contrôle sur les attributs de dimensionnement.
Notes importantes pour Wix :
- L'URL d'intégration doit utiliser HTTPS. Splat Labs Cloud sert toujours en HTTPS, donc c'est déjà géré.
- L'élément HTML iFrame dans Wix est en bac à sable — il crée un environnement iframe isolé. Cela signifie que le visualiseur fonctionne indépendamment des styles de votre page, ce qui est idéal pour un visualiseur 3D.
- L'élément iFrame de Wix n'est pas intrinsèquement responsive. Même si votre URL de visualiseur est responsive, le conteneur iframe Wix a une taille fixe sur le canvas. Définissez la largeur et la hauteur dans votre code iframe à
100%et dimensionnez manuellement le conteneur d'intégration Wix pour les mises en page bureau et mobile. - Mobile : L'élément iframe bureau ne se traduit pas automatiquement en mobile. Dans l'éditeur mobile Wix, vous devrez peut-être ajouter un élément HTML Embed séparé positionné et dimensionné spécifiquement pour les écrans mobiles, ou masquer l'élément bureau et ajouter une alternative adaptée aux mobiles.
Exigence Premium : Wix prend en charge les intégrations HTML iFrame sur les plans gratuits et premium dans l'éditeur standard. Cependant, si vous utilisez des éléments personnalisés (intégrations Velo/Blocks avancées), un plan premium avec un domaine connecté est requis.
Notion
Notion n'accepte pas le code HTML brut ou les balises <iframe>. Au lieu de cela, vous intégrez du contenu en collant une URL dans un bloc Embed, et Notion gère le rendu iframe en coulisses.
Comment intégrer :
- Ouvrez la page Notion où vous voulez le visualiseur.
- Tapez
/embedsur une nouvelle ligne, ou cliquez sur le bouton + et sélectionnez Embed. - Collez l'URL du visualiseur Splat Labs (pas le code iframe — juste l'URL) :
https://cloud.splatlabs.ai/viewer/{project-id}?view=splat - Cliquez sur Embed link.
Notion rendra le visualiseur dans un cadre inline. Vous pouvez le redimensionner en survolant le bloc et en faisant glisser les poignées de chaque côté.
Important : Utilisez l'URL, pas le code iframe. Le bloc embed de Notion s'attend à une URL https:// propre. Si vous collez la balise HTML <iframe> complète, cela ne fonctionnera pas. Notion utilise le service Iframely pour résoudre les URL d'intégration de plus de 1 900 domaines.
Si l'intégration ne se charge pas :
- Assurez-vous que l'URL du visualiseur Splat Labs est publiquement accessible (elle devrait l'être — les liens de visualiseur partagés sont publics par défaut).
- Si Notion affiche une carte de signet au lieu d'une intégration, supprimez le signet et réessayez en utilisant explicitement la commande
/embed. - Certains espaces de travail avec des paramètres de sécurité stricts peuvent limiter les intégrations externes. Vérifiez auprès de votre administrateur d'espace de travail si vous êtes sur un plan Enterprise.
Dimensionnement : Vous pouvez redimensionner la largeur de l'intégration en faisant glisser les poignées. Pour plus d'espace vertical, vous pouvez également mettre votre page Notion en mode Pleine largeur (cliquez sur le menu ⋯ en haut à droite → activer Pleine largeur).
Conseil : Les intégrations Notion sont excellentes pour la documentation de projet interne. Partagez une capture Gaussian Splat d'un chantier, d'un bâtiment scanné ou d'un modèle de terrain directement dans votre wiki de projet pour que votre équipe puisse l'explorer sans quitter Notion.
Zillow / Annonces MLS
Zillow et la plupart des plateformes MLS prennent en charge les liens de visite virtuelle, mais ils fonctionnent différemment des intégrations iframe standard. Vous ne collez pas de code iframe directement — au lieu de cela, vous fournissez l'URL du visualiseur dans un champ dédié.
Comment ajouter à Zillow :
- Connectez-vous à votre compte agent Zillow sur zillow.com.
- Naviguez vers votre tableau de bord Listings et sélectionnez la propriété.
- Cliquez sur Modifier l'annonce.
- Faites défiler vers le bas jusqu'à la section Photos — en dessous, vous trouverez un champ intitulé URL de visite virtuelle.
- Collez l'URL du visualiseur Splat Labs :
https://cloud.splatlabs.ai/viewer/{project-id}?view=splat - Faites défiler vers le bas et cliquez sur Mettre à jour pour enregistrer.
Zillow ajoutera un bouton "Voir la visite virtuelle" à votre page d'annonce. Les visiteurs cliquent dessus pour ouvrir le visualiseur 3D.
Comment ajouter à votre MLS :
La plupart des systèmes MLS (Flexmls, Matrix, Bright MLS, etc.) ont un champ URL de visite virtuelle sur la page de modification de l'annonce. Collez l'URL du visualiseur Splat Labs là-dedans. Une fois synchronisé, le lien de visite se syndiquera automatiquement à Zillow, Trulia, Realtor.com, Redfin et autres portails qui tirent de votre flux MLS.
Notes importantes :
- Zillow affiche les visites virtuelles tierces comme un lien hypertexte dans la section Faits et caractéristiques de la page d'annonce. Pour un placement plus prominent (apparaissant dans le carrousel de photos), Zillow favorise actuellement les visites d'une liste sélectionnée de fournisseurs approuvés (Matterport, iGuide, etc.) et sa propre application Zillow 3D Home.
- Le MLS est la source faisant autorité. Si vous ajoutez l'URL de la visite virtuelle à votre annonce MLS, elle apparaîtra automatiquement sur Zillow quand l'annonce est syndiquée — vous n'avez pas besoin de l'ajouter aux deux endroits.
- Les liens de visite de marque et sans marque peuvent tous deux être pris en charge selon votre MLS. Vérifiez la documentation de votre MLS pour les détails.
Intégration sur votre propre site web immobilier :
Pour votre site web d'agent personnel ou de courtage, utilisez le code d'intégration iframe standard pour afficher le visualiseur 3D en ligne sur vos pages d'annonces. Cela donne aux acheteurs une expérience bien plus riche qu'un simple lien.
Professionnels de l'immobilier : Les annonces avec des visites virtuelles reçoivent significativement plus de vues. Zillow rapporte que les annonces avec des visites 3D obtiennent jusqu'à 68% de vues de plus que celles sans. Intégrer une visite Gaussian Splat permet aux acheteurs d'explorer chaque angle d'une propriété — 24h/24 et 7j/7, de n'importe où.
GitHub Pages
Les sites GitHub Pages sont du HTML statique, donc l'intégration d'un iframe est simple — collez le code directement dans vos fichiers HTML ou Markdown.
Dans un fichier HTML :
Collez le code d'intégration iframe n'importe où dans le <body> de votre page :
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Dans un fichier Markdown (avec Jekyll) :
GitHub Pages utilise Jekyll par défaut, et le rendu Markdown de Jekyll (Kramdown) prend en charge le HTML inline. Vous pouvez coller l'iframe directement dans votre fichier .md et il se rendra quand le site est construit :
Voici un scan 3D interactif du site :
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Note sur les fichiers README GitHub : Si vous essayez d'intégrer dans un README.md sur une page de référentiel GitHub (pas un site GitHub Pages), les iframes ne se rendront pas. Le sanitiseur Markdown de GitHub supprime les balises <iframe> des fichiers README pour des raisons de sécurité. Pour les README de référentiel, liez à l'URL du visualiseur à la place ou utilisez une capture d'écran avec un lien cliquable :
[](https://cloud.splatlabs.ai/viewer/{project-id}?view=splat)
React / Next.js
Dans les projets React et Next.js, utilisez l'iframe directement dans votre JSX. La balise HTML <iframe> fonctionne nativement — notez simplement les différences de nommage des attributs JSX.
Composant React de base :
export default function SplatViewer({ projectId }) {
return (
<iframe
src={`https://cloud.splatlabs.ai/viewer/${projectId}?view=splat`}
width="100%"
height="600"
frameBorder="0"
allowFullScreen
loading="eager"
style={{ border: 'none' }}
/>
);
}
Différences JSX clés par rapport à HTML :
frameborder→frameBorder(camelCase)allowfullscreen→allowFullScreen(camelCase)- Utilisez
style={{ border: 'none' }}à la place deframeborder="0"pour une conformité React plus stricte
Composant responsive :
export default function ResponsiveSplatViewer({ projectId }) {
return (
<div style={{
position: 'relative',
paddingBottom: '56.25%',
height: 0,
overflow: 'hidden'
}}>
<iframe
src={`https://cloud.splatlabs.ai/viewer/${projectId}?view=splat`}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
border: 'none'
}}
allowFullScreen
loading="eager"
/>
</div>
);
}
Considérations Next.js :
- L'iframe charge du contenu côté client, donc il fonctionne bien à la fois dans les Server Components et les Client Components.
- Pour les performances, envisagez d'utiliser
loading="lazy"si le visualiseur est en dessous du pli. - Si vous devez différer le chargement de l'iframe jusqu'à ce qu'il défile dans la vue, enveloppez le composant dans React
Suspenseou utilisez l'API Intersection Observer pour un contrôle de chargement différé plus précis. - Ajoutez l'attribut
sandboxsi vous voulez restreindre les capacités de l'iframe pour une sécurité plus stricte :sandbox="allow-scripts allow-same-origin".
Hugo / Gatsby / Astro / Autres générateurs de sites statiques
Tout générateur de site statique qui génère du HTML prend en charge les iframes nativement. Collez le code d'intégration dans votre modèle de page, fichier de contenu ou composant.
Hugo :
Dans votre fichier de contenu Markdown, collez l'iframe directement — le rendu Markdown par défaut de Hugo (Goldmark) prend en charge le HTML inline :
{{< rawhtml >}}
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
{{< /rawhtml >}}
Si vous n'avez pas de shortcode rawhtml, créez-en un à layouts/shortcodes/rawhtml.html avec le contenu : {{ .Inner }}
Alternativement, activez le rendu HTML non sécurisé dans votre config Hugo :
[markup.goldmark.renderer]
unsafe = true
Puis collez l'iframe directement dans n'importe quel fichier .md.
Gatsby :
Utilisez l'iframe dans n'importe quel composant React ou page, comme décrit dans la section React / Next.js ci-dessus.
Astro :
Collez l'iframe directement dans n'importe quel composant .astro ou fichier Markdown. Astro prend en charge le HTML brut dans Markdown par défaut.
Shopify
Shopify prend en charge le HTML personnalisé dans plusieurs endroits de votre boutique.
Dans une page ou un article de blog :
- Ouvrez la page ou l'article de blog dans l'administration Shopify.
- Dans l'éditeur de texte enrichi, cliquez sur le bouton <> (Afficher le HTML) pour passer en vue HTML.
- Collez le code d'intégration iframe.
- Repassez à l'éditeur visuel pour confirmer le placement, puis enregistrez.
Dans un modèle de thème Liquid :
Collez le code iframe directement dans n'importe quel fichier .liquid dans votre thème (par exemple, dans une section personnalisée ou un modèle de page).
Dans une section Liquid personnalisée (Online Store 2.0) :
- Allez dans Boutique en ligne → Thèmes → Personnaliser.
- Ajoutez une section Liquid personnalisé.
- Collez le code d'intégration iframe dans le champ Liquid.
- Enregistrez.
HTML personnalisé / N'importe quel site web
Si vous avez un accès direct aux fichiers HTML source de votre site web, l'intégration est aussi simple que de coller le code iframe dans le <body> de n'importe quelle page :
<iframe
src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
width="100%"
height="600"
frameborder="0"
allowfullscreen
loading="eager">
</iframe>
Cela fonctionne sur n'importe quel site HTML statique, n'importe quel site rendu côté serveur (PHP, Python, Ruby, etc.), et n'importe quel CMS qui vous permet de modifier directement la source de la page.
Questions fréquentes
Est-ce gratuit d'intégrer ?
Oui. Chaque projet Splat Labs peut être partagé et intégré sans coût supplémentaire. Les intégrations partagées affichent le filigrane Splat Labs. Les plans Business et Enterprise offrent une réduction ou un branding en marque blanche.
Mes visiteurs ont-ils besoin d'installer quelque chose ?
Non. Le visualiseur fonctionne entièrement dans le navigateur en utilisant WebGL. Il fonctionne sur Chrome, Safari, Firefox et Edge — sur bureau, tablette et mobile.
Puis-je contrôler la position initiale de la caméra ?
Oui. Configurez votre angle de caméra préféré dans le visualiseur Splat Labs avant de partager. L'intégration se chargera à cette position exacte.
L'intégration affecte-t-elle la vitesse de ma page ?
L'iframe se charge indépendamment du contenu de votre page. L'utilisation de loading="lazy" garantit que le visualiseur ne se charge que quand il est défilé dans la vue, donc il a un impact minimal sur le temps de chargement initial de votre page.
Puis-je intégrer sur plusieurs pages ?
Absolument. Il n'y a pas de limite au nombre de pages qui peuvent intégrer le même visualiseur. Le visualiseur est servi depuis le CDN Splat Labs, donc il se charge rapidement partout.
Pourquoi l'intégration affiche-t-elle un espace blanc ?
Les causes les plus courantes sont le blocage du contenu mixte (page HTTP chargeant un iframe HTTPS ou vice versa) et le site source bloquant les iframes via des en-têtes X-Frame-Options ou Content-Security-Policy. Splat Labs Cloud sert toutes les URL de visualiseur en HTTPS et permet l'intégration iframe par défaut, donc si vous voyez un espace blanc, vérifiez que votre propre site est également servi en HTTPS.
Puis-je personnaliser le branding du visualiseur ?
Les liens partagés gratuits incluent le filigrane Splat Labs. Les plans Business et Enterprise offrent des options en marque blanche où vous pouvez supprimer ou remplacer le branding par votre propre logo.
Prêt à intégrer le vôtre ?
Créer et intégrer un visualiseur Gaussian Splat ne prend que quelques minutes :
- Inscrivez-vous gratuitement sur cloud.splatlabs.ai
- Téléchargez votre fichier Gaussian Splat (format PLY, SPLAT, KSPLAT ou XGRIDS)
- Cliquez sur Partager et copiez l'URL d'intégration ou le code iframe
- Collez dans votre site web, blog ou plateforme d'annonces
Splat Labs prend en charge les Gaussian Splats de n'importe quelle source — PortalCam, Lixel L2 Pro, Postshot, Kiri Engine, Luma AI, XGRIDS, ou tout autre outil qui génère des formats splat standard.
Besoin d'aide pour intégrer sur une plateforme spécifique ? Contactez notre équipe — nous serons heureux de vous guider.
