Comment intégrer une visionneuse 3D (3D viewer) et un modèle 3D directement sur votre site ?

Ce guide vous révèle comment utiliser un outil no-code tel que Confira3D pour générer un simple code iframe et l’intégrer en quelques clics sur votre site internet.

Intégration d’une visionneuse 3D : sommaire

Comment intégrer un 3D Viewer comme Confira3D sur un système de gestion de contenu (CMS) ?

Que votre site repose sur un CMS populaire comme WordPress ou Shopify, ou qu’il soit entièrement codé, l’ajout d’une visionneuse 3D (3D viewer) est à votre portée.

Comment intégrer le visualiseur 3D Confira3D sur WordPress / WooCommerce ?

Suivez ces étapes pour intégrer facilement le personnaliseur 3D Confira3D sur une page WordPress :

1. Dans l’espace “Export” de Confira3D, copiez le code iframe (il commence par “<iframe src=” et termine par </iframe>) ;
2. Sur le back-office WordPress, rendez-vous dans la sidebar (barre verticale de votre écran) à gauche ;
3. Cliquez sur “Pages” puis “Toutes les pages” ;
4. Recherchez la page dans laquelle vous souhaitez intégrer le configurateur ;
5. Ajoutez un élément “HTML personnalisé” à l’emplacement de votre choix ;
6. Dans le champ de texte de l’élément ajouté, collez le code iframe (que vous aviez copié plus haut) ;
   Optionnel : dans la petite barre horizontale qui surplombe le champ de texte, vous pouvez cliquer sur “Prévisualiser” afin de tester l’outil de visualisation 3D, avant d’enregistrer les modifications en haut à droite de votre écran.

Comment intégrer le configurateur 3D Confira3D sur Shopify ?

Suivez ces étapes pour intégrer facilement le visualiseur Confira3D sur une page Shopify :

1. Dans l’espace “Export” de Confira3D, copiez le code iframe (il commence par “<iframe src=” et termine par </iframe>) ;
2. Sur le back-office Shopify, rendez-vous dans la sidebar (barre verticale de votre écran) à gauche ;
3. Cliquez sur “Online Store”, sous “Sales channels” ;
4. À droite de votre écran, cliquez sur le bouton noir “Customize” ;
5. Revenez sur la sidebar de gauche et cliquez sur “Add section” ;
6. Dans la barre de recherche qui s’ouvre, recherchez puis cliquez sur “Custom Liquid”.
   Optionnel : vous pouvez saisir avec un clic maintenu le module “Custom Liquid” et le déplacer de haut en bas dans le template, pour le placer où vous le souhaitez sur votre page web ;
7. Tout à droite de votre écran, collez le code iframe (que vous aviez copié plus haut) dans le champ de texte sous “Custom Liquid”.

Comment intégrer un outil de visualisation 3D dans le code HTML d’un site entièrement codé ?

Pour intégrer un iframe dans le code HTML d’un site codé entièrement sans CMS, vous devez coller l’<iframe> à l’endroit précis où vous souhaitez que le contenu externe s’affiche.

Comment ajuster la taille du visualiseur 3D au sein de la page web ?

Dans le code iframe, vous retrouvez la partie « style= ». À la suite, vous retrouvez « Width » (« largeur » en Français) et « height » (« hauteur »). 

Leurs mesures s’expriment en nombre de px (pixels) ou bien en pourcentage. Vous pouvez réécrire les unités ainsi que les chiffres, de manière que le cadre du visualiseur prenne la place que vous souhaitez sur la page.

En mettant le nez dans ce bout de code HTML, vous pouvez aussi modifier l’encadrement avec la partie “border »).

Comment tester la visionneuse avant d’envoyer la nouvelle version de la page sur internet ?

Prévisualisation depuis la plateforme du configurateur 3D

Confira3D vous permet déjà de prévisualiser votre modèle 3D et ces paramètres, directement depuis votre espace client sur confira3D.com. 

Vous pouvez aussi vérifier que la configuration s’affiche bien sur votre site web avant de publier la page.

Prévisualisation depuis un CMS

Depuis un CMS, bien souvent, vous pouvez prévisualiser votre page avant de publier les modifications. Sur WordPress, par exemple, vous pouvez prévisualiser le visualiseur en cliquant sur Prévisualiser” dans la petite barre horizontale qui surplombe le champ de texte. Autre méthode : cliquez sur l’icône symbolisant un appareil informatique en haut de votre écran puis choisissez l’appareil que vous souhaitez simuler :

Prévisualisation pour un site entièrement codé

Pour un site entièrement codé, vous ne bénéficiez pas des fonctionnalités de prévisualisation intégrées des CMS (comme l’aperçu du brouillon). Il existe néanmoins des méthodes pour prévisualiser les modifications de la page avant de les mettre en ligne : 

1. Prévisualisation en local : la méthode la plus sûre et la plus rapide consiste à visualiser la page directement sur votre ordinateur de développement avant de la télécharger sur le serveur de production.
2. Utiliser un serveur web local : si votre site utilise des langages côté serveur (PHP, Node.js, Ruby, etc.), vous devez simuler l’environnement du serveur de production sur votre machine.
3. Gestion de version (Git) : si vous utilisez un système de gestion de version comme Git, vous pouvez profiter des branches pour isoler vos modifications. 
4. « Hack » de l’aperçu : si vous n’avez pas accès à un serveur local ou staging pour une vérification rapide, et que vous n’avez qu’une petite modification à faire.

Que faut-il vérifier au niveau de l’intégration ?

Assurez-vous que les utilisateurs peuvent facilement faire pivoter, zoomer et interagir avec le contenu 3D sous tous les angles que vous avez définis dans votre configurateur.

Vérifiez que le module s’affiche comme vous le désirez à la fois sur PC, tablettes et mobiles. On parle de “responsive design” quand on cherche à ce que l’affichage s’adapte à l’écran, quel que soit le terminal utilisé : smartphone, tablette, ordinateur de bureau, TV…

Idéalement, enfin, testez la visionneuse 3D sur différents navigateurs : Chrome, Mozilla Firefox, Opera, Safari, etc.