Un configurateur de produit pour votre site web, intégré en une ligne de code
CutOptim Configurator est un configurateur de produit pour panneaux et plaques qui s’exécute dans les pages de votre propre boutique. Vous collez une balise script et un élément ; le configurateur s’ouvre dans la page, en fenêtre contextuelle, en panneau latéral ou sur sa propre page, et renvoie la commande à votre boutique.
Quatre façons de l’ouvrir
Choisissez l’apparence du configurateur ; le même code sert les quatre modes, et le réglage de la boutique décide du mode par défaut.
- — Dans la page (inline) : le configurateur fait partie de la fiche produit.
- — Fenêtre contextuelle (modal) : un bouton comme « Découper ce panneau sur mesure » l’ouvre par-dessus la page.
- — Panneau latéral (drawer) : il glisse depuis le côté et garde la fiche produit visible.
- — Sur sa propre page : un configurateur en pleine page qui ramène le client dans votre panier quand il commande.
Quatre façons de l’afficher dans votre boutique
La même ligne de code – vous choisissez comment il s’ouvre.
Un script et un élément
Le configurateur est un composant web : une balise script le charge, et un élément <cutoptim-configurator> avec votre clé publique le place dans la page. Un bouton portant data-cutoptim-open ouvre une fenêtre contextuelle ou un panneau latéral, et peut présélectionner le panneau de la fiche produit que le client consulte.
<script type="module" src="https://cfg.cutoptim.com/embed/assets/cutoptim-configurator.js"></script>
<button data-cutoptim-open="#cut">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="pk_your_publishable_key" lang="fr">
</cutoptim-configurator>Votre marque, vos textes
Les couleurs, les polices, les angles et le thème clair ou sombre suivent votre charte. Des ancres ::part nommées permettent à votre feuille de style d’ajuster les boutons, les cartes et les champs, et chaque texte visible par le client se modifie langue par langue. Le configurateur s’exécute dans sa propre couche isolée : les styles de votre page ne le cassent pas, et lui ne casse pas votre page.
La commande revient dans votre boutique
Quand le client commande, la page reçoit un événement cutoptim:order avec la commande et son devis signé, pour que votre boutique la place dans le panier. Votre serveur peut vérifier la signature sur /cfg/v1/quote/verify avant d’accepter le prix. En mode page dédiée, le client est renvoyé vers votre panier avec sa commande.
Sécurisé par défaut
Votre clé ne fonctionne que sur les adresses web que vous listez : un autre site ne peut donc pas intégrer votre configurateur avec vos prix. Les prix sont calculés et signés de notre côté, jamais dans le navigateur.
Avant de l’intégrer, ouvrez la boutique de démonstration : elle montre le code exact de chacune des quatre façons d’ouvrir le configurateur.
Questions fréquentes
Comment ajouter le configurateur à mon site web ?
Fonctionne-t-il avec ma plateforme de boutique ?
Puis-je l’aligner sur l’apparence de ma boutique ?
Ralentira-t-il ma fiche produit ?
Quelqu’un d’autre peut-il intégrer mon configurateur ?
En savoir plus sur le configurateur
Le configurateur de découpe sur mesure pour votre boutique en ligne : plan de coupe et prix en direct, commandes directement dans votre boutique.
Saisissez des pièces dans une boutique de démonstration et regardez le plan de coupe et le prix évoluer à chaque saisie.
Au panneau, au m², au mètre de coupe, chant, usinages, TVA et minimums : vos tarifs, en direct.
Vérifiez le devis signé et le webhook signé sur votre propre serveur, avec des exemples Node et PHP.
Partez d’un caisson, d’une étagère ou d’un dressing : les pièces, le plan et le prix suivent les dimensions.
Négociants en panneaux, ateliers de découpe et boutiques de plaques : les clients commandent en ligne, avec un plan en direct et vos prix.
Un bouton de découpe sur mesure sur vos produits WooCommerce ; seul un devis vérifié devient une ligne de panier.
Intégrer, vérifier sur votre serveur, recevoir le webhook signé : trois étapes.
Vous n’avez besoin que du moteur de découpe ? Voir l’Engine API
Mentions légalesConditions du configurateur (EN) ·Accord de traitement des données (EN) ·Notice de confidentialité pour les acheteurs ·Licences tierces (EN)