Intégrer le configurateur dans WordPress

Avec l'extrait HTML, votre configurateur configento.app s'affiche sur n'importe quelle page WordPress – comme outil de devis ou de demande sur votre site. Aucune extension n'est nécessaire : une balise <script> et un <div> dans le bloc HTML personnalisé suffisent. Les visiteurs composent leur produit, voient le prix immédiatement et vous envoient leur demande via le bouton d'action – par e-mail, en PDF ou vers votre propre URL.

Plugin WooCommerce au 4e trimestre 2026 : pour les boutiques WooCommerce, nous lançons une extension dédiée au quatrième trimestre 2026. Elle ajoute la configuration au panier avec un prix vérifié. D'ici là, l'extrait fonctionne aussi sur les pages WooCommerce, mais uniquement comme outil de demande – voir WooCommerce.

Ce dont vous avez besoin

• Un accès à configento.app – l'extrait HTML est inclus dès le forfait Basic ; l'essai de 14 jours suffit pour tester.
• Au moins un composant publié. L'extrait affiche toujours la dernière version publiée.
• Un compte utilisateur WordPress avec le rôle Administrateur ou Éditeur – voir Qui peut ajouter des scripts.

Étape 1 : préparer l'extrait et le domaine

1. Dans l'administration, ouvrez Paramètres → Intégrations, cliquez sur Générer dans la carte HTML5 (V3 Bêta) et copiez l'Extrait JavaScript V3 avec Copier.
2. Sous Paramètres → Domaines, saisissez le domaine de votre site WordPress sans https://, p. ex. www.monsite.fr. Si vous testez sur un site de préproduction, saisissez aussi son domaine.
3. Dans l'extrait, remplacez YOUR_TEMPLATE_ID par l'ID de votre composant. Il figure dans la vue d'ensemble des composants, p. ex. ID 10722.

Le détail des étapes se trouve dans Intégration extrait HTML.

Étape 2 : insérer l'extrait dans WordPress

Dans l'éditeur de blocs

1. Ouvrez la page ou l'article dans l'éditeur.
2. Ajoutez le bloc HTML personnalisé à l'endroit souhaité (via + ou en tapant /html).
3. Collez l'extrait dans le bloc.
4. Enregistrez la page et ouvrez-la dans le navigateur.

N'utilisez pas le bloc Paragraphe ni un autre bloc de texte : WordPress y supprime la balise <script>.

Dans l'éditeur classique

Passez à l'onglet Texte en haut à droite (pas Visuel) et collez-y l'extrait.

Avec un constructeur de pages

Les constructeurs de pages ont leur propre élément pour le code HTML, par exemple le widget HTML d'Elementor ou le module Code de Divi. Collez-y l'extrait. Certains constructeurs n'affichent le configurateur que dans l'aperçu ou sur la page publiée, pas en mode édition.

Sur plusieurs pages

La balise <script> ne doit figurer qu'une fois par page. Si une page contient plusieurs configurateurs, chacun n'a besoin que de son propre <div data-configento …>. Si vous utilisez le même configurateur sur de nombreuses pages, enregistrez le bloc HTML comme composition synchronisée – vous le modifiez alors à un seul endroit.

Qui peut ajouter des scripts

WordPress n'autorise les balises <script> qu'aux utilisateurs disposant du droit au HTML non filtré. Sur un site normal, ce sont les rôles Administrateur et Éditeur. Si un Auteur ou un Contributeur enregistre la page, WordPress supprime le script – le configurateur ne s'affiche alors pas. Dans un réseau WordPress (multisite), seuls les Super administrateurs en ont le droit.

Si une personne sans ce droit modifie une page contenant l'extrait, le script peut être perdu à l'enregistrement. Vérifiez ensuite la page dans le navigateur.

Prix, récapitulatif et image

Sans autres attributs, l'extrait n'affiche ni prix ni récapitulatif. Le plus simple sur une page WordPress :

data-configento-embed-mode="admin-preview"

Le titre, la barre de prix et le récapitulatif s'affichent alors dans le configurateur lui-même, comme dans l'aperçu de l'administration. Pour placer le prix ou l'image ailleurs, à côté d'un titre par exemple, créez les éléments cibles dans le même bloc HTML – voir Intégration extrait HTML.

Vous adaptez l'apparence à votre thème avec du CSS : Personnaliser le design (CSS).

Sites multilingues

Si votre site est multilingue grâce à une extension de traduction, chaque langue a sa propre page. Indiquez-y la langue correspondante dans l'extrait, p. ex. data-configento-locale="fr_FR" sur la page française. Vous pouvez aussi laisser le visiteur choisir la langue dans le configurateur – voir Intégration extrait HTML.

Recevoir les demandes

Sur un site sans boutique, le bouton d'action conclut la configuration. Il vous envoie la demande par e-mail et, si vous le souhaitez, une copie avec PDF au visiteur, génère un devis PDF ou transmet la configuration à votre propre URL. Le Captcha protège contre le spam.

Pour reprendre la demande dans un formulaire existant, lisez la sélection via l'interface JavaScript.

Optimisation et mise en cache

La mise en cache des pages ne pose pas de problème : l'extrait est du HTML statique et le configurateur charge lui-même ses données.

Les extensions qui retardent, regroupent ou diffèrent le JavaScript peuvent en revanche ralentir le configurateur, voire l'empêcher de se charger – il n'apparaît alors qu'après un mouvement de souris ou pas du tout. Dans ces extensions, ajoutez configento.js ou cloud.configento.app à la liste d'exclusion JavaScript.

WooCommerce

Pour WooCommerce, nous lançons une extension dédiée au quatrième trimestre 2026. Elle affiche le configurateur sur la page produit, vérifie le prix sur le serveur et ajoute la configuration avec son supplément au panier WooCommerce – comme nos plugins pour Magento, Shopware, Shopify et PrestaShop.

D'ici là, vous pouvez aussi utiliser l'extrait dans une boutique WooCommerce, par exemple dans la description du produit. Il y affiche le configurateur et le prix, mais n'ajoute rien au panier. Utilisez-le en attendant comme outil de demande avec le bouton d'action.

L'ancien plugin WooCommerce du cloud classique n'est plus développé.

Dépannage

D'autres cas figurent dans la section Dépannage de l'Intégration extrait HTML.

Étapes suivantes

• Intégration extrait HTML
• Le bouton d'action
• Personnaliser le design (CSS)
• Créer votre premier composant