HTML Snippet Integration

Last updated: 01. October 2026

This article explains how to embed the configurator via HTML snippet in your website or CMS — without a webshop system. You do not need a developer for it: one <script> tag and one <div> with a few attributes are enough.

When Is the HTML Snippet the Right Choice?

The HTML snippet is suitable when you:

do not operate a Magento, Shopware or Shopify shop
want to use the configurator on a website as a quote or product presentation tool
use a CMS such as WordPress, TYPO3, Joomla or Jimdo

For those three shop systems there are ready-made plugins — they add cart integration and price hand-over, which the snippet alone cannot do.

Step 1: Activate the HTML5 Integration

In the backend under Settings → Integrations you find the card HTML5 (V3 Beta). Enable it if it is not active yet. It also holds the finished snippet with your customer ID and your token — pre-filled, you only replace the component ID.

Next to it sits the older card simply called HTML5. That one belongs to the previous configurator generation; which one you need is explained below under "The Older Snippet".

Step 2: Whitelist Your Domain

Under Settings → Domains enter the domain(s) where the configurator should run. Enter them without protocol, so www.mysite.com or mysite.com.

This is not a formality: your token sits in the page source and is readable by anyone. What protects it is exactly this list — requests from a domain that is not listed are answered with "Requesting host not authorized", and the configurator stays empty. If your site runs on a staging domain, add that one too.

Step 3: Find Your Component ID

The ID of your component is shown in the component overview — directly below the component name (e.g. "ID 10722"). That ID goes into the snippet.

Step 4: The Snippet

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

<div
    data-configento
    data-component-id="YOUR_TEMPLATE_ID"
    data-configento-customer="YOUR-CUSTOMER-ID"
    data-configento-token="YOUR-TOKEN"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="19"
    data-configento-locale="en_GB"
></div>

How it works: on load, the script looks for every element carrying the data-configento attribute and builds a configurator there. Everything else it reads from the data-configento-* attributes on that same element.

The <div> may sit anywhere your CMS allows HTML — the script itself goes on the page only once, even when several configurators are on it.

Every Attribute at a Glance

Basics

Attribute	Meaning
`data-configento`	Marks the element as a configurator slot. No value.
`data-component-id`	Which component to load.
`data-configento-customer`	Your customer ID. Pre-filled in the backend snippet.
`data-configento-token`	Your token. Pre-filled in the backend snippet.
`data-configento-cloud-base-url`	`cloud.configento.app` — take it as it is.
`data-configento-tax-rate`	Tax rate for the price display, e.g. `19`.
`data-configento-locale`	Language, e.g. `en_GB`. Drives the component texts and the configurator's own labels.

Placing parts yourself

Attribute	Meaning
`data-configento-price-mount`	CSS selector: the running total appears there. Without this attribute the snippet shows no price at all.
`data-configento-summary-mount`	CSS selector: the summary appears there. Without the attribute there is none.
`data-configento-summary-open`	Summary starts expanded (`true`/`false`). Only has an effect together with `summary-mount`.
`data-configento-combined-image-mount`	CSS selector: the combined product image appears there.

Languages

Attribute	Meaning
`data-configento-language-select`	Asks the visitor for their language before the configurator appears. No value.
`data-configento-languages`	Narrows the offered languages, e.g. `de_DE, en_GB`.
`data-configento-content-locale`	Language for the component texts only, separate from the interface. Rarely needed.

Rarely needed

Attribute	Meaning
`data-configento-config`	All settings as one JSON object instead of single attributes.
`data-configento-currency`	Currency code when it differs from the component's default.
`data-configento-asset-base-url`	Different location for images.
`data-configento-token-endpoint`	Address where the configurator fetches short-lived tokens itself. The shop plugins use this; with the HTML snippet it stays empty.

Extra Features

Placing Price and Summary — Important

Without further instruction the HTML snippet shows neither price nor summary. That is deliberate: on a website those two belong in the page layout, not in someone else's box in the middle of it. So you decide where they appear — but you do have to decide, otherwise they are missing.

You create your own elements for them and point at those with a CSS selector:

<div id="my-image"></div>
<h1>My product</h1>
<div id="my-price"></div>

<div
    data-configento
    data-component-id="10722"
    data-configento-customer="YOUR-CUSTOMER-ID"
    data-configento-token="YOUR-TOKEN"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="19"
    data-configento-locale="en_GB"
    data-configento-price-mount="#my-price"
    data-configento-combined-image-mount="#my-image"
></div>

Price and image update there live with every selection. If the selector finds no element, that spot simply stays empty — a typo does not break the configurator, it only costs you the display.

The combined product image behaves differently from price and summary: it also appears without combined-image-mount, inside the configurator. The selector merely moves it.

The summary follows the same pattern with data-configento-summary-mount. data-configento-summary-open then controls whether it starts expanded — on its own, without summary-mount, the attribute does nothing, because there is no summary for it to expand.

Asking for a Language First

If your component exists in several languages, the configurator can ask the visitor which one they want before it appears. It then shows one tile per language, with its flag and its own name; after the click the configurator starts in that language — component texts as well as labels.

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

Which languages are offered is read from the component itself, so the list cannot drift away from what has actually been translated. If one particular site should only show two of them, name them explicitly:

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

Worth knowing:

With only one language no picker appears — a click that asks nothing would only be an obstacle.
The choice applies for the session: someone who moves to another page and comes back is not asked again. A visit the next day starts with the question again.
The visitor's choice takes precedence over data-configento-locale. That attribute is your default, the picker is their decision.

Try it out: Multilingual demo.

Several Configurators on One Page

You can place as many data-configento elements on a page as you like — each loads its own component and calculates independently. The script still goes in only once.

In that case give each element its own id so you can tell them apart from JavaScript later, and point price-mount and friends at different targets.

Settings as JSON

When your CMS makes many attributes on one element unwieldy, you can pass them bundled:

<div data-configento data-configento-config='{
    "componentId": "10722",
    "customer": "YOUR-CUSTOMER-ID",
    "token": "YOUR-TOKEN",
    "cloudBaseUrl": "cloud.configento.app",
    "taxRate": "19",
    "uiLocale": "en_GB"
}'></div>

Mind the single quotes on the outside so the double quotes inside the JSON survive.

JavaScript API

For your own logic on the page — a "Request a quote" button in your site design, say — the configurator exposes a small interface at window.Configento:

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

      // React to every price change
      conf.on('price', function (p) {
          console.log('New total:', p.total);
      });

      // Read the current selection
      console.log(conf.getSelections());
  });
</script>

Configento.ready — a promise that resolves once the page's configurators are in place. Your code belongs inside it; before that there is nothing to query.
Configento.first() — the first configurator on the page. With several: Configento.forElement('#my-id').
on('change', …) — every change to the selection.
on('price', …) — every price change, with the total and the difference from the previous one.
getSelections(), getState(), getPriceBreakdown() — read the selection, the full state and the price breakdown.
getSummary() — the summary as HTML, for your own form for instance.
finalize() — completes the configuration and returns the result, so you can store it in your own process.

Step 5: Embed the Snippet

Paste the snippet at the desired location in your website:

WordPress — HTML block in the Gutenberg editor
TYPO3 — HTML element
Jimdo — widget "Custom HTML code"
Others — directly into the page source code

Some CMS editors strip <script> tags out of ordinary text blocks. So always use the explicit HTML/code block, not the rich-text editor.

Step 6: Test

Open the page in a browser and check whether the configurator loads. In the backend you can also test under Edit → Preview — preview requires an active HTML5 integration.

If problems arise:

Symptom	Cause
Configurator stays empty, message "Requesting host not authorized"	Domain not listed under Settings → Domains (the staging domain too!)
Nothing happens at all, no box	The CMS stripped the `<script>` tag — use an HTML block, not a text block
"Component could not be loaded"	`YOUR_TEMPLATE_ID` not replaced, or the component has not been published yet
Configurator is there but no price	`data-configento-price-mount` is missing — see "Placing Price and Summary"
Price does not appear where it should	The element with the `id` named in the selector is missing, or it comes after the configurator in the HTML
No language picker appears	The component carries only one language, or a language was already picked in this session

The Older Snippet

Embeds built on _configentoSettings and html5.js come from the previous generation and keep running unchanged — there is no need to rush a migration.

New embeds should use the snippet shown above, though. Only there do you get the newer features: the language picker, your own placement for price and product image, and the JavaScript API. Some characteristic types also work exclusively in the new configurator; the component settings point this out in the backend.

To migrate, replace the old snippet with the new one completely — the two variants cannot be mixed. Customer ID and token stay the same.

Next Steps

← All articles Try free for 14 days