Sur cette page · 6 parties
- L'intégration tient en une ligne collée dans une page existante, sans refonte.
- Iframe pour le canevas 3D, petit script pour le pont vers la page hôte.
- Vérifiez que les conversions remontent à vos pixels Google Ads et Meta.
- Domaine propre si vous remplacez votre site, intégration s'il fonctionne déjà.
Intégrer un configurateur sur votre site existant revient à coller une ligne de code dans une page, sans changer de plateforme ni d’hébergement. Cela fonctionne de la même façon sur WordPress, Shopify et Webflow. Ce guide explique la différence entre iframe et script, comment les conversions remontent jusqu’à vos pixels publicitaires, les étapes par plateforme et quand une boutique sur votre propre domaine est le meilleur choix.
Ce que signifie « intégrer » ici
Une intégration est un extrait de code que vous collez dans une page existante (un article WordPress, une page produit Shopify, une page Webflow) qui charge le configurateur à l’intérieur de cette page, stylisé pour s’insérer dans votre mise en page existante. Le client ne remarque jamais qu’il a quitté votre site, car ce n’est pas le cas : le configurateur tourne dans un cadre sur votre page. C’est différent d’une boutique à domaine propre, où le configurateur est le site entier sur son propre domaine ou sous-domaine (couvert plus bas).
Iframe contre script : ce qui diffère réellement
Deux approches techniques sont appelées « intégration ».
Un iframe charge le configurateur comme une page-dans-une-page : vous collez une balise <iframe src="..."> et le navigateur affiche un document indépendant à l’intérieur de ce rectangle. C’est simple, cela isole les conflits de style (le CSS du configurateur ne peut pas entrer en conflit avec celui de votre thème et vice versa), et c’est l’approche la plus courante pour une application 3D. Le compromis : par défaut, un iframe est un contexte cloisonné, donc tout ce qui a besoin de connaître la page environnante, comme déclencher un pixel de tracking censé paraître venir de votre site, a besoin d’un pont explicite.
Une intégration par script injecte une balise <script> qui construit ensuite l’interface du configurateur directement dans un élément conteneur de votre page, en utilisant le DOM de votre propre page. Cela peut sembler plus « natif » à la page et simplifie certaines intégrations de tracking puisque le code tourne dans le même contexte que les propres scripts de votre site. Le compromis : cela a plus de surface pour entrer en conflit avec le CSS ou le JavaScript de votre thème, donc une intégration par script bien construite doit délimiter soigneusement ses styles.
La plupart des plateformes de configurateur, Next Configurator inclus, utilisent par défaut un iframe pour le canevas 3D lui-même (pour l’isolation et la performance) avec un petit script compagnon (embed.js) qui gère le pont. Transmettant les événements de configuration et les données de conversion vers la page hôte pour que vos analyses et pixels publicitaires existants continuent de se déclencher correctement. Vous n’avez pas à choisir entre les deux ; l’extrait d’intégration du prestataire devrait gérer les deux parties pour vous.
Le tracking à travers l’intégration
C’est la partie qu’on oublie. Si un client configure une pergola et demande un devis à l’intérieur d’un iframe, et que votre pixel Google Ads ou Meta vit sur la page hôte (votre site WordPress ou Shopify), ce pixel doit savoir que la conversion a eu lieu. Sinon vos plateformes publicitaires ne voient jamais l’événement « lead » et vos campagnes semblent ne pas convertir, alors même que les demandes arrivent.
Une intégration bien construite gère cela avec un pont de messagerie : le configurateur, qui tourne dans l’iframe, rapporte les événements (vue → personnalisation → ajout → lead/demande → inscription) au script d’intégration, qui déclenche ensuite les propres pixels de la page hôte en utilisant les attributs que vous avez définis sur la balise d’intégration (par exemple, un attribut data-google-ads="AW-.../label" portant votre libellé de conversion). Ainsi, le pixel de la plateforme publicitaire se déclenche comme si cela s’était passé directement sur votre page : parce que, à des fins de tracking, c’est le cas.
Avant d’intégrer où que ce soit, confirmez avec votre prestataire : l’extrait d’intégration transmet-il les événements de conversion à mes pixels existants, ou dois-je configurer le tracking deux fois (une fois pour mon site, une fois dans leur plateforme) ? Si c’est le second cas, le reporting de vos campagnes publicitaires sous-comptera.
Étapes par plateforme
WordPress. Ajoutez un bloc HTML personnalisé (éditeur de blocs) ou un widget HTML personnalisé à la page ou à l’article où vous voulez le configurateur, collez l’extrait d’intégration, publiez (détails sur notre page WordPress). Si votre thème restreint le HTML brut à certains endroits, une extension qui autorise les blocs HTML/script arbitraires résout le problème. Aucun accès serveur nécessaire.
Shopify. Modifiez le modèle concerné (généralement un modèle de page produit ou une page autonome) dans l’éditeur de thème, ajoutez une section « Liquid personnalisé » ou « HTML personnalisé », collez l’extrait. Comme les pages produit Shopify portent leur propre logique de prix et de panier, la plupart des vendeurs pointent le configurateur vers une page dédiée plutôt que de remplacer entièrement la page produit, puis y renvoient depuis les listes de produits. Voir notre page Shopify.
Webflow. Ajoutez un élément Embed à la page, collez l’extrait dans son panneau HTML, publiez. L’élément d’intégration de Webflow se comporte comme un conteneur cloisonné, donc c’est un ajout simple et direct. Voir notre page Webflow.
Dans les trois cas, les étapes ont la même forme : trouver la page, ajouter un bloc HTML/intégration brut, coller un extrait, publier. Aucun changement de code ailleurs sur le site, aucun nouvel hébergement, aucun changement DNS.
L’alternative de la boutique à domaine propre
Plutôt que d’intégrer sur un site existant, certains vendeurs font tourner le configurateur comme boutique entière sur son propre domaine ou sous-domaine (par exemple boutique.votredomaine.com, ou le domaine principal lui-même si la plateforme de configurateur prend en charge une boutique complète avec un constructeur de pages, pas seulement un widget de configurateur). C’est une décision différente de iframe-contre-script. C’est « est-ce que je veux un widget sur mon site existant, ou une boutique complète qui est mon site ».
Le domaine propre a du sens si vous remplacez de toute façon un site dépassé, voulez les pages intégrées de la plateforme (constructeur de pages, pages de devis, avis, galerie de projets) plutôt que juste le widget de configurateur, ou voulez un seul système gérant tout depuis la page d’accueil jusqu’au devis. L’intégration a du sens si votre site existant fonctionne déjà pour la marque et le contenu et que vous avez seulement besoin d’y ajouter le configurateur lui-même.
Next Configurator prend en charge les deux : un extrait d’intégration pour un site WordPress, Shopify ou Webflow existant, ou une boutique complète sur votre propre domaine construite dans le constructeur de pages. Voir l’intégration sur votre site et le configurateur 3D.
Ce qu’il faut vérifier avant d’intégrer
- Le canevas 3D se charge de façon différée, sans ralentir le reste de la page.
- L’intégration fonctionne bien sur mobile, où arrive une grande part du trafic.
- L’intégration respecte le consentement aux cookies de votre site avant de charger les scripts de tracking.
- Les conversions remontent aux pixels de la page hôte, sans configurer le tracking deux fois.
- Plusieurs intégrations sur différentes pages (une par produit) sont prises en charge.
Pour la décision d’achat plus large dans laquelle cela s’inscrit, voir notre guide d’achat d’un configurateur 3D. Pour essayer une intégration sur une page de test, créez votre configurateur : vous obtenez un extrait en libre-service en quelques minutes. Les conditions sont sur notre page tarifs.
