Das Hinzufügen von AI-Estimator zu Ihrem Kundenerlebnis ist auf zwei Arten möglich: Entweder binden Sie ein Self-Quote-Tool direkt auf Ihrer Website ein, oder Sie laden Kundinnen und Kunden ein, sich anzumelden und über GelatoConnect personalisierte Angebote zu erhalten. Diese Anleitung erklärt beide Optionen Schritt für Schritt.

Hinzufügen einer Selbstangebot-Funktionalität zu Ihrer Website

Sie können den AI-Estimator integrieren, sodass beim Klicken auf Ihren „Angebot anfordern“-Button ein eingebettetes iframe geöffnet wird und das Angebots-Tool angezeigt wird. Eine Beispielimplementierung steht als Referenz zur Verfügung.

Implementierungsschritte

Schaltflächenerkennung
Fügen Sie Ihrem vorhandenen „Angebot anfordern“-Button Click-Event-Listener hinzu. Diese sollten die Standardnavigation verhindern und stattdessen den iFrame-Modus auslösen.
Inhaltsersatz
Wenn das iFrame geöffnet wird, blenden Sie den Hauptseiteninhalt und den Footer aus, während die Kopfzeile sichtbar bleibt. Dies kann mit den CSS-Eigenschaften display oder visibility erreicht werden.
Iframe-Integration
Fügen Sie ein iframe in voller Breite ein, das die von Gelato bereitgestellte Angebots-URL lädt (https://printconnect.gelato.com/XX_XXX).
- Verwenden Sie height: calc(100vh - 80px), um Platz für die Kopfzeile zu lassen (passen Sie 80px entsprechend der tatsächlichen Höhe Ihrer Kopfzeile an).
- Setzen Sie width: 100%, um sicherzustellen, dass das iframe die volle Seitenbreite abdeckt.
Schließen-Schaltfläche
Platzieren Sie eine schwebende „Schließen“-Schaltfläche in der oberen linken Ecke des iFrame-Bereichs.
```
 Close 
```
Konfigurieren Sie es so, dass beim Klicken der iFrame ausgeblendet, der ursprüngliche Inhalt wiederhergestellt und das Scrollen erneut aktiviert wird.
Scroll-Verhinderung
Deaktivieren Sie das Scrollen mit document.body.style.overflow = 'hidden', wenn das iFrame aktiv ist. Setzen Sie es nach dem Schließen wieder auf auto zurück.
Zustandsverwaltung
Verwenden Sie eine boolesche Kennzeichnung, um zu verfolgen, ob das iFrame geöffnet oder geschlossen ist. So können Sie zwischen der eingebetteten Ansicht und dem normalen Layout Ihrer Website umschalten.

Wichtige CSS-Stile

height: calc(100vh - [header-height]px) für die korrekte Größe des iFrames
width: 100% für ein Layout in voller Breite
position: fixed für die Schließen-Schaltfläche
overflow: hidden wird auf den Body angewendet, wenn das iFrame aktiv ist
Bedingtes Ausblenden und Anzeigen des Hauptinhalts

Kundinnen und Kunden zu persönlichen Kostenvoranschlägen einladen

Sie können auch Kundinnen und Kunden einladen, damit sie einen Login zum Selbst-Kalkulieren erhalten. So stellen Sie sicher, dass sie personalisierte Preise gemäß den von Ihnen festgelegten Preisregeln bekommen. Außerdem entfällt für sie die manuelle Eingabe von Angaben wie Name oder E‑Mail, und Anfragen von verifizierten Kundinnen und Kunden werden separat behandelt.

Siehe Videodemo für Anweisungen (24:28–29:28)

So funktioniert es

Angemeldete Kundinnen und Kunden müssen die Seite direkt verwenden (nicht als iFrame), da dies für eine sichere Nutzung erforderlich ist.
Sie erhalten diesen Link bei der Einladung per E-Mail, und sie können auch unter https://printconnect.gelato.com/XX_XXX/login darauf zugreifen.

Verwandte Artikel

[GC - AI Estimator] Einrichten des AI-Estimator-Selbstangebots (Website + Kunden-Login)