L’aggiunta di AI-Estimator alla Sua esperienza cliente può avvenire in due modi: incorporando uno strumento di preventivo self-service direttamente sul Suo sito web oppure invitando i clienti ad accedere per ottenere preventivi personalizzati tramite GelatoConnect. Questa guida spiega entrambe le opzioni passo dopo passo.

Aggiungere la funzionalità di auto‑preventivo al tuo sito web

Può integrare l’AI-Estimator in modo che, quando gli utenti cliccano sul pulsante « Richiedi un preventivo », si apra un iframe incorporato che mostri lo strumento di preventivazione. È disponibile un esempio di implementazione come riferimento.

Fasi di implementazione

Rilevamento pulsanti
Aggiunga listener per l’evento di clic al Suo pulsante “Richiedi un preventivo” esistente. Questi dovrebbero impedire la navigazione predefinita e, invece, attivare la modalità iframe.
Sostituzione del contenuto
Quando si apre l'iframe, nasconda il contenuto principale della pagina e il piè di pagina mantenendo visibile l'intestazione. È possibile ottenere questo risultato con le proprietà CSS display o visibility.
Integrazione tramite iframe
Inserisca un iframe a larghezza piena che carichi l'URL del preventivo fornito da Gelato (https://printconnect.gelato.com/XX_XXX).
- Usi height: calc(100vh - 80px) per lasciare spazio all’intestazione (modifichi 80px in base all’altezza effettiva della Sua intestazione).
- Imposti width: 100% per garantire che l'iframe copra l'intera larghezza della pagina.
Pulsante Chiudi
Posizionare un pulsante mobile "Chiudi" nell'angolo in alto a sinistra dell'area dell'iframe.
```
 Close 
```
Configurarlo per nascondere l'iframe, ripristinare il contenuto originale e riabilitare lo scorrimento al clic.
Prevenzione dello scorrimento
Disabiliti lo scorrimento con document.body.style.overflow = 'hidden' quando l'iframe è attivo. Reimposti su auto una volta chiuso.
Gestione dello stato
Utilizzi un flag booleano per tenere traccia se l’iframe è aperto o chiuso. Questo le consente di alternare tra la visualizzazione incorporata e il layout normale del suo sito.

Stili CSS chiave

height: calc(100vh - [header-height]px) per un corretto dimensionamento dell'iframe
width: 100% per un layout a larghezza piena
position: fixed per il pulsante di chiusura
overflow: hidden applicato al body quando l'iframe è attivo
Visualizzazione e occultamento condizionale del contenuto principale

Invitare i clienti a richiedere preventivi personalizzati

Può anche invitare i clienti in modo che ottengano un accesso per creare autonomamente i propri preventivi. In questo modo ricevono prezzi personalizzati in base alle regole tariffarie che ha impostato per loro. Inoltre, non dovranno inserire manualmente dati come nome o email e le richieste dei clienti verificati saranno gestite separatamente.

Vedere la demo video per le istruzioni (24:28 – 29:28)

Come funziona

I clienti connessi dovranno utilizzare la pagina direttamente (non come iframe), poiché ciò è necessario per garantire un'esperienza sicura.
Riceveranno quel link via email quando verranno invitati e potranno anche accedervi su https://printconnect.gelato.com/XX_XXX/login.

[GC - AI Estimator] Configurare l’AI-Estimator per l’auto-quotazione (Sito web + Accesso cliente)