Dero : un configurateur 3D de racks à vélos intégré sans code

Dero est un fabricant de solutions de stationnement pour vélos basé à Minneapolis, dans le Minnesota, et une entreprise de PlayCore. L’entreprise fabrique des arceaux pour vélos commerciaux et sur mesure, des stations publiques de réparation de vélos, des abris vélos, des consignes à vélos, du mobilier de site et des produits d’aménagement urbain, et accompagne ses clients depuis 1995, des particuliers achetant un seul arceau aux architectes concevant un local vélos pour des centaines de cyclistes. Ses pages produits proposent ce que recherchent les prescripteurs : brochures, fiches de soumission, guides d’installation, fichiers CAD, Revit et SketchUp, ainsi que spécifications CSI.

Sept de ces pages proposent désormais aussi un configurateur 3D d’arceaux pour vélos, créé dans Simplio3D et simplement intitulé Visionneuse 3D. Il est volontairement simple. Le visiteur choisit le mode de fixation de l’arceau, ajoute une barre d’appui lorsque le modèle le permet et teste ses finitions ; l’arceau se modifie alors en 3D. Il n’y a ni prix, ni panier, ni formulaire, et son intégration sur dero.com s’est faite en collant un extrait d’intégration plutôt qu’en écrivant du code.

La solution : un configurateur 3D d’arceaux pour vélos sur sept pages produits

Sur dero.com, chaque arceau dispose de sa propre page produit, avec une description, des documents et téléchargements, ainsi que les options de Dero pour acheter ou demander un devis. Sept d’entre eux, du Hoop Rack, que Dero qualifie de référence du stationnement vélo, au Bike Bike Rack en forme de vélo, comportent désormais une section Visionneuse 3D plus bas dans la page.

Chaque Visionneuse 3D est un configurateur élémentaire. L’arceau pivote et se zoome sur un fond gris clair, tandis que le panneau latéral ne comporte pas plus de trois choix : la fixation, la barre d’appui et la finition. Rien n’est tarifé, rien n’est ajouté à un panier et aucune information n’est envoyée. Son seul rôle est de montrer l’arceau, ce qui explique le peu de paramétrage nécessaire.

Fixation, barre d’appui et finition, affichées sur l’arceau en 3D

Les trois choix sont ceux qui modifient l’apparence d’un arceau une fois installé :

• Fixation. Une liste déroulante avec Surface et In-Ground. Surface affiche l’arceau sur les platines de base avec lesquelles il est boulonné au sol ; In-Ground les remplace par des pieds plus longs à sceller dans le sol.
• Barre d’appui. Un interrupteur disponible sur les Hoop Rack, Hoop Rack Heavy Duty, Downtown Rack et Arc Rack. Lorsqu’il est activé, une barre horizontale apparaît sur l’arceau ; les trois autres modèles n’affichent tout simplement pas cet interrupteur.
• Finition. 22 nuanciers, identiques pour chaque arceau : Galvanized et Stainless, puis Black, Flat Black, White, Light Gray, Red, Yellow, Bright Yellow, Orange, Blue, Sky Blue, Green, Light Green, Hunter Green, Sepia Brown, Bronze, Silver, Dark Purple, Wine Red, Beige et Iron Gray. Le nuancier galvanisé montre la texture mouchetée de l’acier galvanisé plutôt qu’une couleur unie.

Un petit bouton (i) sous le panneau ouvre le Récapitulatif de configuration, qui répertorie les choix en toutes lettres : pour le Swerve Rack, par exemple, Select Mount: Surface et Select Finish: Wine Red. Le visiteur peut ensuite accéder directement aux options d’achat ou de devis sur la même page.

Un aperçu aux côtés des propres options d’achat et de devis de Dero

Les pages produits de Dero permettent déjà d’acheter. Chacune comporte les propres options de Dero pour acheter ou demander un devis : finition, fixation et, le cas échéant, barre d’appui, puis quantité, Ajouter au panier et Ajouter au devis, les quantités plus importantes passant par la liste de devis. La Visionneuse 3D se trouve sur la même page et ne modifie rien de tout cela.

Elle ne comporte ni prix, ni panier, ni formulaire propre, et n’envoie aucune donnée. Le visiteur examine l’arceau avec la fixation et la finition qu’il envisage, puis effectue les mêmes choix dans les options de Dero. Cette simplicité a permis une mise en ligne rapide : aucun produit à relier, aucun prix à synchroniser et aucun formulaire à acheminer.

Intégré sans écrire de code

Chaque configurateur Simplio3D dispose d’un lien de partage et d’un extrait iframe à copier. Sur chaque page produit Dero, cet extrait est placé sous le titre Visionneuse 3D, sur toute la largeur. Il n’y a ni plugin, ni script, ni connexion à la boutique : mettre une visionneuse en ligne consistait donc à coller un seul extrait dans une seule page.

Comme la page ne contient que cet extrait, la Visionneuse 3D elle-même est gérée dans Simplio3D. Une nouvelle finition ou un modèle mis à jour est modifié là-bas et apparaît sur dero.com au prochain chargement de la page, sans qu’il soit nécessaire de modifier la page produit. Pour en savoir plus sur ce type de visionneuse : la visionneuse de produits 3D.

Ce qu’un projet comme celui-ci pourrait intégrer aujourd’hui

Aucun élément de cette section ne fait partie des Visionneuses 3D de Dero décrites ci-dessus, qui fonctionnent sur une version antérieure de Simplio3D. Pour un fabricant d’arceaux pour vélos ou de mobilier de site qui démarre aujourd’hui :

• L’arceau là où il sera installé. La réalité augmentée place l’arceau configuré sur le trottoir ou dans un local vélos depuis un téléphone, sans application : AR Quick Look sur iOS, Scene Viewer sur Android, et un code QR depuis un navigateur sur ordinateur.
• Des détails sur le modèle. Les hotspots ajoutent des repères avec des fenêtres d’information, par exemple le diamètre du tube ou le nombre de vélos que l’arceau peut accueillir, et Scenery modifie l’arrière-plan et la caméra.
• La visionneuse et le formulaire de commande synchronisés. Un configurateur intégré annonce chaque modification sous la forme d’un événement de navigateur, simplio3d:option.changed, afin qu’un site qui le souhaite puisse présélectionner la même finition et la même fixation dans son propre formulaire de commande avec quelques lignes de script.
• Le reste de la gamme, plus rapidement. Un premier configurateur pour un autre arceau peut être généré à partir d’une description écrite, et l’ajout groupé par catégorie transforme une gamme de finitions issue de la bibliothèque de matériaux partagée en ensemble de nuanciers, sans créer chaque nuancier manuellement.
• La vérification de chaque visionneuse. L’assistant IA peut auditer la couverture des options et la logique conditionnelle, par exemple vérifier que chaque finition dispose d’un matériau, et proposer des corrections. Un client IA tel que Claude, connecté à l’espace de travail via MCP avec une connexion limitée, peut effectuer les mêmes vérifications, tandis que les modifications de prix ou de SKU ne sont jamais proposées que comme changements en attente, qu’une personne applique ensuite.