Un configurador de producto es una herramienta en tu web que deja al cliente combinar solo opciones compatibles y ver el precio al momento; una calculadora de presupuesto hace lo mismo con servicios. Bien construido, descarta combinaciones imposibles y entrega a tu equipo comercial un lead con la configuración completa. Lo desarrollamos dentro de nuestras webs a medida con lógica de negocio propia.
Sin configurador, el formulario de "pide presupuesto" abre una cadena de emails para aclarar medidas y acabados, y el comercial dedica horas a contactos que nunca iban a comprar. Mientras espera, el cliente puede pedir precio a otro proveedor.
Al terminar sabrás si tu oferta cabe en un configurador y cómo convertirlo en leads listos para la puntuación automática de leads según lo que configuran.
Qué es un configurador de producto
Un configurador de producto es un formulario guiado que valida cada elección del cliente con reglas de negocio y calcula el precio con su desglose, de modo que el resultado es un presupuesto viable que tu equipo comercial puede aceptar sin revisarlo a mano.
Nielsen Norman Group lo encuadra como un asistente paso a paso en el que las opciones posteriores dependen de las anteriores. En su guía sobre asistentes de varios pasos (Raluca Budiu, 2017) recomienda mostrar en qué paso está el usuario y permitirle salir y retomar sin perder lo introducido. Sus reglas y precios deberían salir del mismo ERP que usas para integrar Amazon y Miravia con el ERP en tu venta online.
Reglas de compatibilidad y cálculo de precio
Las reglas de compatibilidad deciden qué opciones se pueden combinar, y conviene guardarlas como datos editables fuera del código de la interfaz.
Dos tipos cubren muchos casos: exclusiones (este acabado no existe en ese material) y requisitos (esta medida obliga a un refuerzo). Guardadas como tabla, se cambian sin desplegar.
El precio se calcula en el navegador para responder al instante y se recalcula en el servidor antes de guardarlo, porque lo que envía el navegador se puede manipular. Trabaja en céntimos enteros para que ambos cálculos coincidan. Ese presupuesto validado es el que después alimenta la generación automática de presupuestos y contratos desde la web. Si el precio incluye portes, tómalos de tarifas reales mediante la integración con transportistas para calcular portes.
Guardar, retomar y enviar al CRM como lead cualificado
Un configurador que no guarda la configuración pierde al cliente que necesita consultarlo con alguien antes de decidir.
Guarda cada configuración con un identificador y genera un enlace para retomarla; si el cliente deja su email, envíale ese enlace. Al enviar, el CRM recibe la configuración con su precio y el origen de la visita, y puede puntuar el lead antes de que nadie llame. Si la visita vino de una campaña, devolver la venta cerrada a la plataforma completa el ciclo que explica cómo conectar Google Ads con tu CRM en Madrid.
Experiencia de uso, medición y rendimiento
Un configurador convierte mejor cuanto menos pide, y el informe "Website Forms Usability: Top 10 Recommendations" de Nielsen Norman Group (2016) recuerda que cada campo que eliminas de un formulario aumenta su conversión.
Los errores se muestran junto al campo en cuanto el usuario termina de rellenarlo, como recomiendan las pautas de errores en formularios de NN/g (2019). La interfaz debe cumplir la accesibilidad web obligatoria también en configuradores, y si el tráfico llega de campañas, la landing de SEM que aloja el configurador debe cargar rápido y sin distracciones.
Para medir, Google Analytics 4 incluye eventos recomendados de leads como `generate_lead` al enviar y `qualify_lead` cuando el comercial lo valida; añade un evento propio por paso para ver dónde se abandona. Cada cambio de opción debe responder rápido: web.dev considera buena una Interaction to Next Paint de 200 milisegundos o menos. Si hay visor 3D, cárgalo de forma diferida.
Cuándo compensa un configurador frente a un formulario
Un configurador compensa cuando tu precio depende de opciones combinables con reglas conocidas; si cada caso exige diagnóstico previo, basta un formulario bien hecho.
- Cuándo sí: muchas solicitudes repiten las mismas preguntas antes de dar precio.
- Cuándo sí: tus comerciales pierden tiempo con leads que no encajan en tus mínimos.
- Cuándo no: cada proyecto requiere visita o auditoría antes de presupuestar.
- Cuándo no: tu catálogo cambia cada semana y nadie mantendrá las reglas.
La decisión final es de experiencia de usuario que convierte visitas en presupuestos: el configurador gana cuando ahorra preguntas al cliente.
CodeZone Pro Tip: este motor de reglas valida exclusiones y requisitos entre opciones y calcula el precio en céntimos con desglose, de forma que el mismo código sirve en el navegador y en el servidor.
type Seleccion = Record<string, string>; // atributo -> opción elegida
interface Opcion { id: string; precio: number } // precio en céntimos
interface Regla { si: [string, string]; tipo: "excluye" | "requiere"; objetivo: [string, string]; motivo: string }
interface Modelo { base: number; atributos: Record<string, Opcion[]>; reglas: Regla[] }
export function evaluar(modelo: Modelo, sel: Seleccion) {
const errores: string[] = [];
for (const r of modelo.reglas) {
if (sel[r.si[0]] !== r.si[1]) continue; // la regla solo aplica si se eligió su condición
const presente = sel[r.objetivo[0]] === r.objetivo[1];
// "excluye" falla si la combinación prohibida está elegida; "requiere", si falta la obligatoria
if ((r.tipo === "excluye" && presente) || (r.tipo === "requiere" && !presente)) errores.push(r.motivo);
}
const desglose = [{ concepto: "Base", importe: modelo.base }];
for (const [atributo, opcionId] of Object.entries(sel)) {
const opcion = modelo.atributos[atributo]?.find((o) => o.id === opcionId);
// Una opción que no está en el catálogo invalida el presupuesto: nunca se cotiza a ciegas
if (!opcion) { errores.push(`Opción desconocida: ${atributo}=${opcionId}`); continue; }
if (opcion.precio !== 0) desglose.push({ concepto: `${atributo}: ${opcion.id}`, importe: opcion.precio });
}
// Enteros en céntimos: el total del navegador y el del servidor coinciden al céntimo
const total = desglose.reduce((suma, linea) => suma + linea.importe, 0);
return { valido: errores.length === 0, errores, desglose, total };
}En negocio, el cliente ve un precio desglosado que no cambia cuando el comercial lo revisa, y tu equipo solo recibe presupuestos viables.
El Coste de Cotizar a Mano lo Que una Regla Puede Validar
Cotizar a mano lo que una regla puede validar retrasa cada respuesta y enfría los leads buenos. Un configurador mal mantenido es peor: promete precios que no puedes cumplir.
En Codezone partimos de las reglas y precios que ya usa tu equipo comercial.
Si tu web aún responde a cada presupuesto con un email, cuéntanos cómo cotizas hoy.
