L'ajout d'AI-Estimator à votre expérience client peut se faire de deux manières : en intégrant un outil de devis automatique directement sur votre site web, ou en invitant les clients à se connecter et obtenir des devis personnalisés via GelatoConnect. Ce guide explique les deux options étape par étape.

Ajouter une fonctionnalité d'auto-devis à votre site web

Vous pouvez intégrer l'AI-Estimator de sorte que lorsque les utilisateurs cliquent sur votre bouton « Obtenir un devis », une iframe intégrée s'ouvre et affiche l'outil de devis. Un exemple d'implémentation est disponible pour référence.

Étapes de mise en œuvre

Détection de bouton
Ajoutez des écouteurs d'événements de clic à votre bouton « Obtenir un devis » existant. Ceux-ci doivent empêcher la navigation par défaut et déclencher le mode iframe à la place.
Remplacement de contenu
Lorsque l'iframe s'ouvre, masquez le contenu de la page principale et le pied de page tout en gardant l'en-tête visible. Ceci peut être réalisé avec les propriétés CSS display ou visibility.
Intégration iframe
Insérez un iframe pleine largeur qui charge l'URL de devis fournie par Gelato (https://printconnect.gelato.com/XX_XXX).
- Utilisez height: calc(100vh - 80px) pour laisser de l'espace pour l'en-tête (ajustez 80px en fonction de la hauteur réelle de votre en-tête).
- Définissez width: 100% pour vous assurer que l'iframe couvre toute la largeur de la page.
Bouton de fermeture
Placez un bouton flottant « Fermer » dans le coin supérieur gauche de la zone iframe.
```
 Close 
```
Configurez-le pour masquer l'iframe, restaurer le contenu original et réactiver le défilement lorsqu'il est cliqué.
Prévention du défilement
Désactiver le défilement avec document.body.style.overflow = 'hidden' lorsque l'iframe est active. Le rétablir à auto une fois fermé.
Gestion d'état
Utilisez un indicateur booléen pour suivre si l'iframe est ouverte ou fermée. Cela vous permet de basculer entre la vue intégrée et la mise en page normale de votre site.

Styles CSS clés

height: calc(100vh - [header-height]px) pour un dimensionnement approprié de l'iframe
width: 100% pour une mise en page pleine largeur
position: fixed pour le bouton de fermeture
overflow: hidden appliqué au body lorsque l'iframe est active
Masquage et affichage conditionnels du contenu principal

Inviter les clients à obtenir des devis personnalisés

Vous pouvez également inviter des clients afin qu'ils obtiennent un accès pour établir leurs propres devis. Cela garantit qu'ils obtiennent une tarification personnalisée selon les règles de tarification que vous avez définies pour eux. Cela supprime également le besoin pour eux de saisir manuellement des détails comme le nom ou l'e-mail, et sépare les demandes des clients vérifiés

Voir la démonstration vidéo pour les instructions (24:28 – 29:28)

Comment ça fonctionne

Les clients connectés devront utiliser la page directement (pas en tant qu'iframe) car cela est requis pour une expérience sécurisée.
Ils recevront ce lien par e-mail lors de l'invitation, et ils peuvent également y accéder à l'adresse https://printconnect.gelato.com/XX_XXX/login.

[GC - AI Estimator] Configuration de l'auto-devis AI-Estimator (site web + connexion client)