Añadir AI-Estimator a la experiencia de sus clientes puede hacerse de dos maneras: integrando una herramienta de auto‑presupuesto directamente en su sitio web o invitando a los clientes a iniciar sesión y obtener presupuestos personalizados a través de GelatoConnect. Esta guía explica ambas opciones paso a paso.

Añadir funcionalidad de auto‑presupuesto a su sitio web

Puede integrar el AI-Estimator para que, cuando los usuarios hagan clic en su botón «Get a Quote», se abra un iframe incrustado y se muestre la herramienta de presupuestos. Hay disponible una implementación de ejemplo como referencia.

Pasos de implementación

Detección de botones
Añada detectores de eventos de clic a su botón existente de “Solicitar presupuesto”. Estos deben impedir la navegación predeterminada y, en su lugar, activar el modo de iframe.
Reemplazo de contenido
Cuando se abra el iframe, oculte el contenido de la página principal y el pie de página, manteniendo el encabezado visible. Esto se puede lograr con las propiedades CSS display o visibility.
Integración mediante iframe
Inserte un iframe de ancho completo que cargue la URL del presupuesto proporcionada por Gelato (https://printconnect.gelato.com/XX_XXX).
- Use height: calc(100vh - 80px) para dejar espacio para el encabezado (ajuste 80px según la altura real de su encabezado).
- Establezca width: 100% para asegurarse de que el iframe cubra todo el ancho de la página.
Botón cerrar
Coloque un botón flotante «Cerrar» en la esquina superior izquierda del área del iframe.
```
 Close 
```
Configúrelo para ocultar el iframe, restaurar el contenido original y volver a habilitar el desplazamiento al hacer clic.
Prevención del desplazamiento
Desactive el desplazamiento con document.body.style.overflow = 'hidden' cuando el iframe esté activo. Restáurelo a auto al cerrarse.
Gestión de estados
Utilice una bandera booleana para determinar si el iframe está abierto o cerrado. Esto le permite alternar entre la vista incrustada y el diseño normal de su sitio.

Estilos CSS clave

height: calc(100vh - [header-height]px) para un dimensionado correcto del iframe
width: 100% para un diseño de ancho completo
position: fixed para el botón cerrar
overflow: hidden aplicado al cuerpo cuando el iframe está activo
Mostrar u ocultar el contenido principal de forma condicional

Invitar a los clientes a solicitar presupuestos personalizados

También puede invitar a clientes para que obtengan un acceso y puedan hacerse sus propios presupuestos. Así se asegura de que reciban un precio personalizado según las reglas de precios que haya configurado para ellos. Además, ya no tendrán que introducir manualmente datos como el nombre o el correo electrónico, y se separarán las solicitudes de los clientes verificados.

Vea la demostración en vídeo para obtener instrucciones (24:28–29:28)

Cómo funciona

Los clientes que hayan iniciado sesión deberán usar la página directamente (no como un iframe), ya que eso es necesario para una experiencia segura.
Recibirán ese enlace por correo electrónico cuando sean invitados, y también podrán acceder a él en https://printconnect.gelato.com/XX_XXX/login.

[GC - AI Estimator] Configurar la auto-cotización de AI-Estimator (Sitio web + Inicio de sesión del cliente)