Intégrer un widget de devis 3D à votre site

Vue d’ensemble

Le widget d’intégration Quote3D est une solution sans code/low-code qui vous permet de fournir instantanément des devis d’impression 3D à vos clients sur n’importe quel site web. Que vous utilisiez un site personnalisé, WordPress ou Shopify, vous pouvez combler le fossé entre la visualisation de modèles 3D et la passation de commandes de manière transparente.

Fonctionnalités clés

• Visualiseur de modèle 3D : Aperçu interactif des fichiers STL, OBJ, 3MF et STEP téléchargés.
• Tarification instantanée : Calcul automatisé des coûts basé sur vos propres profils de matériaux et d’imprimantes.
• Multi-technologie : prend en charge FDM, SLA, SLS, SLM et MJF, chacune avec sa propre logique de calcul.
• Thèmes personnalisés : Adaptez l’esthétique de votre marque avec le glassmorphism et des palettes de couleurs personnalisées.
• Zéro configuration pour les clients : Vos clients n’ont pas besoin de connaître les détails techniques de slicing ; tout est géré par Quote3D.
• Extensions de plateformes : paquets installables pour WooCommerce, PrestaShop, OpenCart, Magento et Wix, et code prêt à l’emploi pour Shopify, Webflow et Framer.
• Formulaires Simple et Avancé : demandez seulement la qualité d’impression et la solidité au lieu des réglages du slicer, affichez tous les paramètres d’impression ou laissez chaque client passer de l’un à l’autre. À régler dans l’éditeur du widget ou avec l’option mode du SDK.

Ce que vous pouvez faire

• Synchronisation eCommerce en temps réel : Utilisez les événements « Ajouter au panier » pour lier les devis directement au panier de votre boutique.
• Génération de prospects automatisée : Capturez automatiquement les exigences des clients et les données du modèle.
• Génération de miniatures : Capturez et stockez automatiquement des captures d’écran de modèles pour le suivi de la fabrication.
• Redirections souples : envoyez les clients vers une page d’arrivée précise après un calcul réussi. La cible de redirection doit être une URL http ou https.

Intégrations de plateformes : WooCommerce, Shopify, PrestaShop, OpenCart, Magento et plus

Le widget fonctionne sur n’importe quel site. Pour ces plateformes, nous fournissons des paquets installables ou du code prêt à l’emploi ; ce qui se passe dans le panier dépend de la plateforme :

• Quote3D pour WooCommerce
• Quote3D pour PrestaShop
• Quote3D pour OpenCart
• Quote3D pour Magento
• Quote3D pour Wix
• Quote3D pour Shopify

Autres plateformes et stacks sur mesure

• Wix : un paquet Velo qui vérifie le prix du devis dans le backend de votre site et l’ajoute au panier Wix Stores (forfait Premium ; utilise le service plugin eCommerce Catalog de Wix, actuellement en bêta). La ligne du panier affiche l’image du produit support, pas la miniature du modèle : Wix n’accepte que les images de son Media Manager.
• Squarespace : intégrez le widget avec un Code Block. Squarespace n’a pas d’API de panier : les commandes passent par une demande de devis, une facture ou un lien de paiement.
• PrestaShop 8 : un module installable qui vérifie le prix du devis sur votre serveur et l’ajoute au panier, avec le back-office Quote3D sous Sell : devis, file de production, stock de couleurs, rapports, téléchargement des modèles et réglages.
• OpenCart 3.0, 4.0.2.2+ et 4.1 : une extension installable qui vérifie le prix du devis sur votre serveur et l’ajoute au panier, avec un menu Quote3D dans l’administration : devis, file de production, stock de couleurs, rapports, téléchargement des modèles et réglages.
• Magento Open Source / Adobe Commerce 2.4 : un module qui vérifie le prix du devis sur votre serveur et l’ajoute au panier, avec un menu Quote3D dans l’administration : devis, file de production, stock de couleurs, rapports, téléchargement des modèles et réglages.
• Webflow : intégrez le widget avec un élément Code Embed. Les devis ne peuvent pas être ajoutés au panier Webflow Ecommerce.
• Framer : un composant de code React pour le widget. Framer n’a pas de panier intégré.
• Logiciel personnalisé : Peut être intégré à n’importe quel projet React, Vue ou Vanilla JS avec le SDK JS.

Principe de fonctionnement technique

Le Widget Quote3D fonctionne comme un Iframe haute performance ou un SDK JS moderne. Voici comment cela fonctionne :

• Fonctionnement isolé : Le widget s’exécute dans sa propre zone protégée (Iframe), ce qui évite de casser le style de votre site web.
• Communication en temps réel : le widget transmet les résultats de calcul à votre page via l’API 'postMessage'. Avec le SDK, les événements ne sont livrés qu’à l’origine ayant intégré le widget, au lieu d’être diffusés à tout écouteur.
• Redimensionnement automatique : Lors de l’utilisation du SDK, le widget ajuste automatiquement sa hauteur en fonction du contenu.

Utiliser l’API en complément du widget

Le widget gère son propre trafic d’API en interne — vous n’appelez pas ces routes vous-même. Pour lire ou exploiter les mêmes données depuis votre code, utilisez les points de terminaison publics v2 décrits dans Concepts clés, en visant https://api.quote3d.com/v2 avec un véritable jeton Bearer d’API plutôt qu’un identifiant de jeton. Pour réagir à l’ajout au panier d’une pièce configurée, abonnez-vous au webhook widget.added_to_cart au lieu d’appeler quoi que ce soit directement.

Sécurité et Vérification

Le widget appelle Quote3D depuis le navigateur : son jeton est donc visible par quiconque affiche le code source de la page. Créez un jeton widget dédié, limitez-le à la portée widget et liez-le aux origines de votre boutique. La rotation préserve les deux restrictions : un jeton widget renouvelé ne devient jamais un jeton à accès complet.

Fichiers importés et aperçus

Les fichiers importés via le widget sont stockés de manière chiffrée et ne sont pas accessibles publiquement. Le payload d’ajout au panier vous fournit thumbnailUrl, un lien absolu qui s’affiche depuis votre propre boutique : enregistrez-le exactement tel qu’il a été reçu. Le réécrire, en supprimer les paramètres de requête ou l’héberger sous votre propre domaine empêchera l’affichage de l’image.

Des prix auxquels votre boutique peut se fier

• Un jeton de portée widget ne peut pas fixer de prix. Un devis demandé avec lui ne conserve que les options choisies par le client dans le formulaire ; les prix des matériaux, des machines et des frais proviennent toujours de vos propres profils.
• Le webhook widget.added_to_cart indique le prix, la devise, la quantité et le matériau enregistrés avec le devis, et non ce que le navigateur a envoyé ; il est envoyé une seule fois par devis.
• Le message QUOTE3D_ADD_TO_CART que reçoit votre page provient du navigateur du client et peut y être modifié. Avant d’encaisser, vérifiez le prix à l’aide du webhook ou de GET https://api.quote3d.com/v2/quotes/{quote_id}.

Portée du jeton widget

Un jeton créé avec la portée widget ne peut atteindre que les points de terminaison réellement nécessaires à l’expérience intégrée. Tout le reste de l’API est refusé : un jeton récupéré dans le code source de votre page ne peut pas être retourné contre votre compte.

La portée widget autorise :

• Lire votre configuration d’imprimantes et de matériaux afin que le formulaire de devis affiche vos options.
• Demander un identifiant d’envoi et téléverser un fichier de modèle.
• Lire, et supprimer, le fichier qu’il a envoyé.
• Lancer un devis asynchrone pour ce fichier et interroger le travail correspondant.
• Lire un devis par son identifiant, enregistrer sa vignette et envoyer l’événement d’ajout au panier.

La portée widget refuse :

• La gestion des webhooks, afin qu’un jeton volé ne puisse pas rediriger votre flux d’événements vers un autre serveur.
• Les informations de compte, votre historique d’envois, les listes de devis, l’analytique, l’usage et les quotas.
• L’activation de licence et tout autre point de terminaison non listé ci-dessus.

Liaison d’origine

Listez les boutiques autorisées à utiliser le jeton, par exemple https://shop.example.com. Un jeton widget en exige au moins une : Quote3D vérifie la page qui intègre le widget au chargement de l’iframe et refuse l’affichage sur tout site absent de la liste.

Ce que la liaison d’origine attend de votre page

• Le contrôle lit le référent envoyé par votre navigateur au chargement de l’iframe du widget. C’est le comportement par défaut : rien n’est donc requis d’une page normale.
• Si votre page définit referrer-policy: no-referrer, l’origine ne peut pas être vérifiée et le widget ne se charge pas. Utilisez la valeur par défaut du navigateur (strict-origin-when-cross-origin) ou origin sur les pages qui intègrent le widget.
• Les appels directs à l’API sont contrôlés séparément : une requête envoyée depuis un navigateur sur un site hors liste est rejetée, tandis que les appels serveur à serveur, qui n’envoient pas d’en-tête Origin, ne sont pas concernés.

Ce qu’un jeton widget ne peut pas lire

Le point de terminaison de configuration ne renvoie que ce qu’affiche le formulaire de devis — noms d’imprimantes, volumes d’impression, matériaux, couleurs et limites de couche. Votre base de coûts (prix du matériau au kilogramme, coût horaire machine, multiplicateur de coût des supports, consommation électrique) n’est jamais transmise au navigateur ; la tarification est calculée sur le serveur.

Sessions visiteur

Un jeton widget est public : une limite comptée sur le jeton serait donc partagée par tous les clients de votre boutique, et un seul script pourrait l’épuiser et bloquer tous les autres. Le widget ouvre donc une courte session visiteur la première fois qu’un client téléverse un fichier, et les étapes qui ont un coût sont comptées par session.

• Le widget intégré s’en charge lui-même. Le code d’intégration standard ne nécessite aucune modification.
• Le téléversement d’un fichier, le lancement d’un devis, l’enregistrement d’une vignette et l’événement d’ajout au panier nécessitent une session. La lecture de votre configuration, le suivi d’une tâche et la récupération d’un devis n’en nécessitent pas : un long calcul ne laisse donc jamais un client en plan.
• Une session dure 30 minutes. Dans chaque session, un client peut effectuer par heure jusqu’à 30 téléversements, 15 devis, 30 enregistrements de vignette et 20 événements d’ajout au panier. Une adresse IP peut ouvrir jusqu’à 20 sessions par heure pour un même jeton.
• Ces règles ne s’appliquent qu’aux jetons dotés de la portée widget. Un jeton sans portée est traité comme une intégration serveur et ne bénéficie d’aucune de ces protections ; le jeton de votre boutique doit donc toujours avoir la portée widget.
• Si vous appelez vous-même ces points de terminaison avec un jeton de portée widget, ouvrez d’abord une session : obtenez un défi avec GET https://api.quote3d.com/v2/widget/challenge, trouvez le nombre compris entre 0 et maxnumber pour lequel le SHA-256 du sel suivi de ce nombre est égal au défi, puis envoyez-le à POST https://api.quote3d.com/v2/widget/session. Envoyez la valeur renvoyée dans l’en-tête X-Widget-Session. Une session absente ou expirée reçoit une réponse 401 avec le code d’erreur AUTH_005 ; ouvrez une nouvelle session et relancez l’appel.
• Le trafic du widget dispose de son propre quota horaire, distinct de celui de votre intégration serveur : une boutique très fréquentée et votre propre backend ne se gênent donc pas mutuellement. Vous pouvez aussi fixer dans le tableau de bord une limite quotidienne de devis pour le widget ; une fois atteinte, les clients sont invités à réessayer le lendemain et vous recevez un e-mail.

Les jetons créés sans portée conservent un accès complet : les intégrations existantes continuent donc de fonctionner sans changement. Ajouter une portée est la façon d’inscrire un jeton dans la restriction.