Intégration extrait HTML

Dernière mise à jour: 01. octobre 2026

Cet article explique comment intégrer le configurateur par extrait HTML dans votre site web ou votre CMS — sans système de boutique. Vous n'avez pas besoin d'un développeur : une balise <script> et une <div> avec quelques attributs suffisent.

Quand l'extrait HTML est-il le bon choix ?

L'extrait HTML convient si vous :

n'exploitez pas de boutique Magento, Shopware ou Shopify
souhaitez utiliser le configurateur sur un site comme outil de devis ou de présentation produit
utilisez un CMS tel que WordPress, TYPO3, Joomla ou Jimdo

Pour ces trois systèmes de boutique, des plugins prêts à l'emploi existent — ils apportent la liaison au panier et la reprise du prix, ce que l'extrait seul ne peut pas faire.

Étape 1 : activer l'intégration HTML5

Dans le backend, sous Paramètres → Intégrations, vous trouvez la carte HTML5 (V3 Beta). Activez-la si ce n'est pas déjà fait. Elle contient aussi l'extrait prêt à l'emploi avec votre identifiant client et votre jeton — pré-rempli, vous n'avez qu'à remplacer l'identifiant du composant.

À côté se trouve la carte plus ancienne, nommée simplement HTML5. Elle appartient à la génération précédente du configurateur ; la section « L'ancien extrait » plus bas explique laquelle vous concerne.

Étape 2 : autoriser votre domaine

Sous Paramètres → Domaines, saisissez le ou les domaines sur lesquels le configurateur doit fonctionner. Saisissez-les sans protocole, donc www.monsite.fr ou monsite.fr.

Ce n'est pas une formalité : votre jeton figure dans le code source de la page et reste donc lisible par tous. Ce qui le protège, c'est précisément cette liste — une requête venant d'un domaine non inscrit reçoit la réponse « Requesting host not authorized », et le configurateur reste vide. Si votre site tourne sur un domaine de préproduction, inscrivez-le également.

Étape 3 : trouver l'identifiant du composant

L'identifiant de votre composant apparaît dans la vue d'ensemble des composants — juste sous le nom du composant (par ex. « ID 10722 »). C'est cet identifiant qui va dans l'extrait.

Étape 4 : l'extrait

<script src="https://cloud.configento.app/configento-v3/configento.js" defer></script>

<div
    data-configento
    data-component-id="YOUR_TEMPLATE_ID"
    data-configento-customer="VOTRE-ID-CLIENT"
    data-configento-token="VOTRE-JETON"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="20"
    data-configento-locale="fr_FR"
></div>

Fonctionnement : au chargement, le script cherche chaque élément portant l'attribut data-configento et y construit un configurateur. Tout le reste est lu dans les attributs data-configento-* de ce même élément.

La <div> peut se placer partout où votre CMS autorise du HTML — le script lui-même ne s'insère qu'une seule fois par page, même si plusieurs configurateurs s'y trouvent.

Tous les attributs en un coup d'œil

Bases

Attribut	Signification
`data-configento`	Marque l'élément comme emplacement du configurateur. Sans valeur.
`data-component-id`	Quel composant charger.
`data-configento-customer`	Votre identifiant client. Pré-rempli dans l'extrait du backend.
`data-configento-token`	Votre jeton. Pré-rempli dans l'extrait du backend.
`data-configento-cloud-base-url`	`cloud.configento.app` — à reprendre tel quel.
`data-configento-tax-rate`	Taux de TVA pour l'affichage du prix, par ex. `20`.
`data-configento-locale`	Langue, par ex. `fr_FR`. Pilote les textes du composant et les libellés du configurateur.

Placer les éléments vous-même

Attribut	Signification
`data-configento-price-mount`	Sélecteur CSS : le prix courant s'affiche là. Sans cet attribut, l'extrait n'affiche aucun prix.
`data-configento-summary-mount`	Sélecteur CSS : le récapitulatif s'affiche là. Sans l'attribut, il n'y en a pas.
`data-configento-summary-open`	Récapitulatif déplié au départ (`true`/`false`). N'agit qu'avec `summary-mount`.
`data-configento-combined-image-mount`	Sélecteur CSS : l'image produit composée s'affiche là.

Langues

Attribut	Signification
`data-configento-language-select`	Demande sa langue au visiteur avant l'affichage du configurateur. Sans valeur.
`data-configento-languages`	Restreint les langues proposées, par ex. `fr_FR, en_GB`.
`data-configento-content-locale`	Langue des seuls textes du composant, séparée de l'interface. Rarement nécessaire.

Rarement utilisés

Attribut	Signification
`data-configento-config`	Tous les réglages sous forme d'objet JSON plutôt qu'en attributs séparés.
`data-configento-currency`	Code de devise lorsqu'il diffère de celui du composant.
`data-configento-asset-base-url`	Autre emplacement pour les images.
`data-configento-token-endpoint`	Adresse où le configurateur va chercher lui-même des jetons de courte durée. Utilisé par les plugins de boutique ; avec l'extrait HTML, il reste vide.

Fonctions supplémentaires

Placer le prix et le récapitulatif — important

Sans indication supplémentaire, l'extrait HTML n'affiche ni prix ni récapitulatif. C'est volontaire : sur un site web, ces deux éléments appartiennent à la mise en page, pas à un encadré étranger au milieu. C'est donc vous qui décidez où ils apparaissent — mais il faut le faire, sinon ils manquent.

Vous créez pour cela vos propres éléments et les désignez par un sélecteur CSS :

<div id="mon-image"></div>
<h1>Mon produit</h1>
<div id="mon-prix"></div>

<div
    data-configento
    data-component-id="10722"
    data-configento-customer="VOTRE-ID-CLIENT"
    data-configento-token="VOTRE-JETON"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="20"
    data-configento-locale="fr_FR"
    data-configento-price-mount="#mon-prix"
    data-configento-combined-image-mount="#mon-image"
></div>

Le prix et l'image s'y actualisent en direct à chaque choix. Si le sélecteur ne trouve aucun élément, l'emplacement reste simplement vide — une faute de frappe ne casse pas le configurateur, elle vous coûte seulement l'affichage.

L'image produit composée se comporte autrement que le prix et le récapitulatif : elle apparaît aussi sans combined-image-mount, à l'intérieur du configurateur. Le sélecteur ne fait que la déplacer.

Pour le récapitulatif, même principe avec data-configento-summary-mount. data-configento-summary-open détermine alors s'il démarre déplié — seul, sans summary-mount, cet attribut ne fait rien, puisqu'il n'y a aucun récapitulatif à déplier.

Demander la langue au préalable

Si votre composant existe en plusieurs langues, le configurateur peut d'abord demander au visiteur laquelle il souhaite. Il affiche alors une tuile par langue, avec son drapeau et son nom dans cette langue ; après le clic, le configurateur démarre dans cette langue — textes du composant comme libellés.

<div data-configento
     data-component-id="10722"
     data-configento-language-select></div>

Les langues proposées sont lues dans le composant lui-même : la liste ne peut donc pas s'écarter de ce qui est réellement traduit. Si un site donné ne doit en montrer que deux, nommez-les explicitement :

data-configento-language-select
data-configento-languages="fr_FR, en_GB"

Bon à savoir :

Avec une seule langue, aucun choix n'apparaît — un clic qui ne demande rien ne serait qu'un obstacle.
Le choix vaut pour la session : qui change de page et revient n'est pas réinterrogé. Une visite le lendemain recommence par la question.
Le choix du visiteur prime sur data-configento-locale. Cet attribut est votre valeur par défaut, le choix est sa décision.

À essayer : démo multilingue.

Plusieurs configurateurs sur une page

Vous pouvez placer autant d'éléments data-configento que vous voulez sur une page — chacun charge son composant et calcule de façon indépendante. Le script ne s'insère malgré tout qu'une seule fois.

Donnez dans ce cas à chaque élément son propre id, afin de pouvoir les distinguer ensuite en JavaScript, et faites pointer price-mount et consorts vers des cibles différentes.

Les réglages en JSON

Si votre CMS rend pénible la saisie de nombreux attributs sur un même élément, vous pouvez les regrouper :

<div data-configento data-configento-config='{
    "componentId": "10722",
    "customer": "VOTRE-ID-CLIENT",
    "token": "VOTRE-JETON",
    "cloudBaseUrl": "cloud.configento.app",
    "taxRate": "20",
    "uiLocale": "fr_FR"
}'></div>

Attention aux apostrophes à l'extérieur, afin que les guillemets du JSON soient préservés.

API JavaScript

Pour votre propre logique sur la page — un bouton « Demander un devis » intégré à votre design, par exemple — le configurateur expose une petite interface sous window.Configento :

<script>
  Configento.ready.then(function () {
      var conf = Configento.first();

      // Réagir à chaque changement de prix
      conf.on('price', function (p) {
          console.log('Nouveau total :', p.total);
      });

      // Lire la sélection actuelle
      console.log(conf.getSelections());
  });
</script>

Configento.ready — une promesse résolue dès que les configurateurs de la page sont en place. Votre code se place à l'intérieur ; avant cela, il n'y a rien à interroger.
Configento.first() — le premier configurateur de la page. S'il y en a plusieurs : Configento.forElement('#mon-id').
on('change', …) — chaque modification de la sélection.
on('price', …) — chaque changement de prix, avec le total et l'écart par rapport au précédent.
getSelections(), getState(), getPriceBreakdown() — lire la sélection, l'état complet et le détail du prix.
getSummary() — le récapitulatif en HTML, par exemple pour votre propre formulaire.
finalize() — clôt la configuration et renvoie le résultat, afin de l'enregistrer dans votre propre processus.

Étape 5 : insérer l'extrait

Placez l'extrait à l'endroit voulu dans votre site :

WordPress — bloc HTML dans l'éditeur Gutenberg
TYPO3 — élément HTML
Jimdo — widget « Code HTML personnalisé »
Autres — directement dans le code source de la page

Certains éditeurs de CMS retirent les balises <script> des blocs de texte ordinaires. Utilisez donc toujours le bloc HTML/code explicite, et non l'éditeur de texte enrichi.

Étape 6 : tester

Ouvrez la page dans un navigateur et vérifiez que le configurateur se charge. Dans le backend, vous pouvez aussi tester sous Modifier → Aperçu — l'aperçu suppose une intégration HTML5 active.

En cas de problème :

Symptôme	Cause
Configurateur vide, message « Requesting host not authorized »	Domaine absent de Paramètres → Domaines (le domaine de préproduction aussi !)
Rien ne se passe, aucun encadré	Balise `<script>` retirée par le CMS — utiliser un bloc HTML et non un bloc de texte
« Le composant n'a pas pu être chargé »	`YOUR_TEMPLATE_ID` non remplacé, ou composant pas encore publié
Le configurateur est là mais aucun prix	`data-configento-price-mount` manque — voir « Placer le prix et le récapitulatif »
Le prix n'apparaît pas à l'endroit voulu	L'élément portant l'`id` du sélecteur est absent, ou placé après le configurateur dans le HTML
Aucun choix de langue n'apparaît	Le composant n'a qu'une langue, ou une langue a déjà été choisie dans cette session

L'ancien extrait

Les intégrations reposant sur _configentoSettings et html5.js proviennent de la génération précédente et continuent de fonctionner telles quelles — rien ne presse pour migrer.

Les nouvelles intégrations devraient toutefois utiliser l'extrait présenté ci-dessus. Lui seul donne accès aux fonctions récentes : le choix de la langue, le placement libre du prix et de l'image produit, ainsi que l'API JavaScript. Certains types de caractéristiques ne fonctionnent également que dans le nouveau configurateur ; les paramètres du composant le signalent dans le backend.

Pour migrer, remplacez intégralement l'ancien extrait par le nouveau — les deux variantes ne se mélangent pas. L'identifiant client et le jeton restent les mêmes.

Étapes suivantes

← Tous les articles Essai gratuit 14 jours