Webflow
Un configurateur de produits Webflow en un seul embed
Ajoutez un configurateur de produits 3D à Webflow avec un élément Embed, sur une page classique ou un template CMS. Publication, placement, champs CMS et pièges.
Aucune extension à installerCompatible avec votre thèmeLes demandes arrivent dans votre pipeline
Mise en place
Ajoutez-le à Webflow en quelques minutes
- Créez votre produit, ou ouvrez-le dans votre administration, et copiez sa ligne d’intégration.
- Dans le Webflow Designer, ouvrez le panneau Add et glissez un élément Embed (Code Embed selon les versions) dans la section prévue pour le configurateur.
- Collez la ligne dans l’éditeur de code et enregistrez.
- Réglez la section parente sur toute la largeur et laissez sa hauteur en auto.
- Publiez sur votre domaine de test webflow.io, testez, puis publiez sur votre propre domaine.
Webflow n’exécute pas les scripts personnalisés dans le Designer : vous y voyez un espace réservé. C’est normal. Les fonctions de code personnalisé dépendent de votre forfait Webflow ; vérifiez-le avant de commencer.
<script src="https://store.nextconfigurator.com/static/embed.js" data-calipy="https://store.nextconfigurator.com/p/YOUR-STORE/embed/YOUR-PRODUCT"></script>Exemple. Votre propre ligne se trouve sur la page produit de votre administration, sous « Intégrer sur d'autres sites », et sur la page affichée après la création.
Pour ajouter un configurateur de produits 3D à Webflow, glissez un élément Embed sur la page ou le template CMS, collez la ligne d'intégration et publiez ; le configurateur s'affiche sur le site publié, pas dans le Designer. Les demandes de devis arrivent dans votre pipeline Next Configurator.
De quoi il s’agit
Un configurateur de produits Webflow est un outil de conception 3D dans votre mise en page Webflow, où le client dimensionne un produit, choisit ses options et envoie une demande. Les sites Webflow sont souvent soignés par un designer, et l’intégration s’y prête bien : un élément dans votre propre section, habillé comme vous le voulez, sans toucher au reste du site.
Publication
Testez d’abord sur le domaine de test. Si vous avez limité l’intégration du produit à vos propres sites, ajoutez l’adresse webflow.io en plus de votre domaine, sinon le test reste vide. Après publication, ouvrez la page déconnecté et envoyez une demande de test.
Placement sur les templates CMS
Si vos produits sont dans une CMS Collection, par exemple une fiche par modèle de pergola bioclimatique, placez l’élément Embed sur la page template de la Collection. Sur une page template, l’éditeur Embed peut insérer des champs CMS dans le code. Ajoutez à la collection un champ texte contenant l’URL d’intégration du produit et insérez-le dans l’attribut data-calipy : chaque fiche charge alors son propre configurateur depuis un seul template.
Laissez le champ vide pour les fiches sans configurateur et masquez la section grâce à la visibilité conditionnelle.
Ce que voit le client
Le configurateur s’affiche dans votre design. Le client règle largeur et avancée de la pergola, choisit lames orientables ou toit fixe, une teinte RAL et l’éclairage, voit le modèle en 3D et en réalité augmentée sur son téléphone et envoie sa demande. Le prix s’affiche en direct, en “à partir de” ou pas du tout, selon le produit.
Où arrivent les demandes
Les demandes arrivent dans votre pipeline Next Configurator, pas dans les soumissions de formulaires Webflow. Vous transformez chacune en devis numéroté avec variantes et page de devis en ligne, et les relances automatiques suivent les demandes ouvertes.
Points à vérifier
- Hauteurs fixes. Une section à hauteur fixe ou en overflow masqué coupe le configurateur. Utilisez auto.
- Bandeaux de cookies. Autorisez le configurateur comme script fonctionnel.
- Plusieurs pages. Un Embed par configurateur ; sur les templates CMS, un champ par fiche.
Vos questions, nos réponses
Vous hésitez encore ? Nous vous le montrons avec votre propre produit.
Réserver une démonstrationPourquoi je ne vois pas le configurateur dans le Designer ?
Webflow n’exécute pas les scripts personnalisés dans le Designer. Publiez et vérifiez le site de test ou en ligne.
Un seul template CMS peut-il servir tous mes produits ?
Oui. Stockez l’URL d’intégration de chaque produit dans un champ CMS et insérez-la dans le code Embed de la page template.
Cela touche-t-il à mes interactions Webflow ?
Non. Le configurateur tourne dans son propre cadre à l’intérieur de l’élément et laisse vos interactions intactes.
Puis-je styliser le configurateur dans Webflow ?
Vous stylisez la section qui l’entoure dans Webflow. Les couleurs et polices du configurateur viennent des réglages de votre boutique Next Configurator.
En ligne en trois minutes. À vous pour 499 € par mois.
14 jours gratuits, puis un abonnement tout compris. En ligne en trois minutes environ. Résiliable chaque mois.