Intégration extrait HTML

Dernière mise à jour: 27. octobre 2026

Avec l'extrait HTML, vous intégrez un configurateur dans n'importe quel site web – WordPress, TYPO3, Joomla, Jimdo ou du HTML fait maison. Vous n'avez besoin ni d'un plugin de boutique ni d'un développeur : une balise <script> et un <div> avec quelques attributs suffisent. L'extrait charge toujours le moteur frontend V3.

Quand l'extrait HTML convient

L'extrait HTML convient si vous

souhaitez afficher le configurateur sur une page web normale, p. ex. comme outil de devis ou de demande,
utilisez un CMS sans boutique,
concluez la demande via le bouton d'action – par e-mail, en PDF ou vers votre propre URL.

Pour Magento 2, Shopware 6 et Shopify, il existe des plugins prêts à l'emploi. Ils transmettent le prix et la configuration au panier – ce que l'extrait seul ne sait pas faire. Voir Installer le plugin Magento, Installer le plugin Shopware et Installer le plugin Shopify.

Étape 1 : générer le jeton

Dans l'administration, ouvrez Paramètres, puis l'onglet Intégrations.
Repérez la carte HTML5 (V3).
Cliquez sur Générer. Vous obtenez un jeton et, en dessous, l'Extrait JavaScript V3 avec votre ID client et votre jeton.
Copiez l'extrait avec Copier.

La carte n'a pas d'interrupteur – dès qu'un jeton existe, l'extrait fonctionne.

Renouveler génère un nouveau jeton et invalide immédiatement tous les précédents. Le configurateur ne se charge alors plus sur aucune page tant que vous n'y avez pas inséré le nouvel extrait.

Étape 2 : autoriser le domaine

Sous Paramètres → Domaines, saisissez les domaines sur lesquels le configurateur peut fonctionner – sans https://, p. ex. www.monsite.fr. Un domaine saisi vaut aussi pour ses sous-domaines. Les modifications prennent effet après quelques minutes. Pour en savoir plus : Paramètres globaux.

Ce n'est pas une simple formalité : votre jeton figure dans le code source de votre page et est donc lisible par tous. C'est cette liste qui le protège. Sur un domaine non saisi, le configurateur affiche « Le composant n’a pas pu être chargé (HTTP 401) » et en dessous Requesting host not authorized. Si vous testez sur un domaine de préproduction, saisissez-le aussi.

Étape 3 : trouver l'ID du composant

L'ID figure dans la liste des composants à côté de chaque composant, p. ex. ID 10722. S'il est indiqué ID —, le composant n'est pas encore publié. Publiez-le d'abord – l'extrait affiche toujours le dernier état publié.

Étape 4 : insérer l'extrait

Dans l'extrait copié, remplacez YOUR_TEMPLATE_ID par l'ID du composant :

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

<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"
></div>

Fonctionnement : au chargement, le script recherche chaque élément portant l'attribut data-configento et y construit un configurateur. Il lit tout le reste dans les attributs data-configento-* du même élément.

Insérez l'extrait à l'endroit où votre CMS autorise du code HTML personnalisé – le plus souvent un bloc HTML dédié ou un élément HTML. De nombreux CMS suppriment les balises <script> des blocs de texte normaux ; n'utilisez donc pas l'éditeur de texte courant.

La balise <script> ne doit figurer qu'une seule fois sur la page, même si plusieurs configurateurs s'y trouvent.

Étape 5 : tester

Ouvrez la page dans le navigateur. Le configurateur apparaît avec toutes les caractéristiques. Sans autres attributs, l'extrait n'affiche ni prix, ni récapitulatif, ni titre – voir la section suivante. Si quelque chose ne fonctionne pas, consultez le dépannage.

Placer le prix, le récapitulatif et l'image du produit

Sur une page web, le prix et le récapitulatif ont généralement leur place à un endroit précis de la mise en page, p. ex. à côté du titre du produit. C'est pourquoi l'extrait ne les affiche que là où vous le lui indiquez. Vous créez vos propres éléments et y faites référence par sélecteur CSS :

<div id="mon-image"></div>
<h1>Mon produit</h1>
<div id="mon-prix"></div>
<div id="mon-recapitulatif"></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-summary-mount="#mon-recapitulatif"
    data-configento-combined-image-mount="#mon-image"
></div>

Prix (price-mount) : prix total avec mention de la taxe. En dessous apparaissent aussi les erreurs et avertissements de vos règles.
Récapitulatif (summary-mount) : les caractéristiques et valeurs choisies. À son propre emplacement, il est d'abord déplié ; avec data-configento-summary-open="false", il démarre replié.
Image du produit (combined-image-mount) : l'image de produit combinée. Sans cet attribut, elle apparaît à l'intérieur du configurateur – le sélecteur ne fait que la déplacer.

Tout se met à jour en direct à chaque sélection. L'élément cible doit déjà figurer dans le HTML au chargement de la page ; le configurateur ne trouve pas un élément créé plus tard par JavaScript. Si le sélecteur ne trouve aucun élément, l'affichage est omis – le configurateur lui-même fonctionne quand même.

Tout afficher dans le configurateur

Si vous voulez simplement le titre, le prix et le récapitulatif dans le configurateur lui-même, comme dans l'aperçu de l'administration, définissez :

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

Le titre du composant, la barre de prix et le récapitulatif apparaissent alors à l'intérieur du configurateur. price-mount et summary-mount fonctionnent en plus et déplacent l'élément concerné à l'emplacement de votre choix.

Langues

data-configento-locale définit la langue – pour les textes du composant et pour les libellés du configurateur (« Total », « Veuillez choisir »). S'il manque un texte dans cette langue, le configurateur prend la même langue d'une autre région (p. ex. en_US au lieu de en_GB), sinon une autre traduction disponible.

Proposer d'abord un choix de langue

Si votre composant existe en plusieurs langues, le configurateur peut d'abord interroger le visiteur. Il affiche alors une tuile par langue avec drapeau et nom de la langue, puis démarre dans cette langue après le clic.

data-configento-language-select

Les langues du composant sont proposées. Pour un site donné, vous pouvez les restreindre :

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

Pour afficher un texte au-dessus des drapeaux :

data-configento-language-select-title="Choisissez votre langue"

Le texte s'affiche exactement tel que vous l'écrivez. Le visiteur n'a pas encore choisi de langue : si vous servez plusieurs marchés, écrivez-le dans toutes leurs langues, p. ex. « Choisissez votre langue / Choose your language ».

Pour que le visiteur puisse changer de langue plus tard, appelez showLanguageSelect(), p. ex. depuis un bouton :

<button type="button" onclick="Configento.first().showLanguageSelect()">Changer de langue</button>

Les drapeaux réapparaissent et la sélection actuelle du configurateur est conservée. Pour en savoir plus : Interface JavaScript (V3).

Bon à savoir :

S'il n'y a qu'une seule langue, aucun choix n'apparaît.
Le choix vaut pour la session du navigateur : celui qui recharge la page ou revient n'est pas interrogé à nouveau.
Le choix du visiteur a priorité sur data-configento-locale.

Pour essayer : démo « Multilinguisme ».

Tous les attributs

Bases

Attribut	Signification
`data-configento`	Marque l'élément comme emplacement d'un configurateur. Sans valeur.
`data-component-id`	ID du composant
`data-configento-customer`	Votre ID client – figure dans l'extrait
`data-configento-token`	Votre jeton de la carte HTML5 (V3)
`data-configento-cloud-base-url`	`cloud.configento.app` – à reprendre tel quel
`data-configento-tax-rate`	Taux de taxe vers lequel le configurateur convertit les prix, p. ex. `20`. S'il correspond au taux de votre composant, les prix restent inchangés ; `0` affiche des prix HT. Sans l'attribut, le configurateur affiche les prix tels qu'ils sont saisis dans le composant.
`data-configento-locale`	Langue, p. ex. `fr_FR` ou `en_GB`

Affichage

Attribut	Signification
`data-configento-price-mount`	Sélecteur CSS pour le prix. Sans cet attribut, pas de prix.
`data-configento-summary-mount`	Sélecteur CSS pour le récapitulatif. Sans cet attribut, pas de récapitulatif.
`data-configento-summary-open`	Récapitulatif d'abord déplié (`true`) ou replié (`false`)
`data-configento-combined-image-mount`	Sélecteur CSS pour l'image de produit combinée
`data-configento-embed-mode`	`admin-preview` affiche le titre, le prix et le récapitulatif dans le configurateur
`data-configento-min-height`	Réserve la hauteur pendant le chargement, p. ex. `640px`, pour que la page ne saute pas. Avec `data-configento-min-height-keep`, elle est conservée aussi ensuite.
`data-configento-wizard-nav`	Navigation dans l'assistant : `full`, `buttons` ou `none` – voir Piloter l'assistant et les groupes

Langues

Attribut	Signification
`data-configento-language-select`	Choix de la langue avant le configurateur. Sans valeur.
`data-configento-language-select-title`	Texte au-dessus des drapeaux du choix de langue
`data-configento-languages`	Langues proposées, séparées par des virgules
`data-configento-content-locale`	Langue uniquement pour les textes du composant, si elle doit différer des libellés. Rarement nécessaire.

Rarement utilisés

Attribut	Signification
`data-configento-config`	Tous les paramètres en JSON (voir ci-dessous)
`data-configento-currency`	Code de devise, p. ex. `EUR`, s'il doit différer de celui du composant
`data-configento-component-json`	Le composant directement dans la page au lieu d'une requête au chargement – voir Charger plus vite

D'autres attributs comme data-configento-token-endpoint et data-configento-asset-base-url sont définis par les plugins de boutique. Dans l'extrait HTML, omettez-les. Tous les attributs avec leurs noms JSON figurent dans la Référence de l'API JavaScript.

Pour les attributs oui/non, l'attribut sans valeur vaut « oui ». Sont également acceptés true/false, 1/0 et yes/no.

Plusieurs configurateurs sur une page

Vous pouvez placer autant d'éléments data-configento que vous le souhaitez sur une page. Chacun charge son propre composant et calcule indépendamment. Vous n'intégrez le script qu'une seule fois.

Donnez à chaque élément son propre id et faites pointer price-mount et les autres sélecteurs vers des cibles distinctes. L'id vous permet aussi d'accéder aux configurateurs par JavaScript.

Paramètres en JSON

Si votre CMS rend les nombreux attributs peu pratiques, regroupez-les dans un seul attribut :

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

Les noms dans le JSON : componentId, customer, token, cloudBaseUrl, taxRate, uiLocale, contentLocale, currency, priceMount, summaryMount, summaryOpen, combinedImageMount, embedMode, languageSelect, languageSelectTitle, languages (sous forme de liste, p. ex. ["de_DE", "en_GB"]), minHeight, minHeightKeep, wizardNav, productAttributes et component. Si un paramètre figure dans le JSON et aussi comme attribut individuel, c'est le JSON qui s'applique.

Veillez aux guillemets simples à l'extérieur, afin que les guillemets doubles du JSON soient conservés.

Interface JavaScript

Pour votre propre logique sur la page – p. ex. un bouton de demande ou un formulaire personnalisé, ou le prix dans votre barre d'achat –, le configurateur met à disposition window.Configento :

<script>
  window.addEventListener('DOMContentLoaded', function () {
    Configento.ready.then(function () {
      var configurateur = Configento.first();

      configurateur.on('price', function (p) {
        console.log('Nouveau prix total :', p.total, p.currency);
      });
    });
  });
</script>

Toutes les méthodes et tous les événements, l'enregistrement et le chargement de configurations ainsi que la migration du code Legacy sont décrits dans Interface JavaScript (V3).

L'extrait classique

Les comptes avec le cloud classique voient en plus, sous Intégrations, la carte HTML5. Elle comporte un interrupteur, son propre jeton de sécurité et, une fois activée, un Extrait JavaScript (avec _configentoSettings et html5.js) et un Extrait iFrame. Les deux chargent le moteur frontend Legacy.

Les intégrations existantes avec l'extrait classique continuent de fonctionner sans changement. Pour les nouvelles intégrations, utilisez l'extrait V3 : seul celui-ci offre le choix de la langue, des emplacements dédiés pour le prix, le récapitulatif et l'image, l'interface JavaScript et des fonctions V3 comme le Captcha.

Pour basculer, remplacez entièrement l'ancien extrait par le nouveau – les deux ne peuvent pas être mélangés. L'ID client reste le même, mais le jeton est différent : il provient de la carte HTML5 (V3). Ce qui change avec le changement de moteur est décrit dans Moteur frontend : Legacy ou V3. Si vous avez votre propre code JavaScript pour l'extrait classique, consultez Migrer depuis Legacy.

Dépannage

Ce que vous voyez	Cause et solution
Rien du tout, aucun cadre	Le CMS a supprimé la balise `<script>`. Utilisez un bloc HTML au lieu d'un bloc de texte.
« Le composant n’a pas pu être chargé (HTTP 401) » avec `Requesting host not authorized`	Le domaine manque sous Paramètres → Domaines – saisissez aussi les domaines de préproduction.
« Le composant n’a pas pu être chargé (HTTP 401) » avec `Token invalid`	Le jeton est incorrect ou a été remplacé avec Renouveler. Copiez à nouveau l'extrait depuis la carte HTML5 (V3).
« Le composant n’a pas pu être chargé (HTTP 404) »	`YOUR_TEMPLATE_ID` non remplacé, mauvais ID ou composant pas encore publié
Configurateur présent, mais pas de prix	`data-configento-price-mount` manque, ou le sélecteur ne trouve aucun élément. Autre possibilité : `data-configento-embed-mode="admin-preview"`.
Prix trop bas, comme HT	`data-configento-tax-rate` vaut `0` ou un taux inférieur à celui du composant
Les modifications de l'administration manquent	Le composant n'a pas encore été publié après la modification.
Le choix de la langue n'apparaît pas	Le composant n'a qu'une seule langue, ou le visiteur a déjà choisi pendant cette session.
Une caractéristique affiche « Type de caractéristique inconnu »	Le composant utilise une fonction qui n'existe que dans Legacy – voir Moteur frontend : Legacy ou V3.

La console du navigateur donne d'autres indications : les messages du configurateur commencent par [Configento].

Étapes suivantes

← Tous les articles Essai gratuit 14 jours