Widget del Portal del Cliente
El portal del cliente de ContractorScope AI permite a sus clientes ver su presupuesto, hacer preguntas, aprobar el alcance del trabajo y firmar contratos, todo sin necesidad de crear una cuenta ni instalar nada. El widget del portal le permite integrar esta experiencia directamente en su propio sitio web para que los clientes nunca abandonen su marca.
Esta guía cubre la generación de su código de integración, la configuración de la apariencia del widget, lo que ven los clientes cuando abren el portal y cómo funciona el flujo de aprobación.
Qué Hace el Portal del Cliente
Cuando un cliente recibe un enlace de presupuesto de su parte, abre una página con su marca que muestra:
- Un resumen profesional del alcance del trabajo
- Partidas detalladas (con la opción de ocultar el detalle de precios)
- Imágenes de Visualización con IA (si se generaron; consulte Visualización con IA)
- Un hilo de mensajes para que puedan hacer preguntas
- Un botón de Aceptar Presupuesto que recopila su firma electrónica
- Opcional: un botón de pago de anticipo (requiere integración con Stripe)
Los clientes acceden al portal a través de un enlace único y seguro. No se requiere inicio de sesión.
Integrar el Widget en Su Sitio Web
Qué Hace el Widget
El widget del portal del cliente es un pequeño fragmento de código que agrega a su sitio web. Cuando un cliente visita un enlace de presupuesto específico (generado por ContractorScope AI), el portal se muestra en su propio dominio en lugar de en contractorscopeai.com.
Esto mantiene su marca al frente y al centro a lo largo de la experiencia del cliente.
Obtener el Código de Integración
- Vaya a Configuración → Portal del Cliente.
- Haga clic en Configuración del Widget.
- Copie el fragmento de código de integración.
El código de integración tiene este aspecto:
<script
src="https://cdn.contractorscopeai.com/portal-widget.js"
data-company-id="SU_ID_DE_EMPRESA"
defer
></script>
Agregar el Código a Su Sitio Web
Pegue el código de integración en la etiqueta <head> o justo antes de la etiqueta de cierre </body> de cada página de su sitio. Si usa un constructor de sitios web:
| Plataforma | Dónde pegar |
|---|---|
| WordPress | Apariencia → Editor de Temas → header.php, o use un plugin de "Scripts de Encabezado y Pie de Página" |
| Wix | Configuración → Avanzado → Código Personalizado → Sección de encabezado |
| Squarespace | Configuración → Avanzado → Inyección de Código → Encabezado |
| Webflow | Configuración del Proyecto → Código Personalizado → Código del Encabezado |
| Shopify | Tienda en Línea → Temas → Editar Código → theme.liquid |
Si no se siente cómodo editando el código de su sitio web, comparta el fragmento con su desarrollador web o con el equipo de soporte de su alojamiento web. Es una tarea de dos minutos que se hace una sola vez.
Una vez que el código está en su sitio, ContractorScope AI se encarga del resto. Cuando envía a un cliente el enlace de su presupuesto, el portal se carga en su dominio automáticamente.
Formulario de Captura de Leads
Además del portal, puede integrar en su sitio web un formulario de captura de leads para que los clientes potenciales soliciten que los llamen. Los leads nuevos llegan directamente a su cuenta, y su asistente telefónico con IA (Scout) puede darles seguimiento — consulte Asistente de Voz.
Obtener el Código del Formulario
- Vaya a Configuración → Portal del Cliente.
- Abra la sección Captura de Leads y copie el fragmento de código del formulario.
El fragmento incluye un token de integración seguro que vincula cada envío con su empresa. Ese token es obligatorio: es la forma en que ContractorScope AI sabe a qué cuenta pertenece un lead nuevo. Use el código exactamente como se le proporciona; no lo edite ni elimine el token.
Cada fragmento de captura de leads está vinculado a su cuenta mediante su token de integración. Copie siempre su fragmento desde Configuración → Portal del Cliente. Un formulario sin un token válido no creará leads.
Qué Ven y Qué Aceptan los Leads
Cuando un propietario completa el formulario, ve un aviso de consentimiento antes de enviarlo. Le indica, en lenguaje claro, que al enviarlo acepta ser contactado — incluso mediante una llamada telefónica automatizada / con IA (un aviso de consentimiento tipo TCPA). Enviar el formulario es su consentimiento para ese seguimiento.
El formulario también incluye protecciones para que usted solo reciba leads reales:
- Los envíos automatizados de bots se descartan silenciosamente.
- Un envío repetido desde el mismo número de teléfono dentro de 24 horas se ignora, para que no le lleguen duplicados.
- Los datos enviados se depuran antes de llegar a su cuenta.
No hay nada adicional que configurar para estas protecciones: están siempre activas.
Configurar el Widget
Configuración de Apariencia
Personalice cómo se ve el portal para que coincida con su marca:
- Vaya a Configuración → Portal del Cliente → Apariencia.
- Configure:
| Opción | Descripción |
|---|---|
| Logotipo | Cargue el logotipo de su empresa. Aparece en la parte superior del portal. |
| Color Primario | Establece los colores de los botones y acentos. Ingrese un código hexadecimal o use el selector de color. |
| Fuente | Elija entre 6 fuentes profesionales. El valor predeterminado es la fuente del sistema para la carga más rápida. |
| Fondo | Tema de fondo claro u oscuro. |
| Ocultar Precios por Partida | Muestra el alcance del trabajo pero no los precios de las partidas individuales, solo el total. |
| Mostrar Imágenes del Proyecto | Active o desactive si las imágenes de Visualización con IA aparecen en el portal. |
- Haga clic en Guardar. Los cambios se aplican de inmediato a todas las vistas de presupuesto futuras (y a las sesiones del portal actualmente abiertas al actualizar).
Configuración de Notificaciones
Configure cuándo recibe notificaciones sobre la actividad del cliente:
- Vaya a Configuración → Portal del Cliente → Notificaciones.
- Active las notificaciones para:
- El cliente vio el presupuesto
- El cliente envió un mensaje
- El cliente aceptó el presupuesto
- El cliente rechazó el presupuesto
- El cliente solicitó un cambio
- Elija el método de entrega: Correo electrónico, SMS o ambos.
Vistas del Presupuesto Orientadas al Cliente
Lo Que Ve el Cliente
Cuando un cliente abre su enlace de presupuesto, ve:
- Encabezado — Su logotipo y nombre de empresa.
- Resumen del presupuesto — Nombre del cliente, dirección de la propiedad, número de presupuesto y fecha.
- Alcance del trabajo — Partidas agrupadas con descripciones. Los precios de los elementos se muestran u ocultan según su configuración.
- Imágenes del proyecto — Si generó imágenes de Visualización con IA, aparecen aquí con una comparación antes/después.
- Total — El total del presupuesto, el impuesto (si aplica) y cualquier monto de anticipo.
- Hilo de mensajes — Un área de mensajes en estilo chat donde el cliente puede hacer preguntas.
- Botones de acción — Aceptar, Rechazar o Solicitar Cambios.
Experiencia Móvil
El portal del cliente es completamente responsivo. Los clientes que abren el enlace en un teléfono o tableta ven un diseño limpio de una sola columna optimizado para pantallas pequeñas. El botón de aceptar es grande y prominente.
Vencimiento del Enlace del Presupuesto
De forma predeterminada, los enlaces de presupuesto vencen 90 días después de que se creó el presupuesto. Puede cambiar esto por presupuesto o establecer un valor predeterminado:
- Por presupuesto: Abra el presupuesto → haga clic en Compartir → establezca una fecha de vencimiento personalizada.
- Predeterminado: Vaya a Configuración → Portal del Cliente → establezca el Vencimiento Predeterminado del Enlace.
Si un cliente intenta abrir un enlace vencido, verá un mensaje pidiéndole que lo contacte para obtener un enlace actualizado.
Flujos de Aprobación
Cómo Acepta un Presupuesto el Cliente
- El cliente revisa el alcance del trabajo y el total.
- Hace clic en Aceptar Presupuesto.
- Aparece un panel de firma. El cliente escribe su nombre completo y hace clic en Acepto y Firmo.
- El presupuesto firmado queda registrado en ContractorScope AI con una marca de tiempo y dirección IP.
- Usted recibe una notificación instantánea (correo electrónico y/o SMS según su configuración).
- El estado del presupuesto cambia a Aceptado en su dashboard.
Firma Electrónica
El nombre escrito del cliente y la marca de tiempo constituyen la aceptación electrónica. El registro firmado incluye:
- Nombre del cliente tal como fue escrito
- Fecha y hora (UTC)
- Dirección IP del cliente
- Número y versión del presupuesto
Puede descargar un PDF del presupuesto firmado desde la página de detalles del presupuesto. El PDF incluye un bloque de firma al final.
Cobrar un Anticipo
Si conectó Stripe (consulte Integraciones), puede requerir el pago de un anticipo como parte del flujo de aceptación:
- Abra el presupuesto.
- Haga clic en Configuración de Pago.
- Active Requerir Anticipo e ingrese el monto o porcentaje del anticipo.
- Guarde el presupuesto.
Cuando el cliente hace clic en Aceptar Presupuesto, se le solicita que pague el anticipo a través de Stripe antes de que se finalice la aceptación. El anticipo se captura automáticamente y aparece en su dashboard de Stripe.
La integración con Stripe es necesaria para la cobranza de anticipos en el portal. Sin Stripe conectado, el flujo de aceptación se completa sin pago. Puede cobrar el pago por separado.
Solicitar Cambios
Si el cliente hace clic en Solicitar Cambios, puede escribir un mensaje describiendo lo que desea cambiar. Este mensaje aparece en el hilo de mensajes del presupuesto y activa una notificación para usted.
Después de actualizar el presupuesto, reenvíe el enlace. El cliente recibe una nueva notificación y puede revisar el alcance actualizado antes de aceptar.
Próximos Pasos
Una vez que su portal esté activo, explore estas funciones relacionadas: