← Volver a CutOptim ConfiguratorIntegración · una línea de código

Un configurador de productos para tu web que integras con una línea de código

CutOptim Configurator es un configurador de productos para tu web, pensado para material en plancha, que funciona dentro de las páginas de tu propia tienda. Pegas una etiqueta de script y un elemento; el configurador se abre en la página, como ventana emergente, como panel lateral o como página propia, y devuelve el pedido a tu tienda.

Prueba la demo en vivo →Empieza un sandbox gratuito Ver el configurador Referencia de la API del configurador: Inicio rápido →

Cuatro formas de abrirlo

Elige cómo aparece el configurador; el mismo código sirve para las cuatro y el ajuste de la tienda decide la opción por defecto.

— En la propia página (inline): el configurador forma parte de la página del producto.
— Ventana emergente (modal): un botón como «Cortar este tablero a medida» lo abre sobre la página.
— Panel lateral (drawer): entra deslizándose desde un lado y deja a la vista la página del producto.
— Página propia: un configurador a pantalla completa que devuelve al cliente a tu carrito cuando hace el pedido.

Cuatro formas de mostrarlo en tu tienda

La misma línea de código: tú eliges cómo se abre.

Un script y un elemento

El configurador es un web component: una etiqueta de script lo carga y un elemento <cutoptim-configurator> con tu clave pública lo coloca. Un botón con data-cutoptim-open abre una ventana emergente o un panel lateral, y puede preseleccionar el tablero de la página de producto en la que está el cliente.

El código que pegas en tu tienda

<script type="module" src="https://cfg.cutoptim.com/embed/assets/cutoptim-configurator.js"></script>

<button data-cutoptim-open="#cut">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="pk_your_publishable_key" lang="es">
</cutoptim-configurator>

Tu marca, tus textos

Los colores, las fuentes, las esquinas y el tema claro u oscuro siguen tu marca. Unos anclajes ::part con nombre permiten que tu propia hoja de estilos ajuste botones, tarjetas y campos, y cada texto que ve el cliente se puede cambiar por idioma. El configurador funciona en su propia capa aislada, así que los estilos de tu página no lo rompen y él no rompe tu página.

El pedido vuelve a tu tienda

Cuando el cliente hace el pedido, la página recibe un evento cutoptim:order con el pedido y su presupuesto firmado, para que tu tienda lo meta en el carrito. Tu servidor puede comprobar la firma en /cfg/v1/quote/verify antes de aceptar el precio. En el modo de página propia, el cliente vuelve a tu carrito con el pedido.

Seguro por defecto

Tu clave solo funciona en las direcciones web que tú indiques, así que otra web no puede integrar tu configurador con tus precios. Los precios se calculan y se firman de nuestro lado, nunca en el navegador.

Antes de integrarlo, abre la tienda de demostración: muestra el código exacto de cada una de las cuatro formas de abrir el configurador.

Preguntas frecuentes

¿Cómo añado el configurador a mi web?

Pega una etiqueta de script y un elemento <cutoptim-configurator> con tu clave pública en la página donde quieras que aparezca. Elige si se muestra en la propia página, como ventana emergente, como panel lateral o como página propia. La tienda de demostración enseña el código de cada una de las cuatro opciones.

¿Funciona con la plataforma de mi tienda?

Funciona en cualquier página donde puedas añadir HTML y un script: una tienda montada sobre una plataforma habitual o una propia. El pedido llega a tu página como un evento cutoptim:order y, en el modo de página propia, como una vuelta a tu carrito. Para WooCommerce hay un plugin en acceso anticipado; una tienda propia o un ERP verifica el webhook firmado en su servidor.

¿Puedo hacer que tenga el aspecto de mi tienda?

Sí. Defines los colores, las fuentes, el radio de las esquinas y el tema claro u oscuro, ajustas partes desde tu propia hoja de estilos mediante anclajes ::part con nombre y cambias cualquier texto que ve el cliente en cada uno de los diez idiomas.

¿Ralentizará la página de mi producto?

El configurador arranca con un único script pequeño y carga el código de cada paso solo cuando ese paso hace falta. Así, una página que lo muestra como ventana emergente o panel lateral hace la carga pesada únicamente para los clientes que pulsan el botón.

¿Puede otra persona integrar mi configurador?

No. Tu clave pública solo funciona en las direcciones web que le asignes, y cada precio se firma de nuestro lado. Si otra web usa tu clave, se rechaza, y un precio modificado en el navegador no supera la comprobación de la firma.

Más sobre el configurador

CutOptim Configurator →

El configurador de productos para corte a medida de tu tienda online: plan de corte y precio en directo, y pedidos directos a tu tienda.

Demo en vivo →

Introduce piezas en una tienda de demostración y mira cómo se actualizan el plan de corte y el precio mientras escribes.

Reglas de precio →

Por plancha, por m², por metro de corte, canteado, mecanizado, IVA y mínimos: tus precios, en directo.

Plataforma propia →

Verifica el presupuesto firmado y el webhook firmado en tu propio servidor, con ejemplos en Node y PHP.

Plantillas de muebles →

Empieza por un armario, una estantería o un ropero: las piezas, el plan y el precio siguen la medida.

Para servicios de corte →

Distribuidores de tableros, servicios de corte y tiendas de planchas: los clientes piden online, con plan en directo y tus precios.

Plugin de WooCommerce →

Un botón de corte a medida en tus productos WooCommerce; solo un presupuesto verificado se convierte en línea de carrito.

Referencia de la API del configurador: Inicio rápido →

Incrustar, verificar en tu servidor, recibir el webhook firmado: tres pasos.

¿Solo necesitas el motor de corte? Mira la Engine API

Información legalCondiciones del configurador (EN) ·Contrato de encargo de tratamiento (EN) ·Aviso de privacidad para compradores ·Licencias de terceros (EN)