El configurador es un script más un elemento HTML. No necesita instalar nada en su servidor para integrarlo. Todo lo que sigue se puede ensayar en un sandbox antes de pasar a producción.
El código
La categoría Embedding code de la consola le escribe el fragmento en la forma que elija: HTML simple (cuatro variantes), WordPress, un botón de SKU de WooCommerce, o un enlace independiente con un código QR. Su forma es:
<script type="module" src="https://cfg.cutoptim.com/embed/assets/latest/cutoptim-configurator.js"></script>
<cutoptim-configurator mode="inline" key="YOUR_PUBLISHABLE_KEY"
api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>La clave, la dirección del servicio y el idioma proceden de su consola. Una ventana emergente o un panel lateral usa un botón para abrirse:
<button data-cutoptim-open="#cut" data-material="MDF-18">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="YOUR_PUBLISHABLE_KEY"
api="https://cfg.cutoptim.com" lang="en"></cutoptim-configurator>Modos y atributos
| Atributo | Significado |
|---|---|
mode |
inline (por defecto), modal (ventana emergente) o drawer (panel lateral) |
key |
su clave publicable |
lang |
el idioma de cara al cliente |
material |
un tablero de su catálogo, por id o nombre exacto; el flujo empieza entonces en la lista de corte |
thickness |
acota material en milímetros; por sí solo no selecciona nada |
template |
una plantilla de mueble desde la que empezar |
start |
catalog, cutlist o template |
project |
un proyecto guardado que cargar |
customer-token |
su propia referencia opaca al cliente que ha iniciado sesión, de hasta 128 caracteres |
width, height |
el tamaño del contenedor, como longitudes CSS simples |
Una ventana emergente o un panel lateral no carga nada hasta que se abre por primera vez, así que una cuadrícula de productos con muchos botones sigue siendo ligera. Varios configuradores en una misma página funcionan de forma independiente. Un atributo con un valor no válido se descarta, nunca se aplica a medias.
Desde script, el elemento ofrece open(), close(), setMaterial(), loadProject() y setCustomerToken(). Emite eventos sobre sí mismo: cutoptim:ready, step, quote, order, project, error, open y close.
Página independiente, QR e iframe
El mismo configurador puede funcionar como una página propia: enlace a ella, imprima el código QR para el mostrador de una tienda o un quiosco, o envíela a un cliente. Una página que no puede cargar un script puede mostrar esa página en un iframe; solo los dominios que usted indique pueden incrustarla, y los mensajes entre el marco y su página solo se aceptan de esos dominios.
Dominios permitidos
La clave publicable solo funciona desde los dominios indicados para ella. Usted enumera los dominios de su tienda, incluido cualquier dominio de pruebas (staging), al crear la clave en la categoría Keys & embedding; una solicitud de cualquier otro origen se rechaza.
Marca
Los colores, el radio de esquinas, la tipografía, el modo claro u oscuro y todos los textos visibles para el cliente en diez idiomas se definen en la consola y se aplican sin editar su página. La página también puede dar estilo a partes del widget mediante selectores CSS ::part.
Una versión fijada, con integridad
Por defecto el fragmento carga la compilación móvil latest. Cuando el servicio conserva las versiones, la consola puede ofrecer en su lugar un fragmento fijado: una versión numerada concreta con un hash integrity, de modo que el navegador rechaza un archivo que haya sido modificado. Una variante más estricta fija también las partes de carga diferida. Las versiones están firmadas, una versión publicada nunca cambia y una versión anterior sigue disponible para que pueda fijarla durante el tiempo que necesite. Para una Content Security Policy estricta, la consola muestra las directivas que hay que permitir. Los fragmentos fijados requieren que el servicio esté conservando versiones; hasta entonces, la consola ofrece solo el fragmento móvil.
Proyectos guardados
Un cliente puede guardar una lista de corte y volver a ella. El primer guardado crea un token privado que el navegador conserva, de modo que por defecto un proyecto solo está disponible en ese navegador. No hay sincronización entre dispositivos basada en inicio de sesión, y el cliente no puede eliminar un proyecto guardado; los proyectos sin pedido se eliminan tras su periodo de retención.
Regreso a su carrito
Cuando el cliente hace el pedido, el configurador emite el evento de pedido en su página. En la página independiente también puede devolver al cliente a su tienda tras un pedido correcto: usted define una dirección de retorno (solo https, en su propio dominio) y el cliente ve una breve confirmación con un botón Back to the shop. El precio nunca debe tomarse del navegador ni de la dirección de retorno: su servidor verifica primero el presupuesto. Cómo hacerlo está en la página de pedidos; un plug-in listo para WooCommerce está en su propia página y el código de referencia para cualquier otra tienda está en la página de plataformas propias.