Intégrer un widget de devis 3D à votre site
Intégrez directement le puissant moteur de devis 3D de Quote3D dans votre propre site web ou plateforme de commerce électronique.
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 et 3MF 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 les technologies FDM, SLA et SLS avec une logique de calcul spécifique.
- 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.
- Plugins pour plateformes : Plugins prêts à l'emploi pour WooCommerce et Shopify.
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.
Premiers pas
Prêt à intégrer ? Vous pouvez personnaliser le thème de votre widget, la langue, la couleur, le comportement de redirection et la persistance de session directement depuis votre tableau de bord, puis générer le code d'intégration ou les extraits de code de plateforme dont vous avez besoin.
Accéder aux paramètres du widgetNote sur les prix
Les prix sont mis à jour complètement automatiquement dans WooCommerce. Dans les systèmes fermés comme Shopify, PrestaShop et OpenCart, pour garantir que le prix est automatiquement 'écrasé' au niveau du panier, il est recommandé de définir un produit à 1 unité (par exemple, 1 $) dans votre boutique et d'envoyer la quantité autant que le prix, ou d'utiliser un hook de mise à jour du prix via l'API de la plateforme. Le widget transmet entièrement tous les détails techniques calculés et le prix à votre système en tant que 'Propriété'.
Intégrations de plateformes : Shopify, WooCommerce et plus
Le widget Quote3D est construit avec des technologies web modernes et fonctionne sur pratiquement n'importe quelle plateforme. Nous avons des solutions d'intégration prêtes à l'emploi pour les systèmes populaires :
Extension WooCommerce de devis d'impression 3D
Installez l'extension PHP, collez votre jeton widget, et le prix calculé arrive directement dans le panier WooCommerce en métadonnée de ligne — sans redéfinition manuelle du prix.
Bloc d'application Shopify pour devis 3D
Déposez le bloc d'application dans n'importe quel modèle Liquid depuis l'éditeur de thème. Comme Shopify fixe les prix au niveau du produit, associez-le au modèle de produit à 1 unité décrit plus bas afin que le prix proposé parvienne intact au paiement.
Autres plateformes et stacks sur mesure
- Wix : Intégration avancée via Velo et Éléments personnalisés.
- Squarespace : Installation rapide via des blocs de code.
- PrestaShop : Structures compatibles avec le moteur de template Smarty.
- OpenCart : Prise en charge des thèmes modernes basée sur Twig.
- 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.
Appeler l'API depuis votre propre code
L'API v2 ne répond aux requêtes cross-origin que pour l'origine Quote3D configurée. Appelez-la depuis votre serveur plutôt que depuis le JavaScript de votre boutique ; le widget lui-même s'exécute sur une origine Quote3D dans l'iframe, ses propres requêtes ne sont donc pas concernées.
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.
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. Quote3D vérifie la page qui intègre le widget au chargement de l'iframe et refuse de s'afficher sur tout site absent de la liste. Laissez le champ vide et le jeton fonctionne partout.
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 refuse de se charger. Utilisez sur ces pages un jeton sans restriction d'origine.
- 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.
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.