Este artículo explica cómo integrar el configurador mediante un fragmento HTML en tu sitio web o tu CMS, sin sistema de tienda. No necesitas un desarrollador: basta con una etiqueta <script> y un <div> con unos pocos atributos.
¿Cuándo es el fragmento HTML la opción correcta?
El fragmento HTML es adecuado si:
- no tienes una tienda Magento, Shopware o Shopify
- quieres usar el configurador en una web como herramienta de presupuestos o de presentación de producto
- usas un CMS como WordPress, TYPO3, Joomla o Jimdo
Para esos tres sistemas de tienda hay plugins ya preparados: aportan la conexión con el carrito y el traspaso del precio, algo que el fragmento por sí solo no puede hacer.
Paso 1: activar la integración HTML5
En el backend, en Ajustes → Integraciones, encontrarás la tarjeta HTML5 (V3 Beta). Actívala si aún no lo está. Ahí está también el fragmento listo con tu ID de cliente y tu token, ya rellenados: solo tienes que sustituir el ID del componente.
Al lado está la tarjeta más antigua, llamada simplemente HTML5. Pertenece a la generación anterior del configurador; cuál te corresponde se explica más abajo, en «El fragmento antiguo».
Paso 2: autorizar el dominio
En Ajustes → Dominios introduce el dominio o los dominios donde debe funcionar el configurador. Introdúcelos sin protocolo, es decir www.misitio.es o misitio.es.
No es un trámite: tu token aparece en el código fuente de la página y, por tanto, cualquiera puede leerlo. Lo que lo protege es precisamente esa lista: las peticiones desde un dominio no registrado reciben la respuesta «Requesting host not authorized» y el configurador se queda vacío. Si tu sitio corre en un dominio de pruebas, añádelo también.
Paso 3: averiguar el ID del componente
El ID de tu componente aparece en la vista general de componentes, justo debajo del nombre del componente (p. ej. «ID 10722»). Ese ID va en el fragmento.
Paso 4: el fragmento
<script src="https://cloud.configento.app/configento-v3/configento.js" defer></script>
<div
data-configento
data-component-id="YOUR_TEMPLATE_ID"
data-configento-customer="TU-ID-DE-CLIENTE"
data-configento-token="TU-TOKEN"
data-configento-cloud-base-url="cloud.configento.app"
data-configento-tax-rate="21"
data-configento-locale="es_ES"
></div>Cómo funciona: al cargarse, 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-* de ese mismo elemento.
El <div> puede ir donde tu CMS permita HTML; el script en cambio se inserta una sola vez por página, aunque haya varios configuradores en ella.
Todos los atributos de un vistazo
Básicos
| Atributo | Significado |
|---|---|
data-configento |
Marca el elemento como lugar del configurador. Sin valor. |
data-component-id |
Qué componente se carga. |
data-configento-customer |
Tu ID de cliente. Viene rellenado en el fragmento del backend. |
data-configento-token |
Tu token. Viene rellenado en el fragmento del backend. |
data-configento-cloud-base-url |
cloud.configento.app: cópialo tal cual. |
data-configento-tax-rate |
Tipo impositivo para mostrar el precio, p. ej. 21. |
data-configento-locale |
Idioma, p. ej. es_ES. Rige los textos del componente y las etiquetas del configurador. |
Colocar las partes tú mismo
| Atributo | Significado |
|---|---|
data-configento-price-mount |
Selector CSS: ahí aparece el precio actual. Sin este atributo el fragmento no muestra ningún precio. |
data-configento-summary-mount |
Selector CSS: ahí aparece el resumen. Sin el atributo no hay ninguno. |
data-configento-summary-open |
El resumen empieza desplegado (true/false). Solo surte efecto junto con summary-mount. |
data-configento-combined-image-mount |
Selector CSS: ahí aparece la imagen de producto combinada. |
Idiomas
| Atributo | Significado |
|---|---|
data-configento-language-select |
Pregunta al visitante por su idioma antes de mostrar el configurador. Sin valor. |
data-configento-languages |
Limita los idiomas ofrecidos, p. ej. es_ES, en_GB. |
data-configento-content-locale |
Idioma solo para los textos del componente, separado de la interfaz. Rara vez necesario. |
De uso poco frecuente
| Atributo | Significado |
|---|---|
data-configento-config |
Todos los ajustes como un objeto JSON en lugar de atributos sueltos. |
data-configento-currency |
Código de moneda cuando difiere del predeterminado del componente. |
data-configento-asset-base-url |
Otra ubicación para las imágenes. |
data-configento-token-endpoint |
Dirección donde el configurador obtiene por sí mismo tokens de corta duración. La usan los plugins de tienda; con el fragmento HTML se deja vacía. |
Funciones adicionales
Colocar precio y resumen — importante
Sin más indicaciones, el fragmento HTML no muestra ni precio ni resumen. Es intencionado: en una web esos dos elementos pertenecen a la maquetación de la página, no a una caja ajena en medio. Tú decides dónde aparecen, pero tienes que decidirlo; de lo contrario faltan.
Para ello creas tus propios elementos y los señalas con un selector CSS:
<div id="mi-imagen"></div>
<h1>Mi producto</h1>
<div id="mi-precio"></div>
<div
data-configento
data-component-id="10722"
data-configento-customer="TU-ID-DE-CLIENTE"
data-configento-token="TU-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-combined-image-mount="#mi-imagen"
></div>El precio y la imagen se actualizan ahí en directo con cada elección. Si el selector no encuentra ningún elemento, ese punto simplemente queda vacío: una errata no rompe el configurador, solo te cuesta la visualización.
La imagen de producto combinada se comporta distinto que el precio y el resumen: aparece también sin combined-image-mount, dentro del configurador. El selector únicamente la mueve.
Para el resumen rige el mismo patrón con data-configento-summary-mount. data-configento-summary-open controla entonces si empieza desplegado; por sí solo, sin summary-mount, el atributo no hace nada, porque no hay resumen que desplegar.
Preguntar primero por el idioma
Si tu componente existe en varios idiomas, el configurador puede preguntar antes al visitante cuál prefiere. Muestra entonces una tarjeta por idioma, con su bandera y su nombre en ese idioma; tras el clic, el configurador arranca en él, tanto los textos del componente como las etiquetas.
<div data-configento
data-component-id="10722"
data-configento-language-select></div>Los idiomas ofrecidos se leen del propio componente, así que la lista no puede apartarse de lo que realmente está traducido. Si una web concreta solo debe mostrar dos de ellos, nómbralos expresamente:
data-configento-language-select
data-configento-languages="es_ES, en_GB"Conviene saber:
- Con un solo idioma no aparece ninguna selección: un clic que no pregunta nada solo sería un estorbo.
- La elección vale para la sesión: quien cambia de página y vuelve no es preguntado de nuevo. Una visita al día siguiente empieza otra vez con la pregunta.
- La elección del visitante tiene prioridad sobre
data-configento-locale. Ese atributo es tu valor por defecto; la selección es su decisión.
Para probarlo: demo multilingüe.
Varios configuradores en una página
Puedes colocar tantos elementos data-configento como quieras en una página: cada uno carga su componente y calcula de forma independiente. El script, aun así, se inserta una sola vez.
En ese caso da a cada elemento su propio id para poder distinguirlos después desde JavaScript, y haz que price-mount y compañía apunten a destinos distintos.
Los ajustes como JSON
Si tu CMS hace incómodo poner muchos atributos en el mismo elemento, puedes agruparlos:
<div data-configento data-configento-config='{
"componentId": "10722",
"customer": "TU-ID-DE-CLIENTE",
"token": "TU-TOKEN",
"cloudBaseUrl": "cloud.configento.app",
"taxRate": "21",
"uiLocale": "es_ES"
}'></div>Fíjate en las comillas simples por fuera, para que se conserven las dobles del JSON.
API de JavaScript
Para tu propia lógica en la página —por ejemplo un botón «Solicitar presupuesto» dentro de tu diseño— el configurador ofrece una pequeña interfaz en window.Configento:
<script>
Configento.ready.then(function () {
var conf = Configento.first();
// Reaccionar a cada cambio de precio
conf.on('price', function (p) {
console.log('Nuevo total:', p.total);
});
// Leer la selección actual
console.log(conf.getSelections());
});
</script>Configento.ready— una promesa que se resuelve en cuanto los configuradores de la página están listos. Tu código va dentro; antes no hay nada que consultar.Configento.first()— el primer configurador de la página. Si hay varios:Configento.forElement('#mi-id').on('change', …)— cada cambio de la selección.on('price', …)— cada cambio de precio, con el total y la diferencia respecto al anterior.getSelections(),getState(),getPriceBreakdown()— leer la selección, el estado completo y el desglose del precio.getSummary()— el resumen como HTML, por ejemplo para tu propio formulario.finalize()— cierra la configuración y devuelve el resultado, para guardarlo en tu propio proceso.
Paso 5: insertar el fragmento
Coloca el fragmento en el lugar deseado de tu web:
- WordPress — bloque HTML en el editor Gutenberg
- TYPO3 — elemento HTML
- Jimdo — widget «Código HTML propio»
- Otros — directamente en el código fuente de la página
Algunos editores de CMS eliminan las etiquetas <script> de los bloques de texto normales. Usa por eso siempre el bloque HTML o de código explícito, no el editor de texto enriquecido.
Paso 6: probar
Abre la página en el navegador y comprueba que el configurador carga. En el backend también puedes probar en Editar → Vista previa; la vista previa requiere una integración HTML5 activa.
Si hay problemas:
| Síntoma | Causa |
|---|---|
| El configurador queda vacío, mensaje «Requesting host not authorized» | Dominio no registrado en Ajustes → Dominios (¡también el de pruebas!) |
| No ocurre nada, ninguna caja | El CMS eliminó la etiqueta <script>: usa un bloque HTML, no uno de texto |
| «No se pudo cargar el componente» | YOUR_TEMPLATE_ID sin sustituir, o el componente aún no está publicado |
| El configurador está, pero no hay precio | Falta data-configento-price-mount: ver «Colocar precio y resumen» |
| El precio no aparece donde debería | Falta el elemento con el id indicado en el selector, o va después del configurador en el HTML |
| No aparece la selección de idioma | El componente tiene un solo idioma, o ya se eligió uno en esta sesión |
El fragmento antiguo
Las integraciones que usan _configentoSettings y html5.js provienen de la generación anterior y siguen funcionando sin cambios: no hay por qué migrar con prisas.
Las integraciones nuevas, en cambio, deberían usar el fragmento mostrado arriba. Solo ahí están las funciones recientes: la selección de idioma, la colocación libre del precio y de la imagen de producto, y la API de JavaScript. Algunos tipos de característica funcionan además únicamente en el configurador nuevo; los ajustes del componente lo advierten en el backend.
Para migrar, sustituye el fragmento antiguo por el nuevo por completo: las dos variantes no se mezclan. El ID de cliente y el token siguen siendo los mismos.