Docs  /  Integraciones  /  Integración fragmento HTML

Integración fragmento HTML

Última actualización: 27. octubre 2026

Con el fragmento HTML integra un configurador en cualquier sitio web: WordPress, TYPO3, Joomla, Jimdo o HTML hecho a mano. No necesita ningún plugin de tienda ni un desarrollador: basta con una etiqueta <script> y un <div> con algunos atributos. El fragmento carga siempre el motor de frontend V3.

Cuándo encaja el fragmento HTML

El fragmento HTML es adecuado si

  • quiere mostrar el configurador en una página web normal, por ejemplo como herramienta de presupuestos o de solicitudes,
  • usa un CMS sin tienda,
  • cierra la solicitud con el botón de acción: como correo electrónico, PDF o envío a su propia URL.

Para Magento 2, Shopware 6 y Shopify existen plugins listos. Pasan el precio y la configuración al carrito, algo que el fragmento por sí solo no puede hacer. Consulte Instalar plugin Magento, Instalar plugin Shopware e Instalar el plugin de Shopify.

Paso 1: Generar el token

  1. Abra en el admin Ajustes y allí la pestaña Integraciones.
  2. Busque la tarjeta HTML5 (V3).
  3. Haga clic en Generar. Obtendrá un token y, debajo, el Fragmento JavaScript V3 con su ID de cliente y su token.
  4. Copie el fragmento con Copiar.

La tarjeta no tiene interruptor: en cuanto existe un token, el fragmento funciona.

Renovar genera un token nuevo e invalida al instante todos los anteriores. A partir de ese momento, el configurador no carga en ninguna página hasta que haya colocado allí el fragmento nuevo.

Paso 2: Autorizar el dominio

En Ajustes → Dominios introduce los dominios en los que puede funcionar el configurador, sin https://, p. ej. www.misitio.es. Un dominio introducido vale también para sus subdominios. Los cambios tienen efecto al cabo de pocos minutos. Más información en Configuración global.

No es una formalidad: su token está en el código fuente de su página y, por tanto, cualquiera puede leerlo. Lo protege esta lista. En un dominio no introducido, el configurador muestra «No se pudo cargar el componente (HTTP 401)» y debajo Requesting host not authorized. Si prueba en un dominio de staging, introdúzcalo también.

Paso 3: Averiguar el ID del componente

El ID aparece en la lista de componentes junto a cada componente, p. ej. ID 10722. Si aparece ID —, el componente todavía no está publicado. Publíquelo primero: el fragmento muestra siempre la última versión publicada.

Paso 4: Insertar el fragmento

En el fragmento copiado, sustituya YOUR_TEMPLATE_ID por el ID del componente:

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

<div
    data-configento
    data-component-id="10722"
    data-configento-customer="SU-ID-DE-CLIENTE"
    data-configento-token="SU-TOKEN"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="21"
    data-configento-locale="es_ES"
></div>

Así funciona: al cargar, el script busca cada elemento con el atributo data-configento y construye allí un configurador. Todo lo demás lo lee de los atributos data-configento-* del mismo elemento. En el fragmento copiado, su ID de cliente y su token ya están incluidos en lugar de SU-ID-DE-CLIENTE y SU-TOKEN.

Inserte el fragmento donde su CMS permita código HTML propio, normalmente un bloque HTML propio o un elemento HTML. Muchos CMS eliminan las etiquetas <script> de los bloques de texto normales; por eso, no use el editor de texto corrido.

La etiqueta <script> solo va una vez en la página, aunque haya varios configuradores en ella.

Paso 5: Probar

Abra la página en el navegador. El configurador aparece con todas las características. Sin más atributos, el fragmento no muestra precio, resumen ni título; consulte la sección siguiente. Si algo no funciona, le ayuda la solución de problemas.

Colocar precio, resumen e imagen de producto

En una página web, el precio y el resumen suelen ir en un lugar concreto del diseño, p. ej. junto al título del producto. Por eso el fragmento solo los muestra donde usted indique. Cree sus propios elementos y haga referencia a ellos mediante un selector CSS:

<div id="mi-imagen"></div>
<h1>Mi producto</h1>
<div id="mi-precio"></div>
<div id="mi-resumen"></div>

<div
    data-configento
    data-component-id="10722"
    data-configento-customer="SU-ID-DE-CLIENTE"
    data-configento-token="SU-TOKEN"
    data-configento-cloud-base-url="cloud.configento.app"
    data-configento-tax-rate="21"
    data-configento-locale="es_ES"
    data-configento-price-mount="#mi-precio"
    data-configento-summary-mount="#mi-resumen"
    data-configento-combined-image-mount="#mi-imagen"
></div>
  • Precio (price-mount): precio total con indicación de impuestos. Debajo aparecen también los errores y advertencias de sus reglas.
  • Resumen (summary-mount): las características y los valores elegidos. En un lugar propio aparece desplegado al principio; con data-configento-summary-open="false" empieza plegado.
  • Imagen de producto (combined-image-mount): la imagen de producto combinada. Sin este atributo aparece dentro del configurador; el selector solo la desplaza.

Todo se actualiza en directo con cada selección. El elemento de destino debe estar ya en el HTML al cargar la página; un elemento que se crea después mediante JavaScript no lo encuentra el configurador. Si el selector no encuentra ningún elemento, la indicación no aparece, pero el configurador funciona igualmente.

Mostrar todo dentro del configurador

Si quiere tener el título, el precio y el resumen simplemente dentro del configurador, como en la vista previa del admin, añada:

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

Entonces el título del componente, la barra de precio y el resumen aparecen dentro del configurador. price-mount y summary-mount funcionan además y desplazan el elemento correspondiente a su ubicación.

Idiomas

data-configento-locale define el idioma, tanto para los textos del componente como para los rótulos del configurador («Total», «Elige una opción»). Si falta un texto en ese idioma, el configurador usa el mismo idioma de otra región (p. ej. en_US en lugar de en_GB) y, si no, otra traducción disponible.

Anteponer una selección de idioma

Si su componente está en varios idiomas, el configurador puede preguntar primero al visitante. Muestra entonces un mosaico por idioma con bandera y nombre del idioma, y tras el clic arranca en ese idioma.

data-configento-language-select

Se ofrecen los idiomas del componente. Para un sitio concreto puede limitarlos:

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

Para mostrar un texto encima de las banderas:

data-configento-language-select-title="Elija su idioma"

El texto aparece exactamente como lo escribe. Como el visitante aún no ha elegido idioma, si atiende varios mercados conviene escribirlo en todos sus idiomas, p. ej. «Elija su idioma / Choose your language».

Para que el visitante pueda cambiar de idioma más tarde, llame a showLanguageSelect(), por ejemplo desde un botón:

<button type="button" onclick="Configento.first().showLanguageSelect()">Cambiar idioma</button>

Las banderas vuelven a aparecer y la selección actual del configurador se conserva. Más información en Interfaz JavaScript (V3).

Conviene saber:

  • Con un solo idioma no aparece ninguna selección.
  • La elección vale para la sesión del navegador: quien recarga la página o vuelve no recibe la pregunta de nuevo.
  • La elección del visitante tiene prioridad sobre data-configento-locale.

Para probarlo: demo «Multilingüismo».

Todos los atributos

Básicos

Atributo Significado
data-configento Marca el elemento como lugar para un configurador. Sin valor.
data-component-id ID del componente
data-configento-customer Su ID de cliente; figura en el fragmento
data-configento-token Su token de la tarjeta HTML5 (V3)
data-configento-cloud-base-url cloud.configento.app; cópielo sin cambios
data-configento-tax-rate Tipo impositivo al que el configurador convierte los precios, p. ej. 21. Si coincide con el de su componente, los precios no cambian; 0 muestra precios netos. Sin el atributo, el configurador muestra los precios tal como están introducidos en el componente.
data-configento-locale Idioma, p. ej. es_ES o en_GB

Presentación

Atributo Significado
data-configento-price-mount Selector CSS para el precio. Sin este atributo, no hay precio.
data-configento-summary-mount Selector CSS para el resumen. Sin este atributo, no hay resumen.
data-configento-summary-open Resumen desplegado (true) o plegado (false) al principio
data-configento-combined-image-mount Selector CSS para la imagen de producto combinada
data-configento-embed-mode admin-preview muestra título, precio y resumen dentro del configurador
data-configento-min-height Reserva la altura durante la carga, p. ej. 640px, para que la página no salte. Con data-configento-min-height-keep se mantiene también después.
data-configento-wizard-nav Navegación en el asistente: full, buttons o none; consulte Controlar el asistente y los grupos

Idiomas

Atributo Significado
data-configento-language-select Selección de idioma antes del configurador. Sin valor.
data-configento-language-select-title Texto encima de las banderas de la selección de idioma
data-configento-languages Idiomas ofrecidos, separados por comas
data-configento-content-locale Idioma solo para los textos del componente, si debe ser distinto del de los rótulos. Raramente necesario.

Poco habituales

Atributo Significado
data-configento-config Todos los ajustes como JSON (véase abajo)
data-configento-currency Código de moneda, p. ej. EUR, si debe ser distinto del del componente
data-configento-component-json El componente directamente en la página en lugar de solicitarlo al cargar; consulte Cargar más rápido

Otros atributos, como data-configento-token-endpoint y data-configento-asset-base-url, los establecen los plugins de tienda. En el fragmento HTML no los use. Todos los atributos con sus nombres JSON figuran en la Referencia de la API JavaScript.

En los atributos de sí/no, el atributo sin valor cuenta como «sí». Se admiten además true/false, 1/0 y yes/no.

Varios configuradores en una página

Puede colocar tantos elementos data-configento como quiera en una página. Cada uno carga su propio componente y calcula por separado. El script solo se incluye una vez.

Dé a cada elemento su propio id y haga referencia con price-mount y los demás selectores a destinos propios para cada uno. Mediante el id también se dirige a los configuradores por JavaScript.

Ajustes como JSON

Si en su CMS resultan incómodos tantos atributos, puede reunirlos en un solo atributo:

<div data-configento data-configento-config='{
    "componentId": "10722",
    "customer": "SU-ID-DE-CLIENTE",
    "token": "SU-TOKEN",
    "cloudBaseUrl": "cloud.configento.app",
    "taxRate": "21",
    "uiLocale": "es_ES",
    "priceMount": "#mi-precio"
}'></div>

Los nombres en el JSON: componentId, customer, token, cloudBaseUrl, taxRate, uiLocale, contentLocale, currency, priceMount, summaryMount, summaryOpen, combinedImageMount, embedMode, languageSelect, languageSelectTitle, languages (como lista, p. ej. ["de_DE", "en_GB"]), minHeight, minHeightKeep, wizardNav, productAttributes y component. Si un ajuste figura en el JSON y además como atributo individual, vale el JSON.

Fíjese en las comillas simples exteriores, para que se conserven las dobles del JSON.

Interfaz JavaScript

Para lógica propia en la página – por ejemplo un botón de solicitud propio, un formulario o el precio en su barra de compra –, el configurador pone a disposición window.Configento:

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

      configurador.on('price', function (p) {
        console.log('Nuevo precio total:', p.total, p.currency);
      });
    });
  });
</script>

Todos los métodos y eventos, cómo guardar y cargar configuraciones y la migración desde código Legacy se describen en Interfaz JavaScript (V3).

El fragmento clásico

Las cuentas con la cloud clásica ven además, en Integraciones, la tarjeta HTML5. Tiene un interruptor, un token de seguridad propio y, cuando está activada, un Fragmento JavaScript (con _configentoSettings y html5.js) y un Fragmento iFrame. Ambos cargan el motor de frontend Legacy.

Las integraciones existentes con el fragmento clásico siguen funcionando sin cambios. Para integraciones nuevas, use el fragmento V3: solo allí existen la selección de idioma, los lugares propios para precio, resumen e imagen, la interfaz JavaScript y funciones de V3 como el Captcha.

Para cambiar, sustituya el fragmento antiguo por completo por el nuevo: los dos no se pueden mezclar. El ID de cliente sigue siendo el mismo, el token es otro: procede de la tarjeta HTML5 (V3). Lo que cambia con el cambio de motor se explica en Motor de frontend: Legacy o V3. Si tiene código JavaScript propio para el fragmento clásico, consulte Migrar desde Legacy.

Solución de problemas

Lo que ve Causa y solución
Nada, ningún recuadro El CMS ha eliminado la etiqueta <script>. Use un bloque HTML en lugar de un bloque de texto.
«No se pudo cargar el componente (HTTP 401)» con Requesting host not authorized Falta el dominio en Ajustes → Dominios; introduzca también los dominios de staging.
«No se pudo cargar el componente (HTTP 401)» con Token invalid El token no es correcto o se ha sustituido con Renovar. Vuelva a copiar el fragmento de la tarjeta HTML5 (V3).
«No se pudo cargar el componente (HTTP 404)» YOUR_TEMPLATE_ID sin sustituir, ID incorrecto o componente todavía sin publicar
Configurador visible, pero sin precio Falta data-configento-price-mount o el selector no encuentra ningún elemento. Alternativa: data-configento-embed-mode="admin-preview".
Precios demasiado bajos, como netos data-configento-tax-rate está en 0 o en un tipo inferior al del componente
Faltan cambios hechos en el admin El componente no se ha publicado después del cambio.
No aparece la selección de idioma El componente solo tiene un idioma, o el visitante ya ha elegido en esta sesión.
Una característica muestra «Tipo de característica desconocido» El componente usa una función que solo existe en Legacy; consulte Motor de frontend: Legacy o V3.

La consola del navegador ofrece más pistas: los mensajes del configurador empiezan por [Configento].

Próximos pasos

← Todos los artículos Prueba gratuita 14 días