Mit dem Einbettungskonfigurator legst du fest, wie eine Journey auf deiner Website eingebettet werden soll. Dieser Artikel zeigt dir den Konfigurator Schritt für Schritt, erklärt die verfügbaren Darstellungsmodi und Einbettungsarten und beschreibt, wie du Werte beim Laden der Journey vorbefüllst.

Journey-Einbettung konfigurieren

So gelangst du zum Einbettungskonfigurator:

1. Erstelle oder editiere eine Journey.
2. Klicke auf „Speichern und Einbettung konfigurieren".

oder “Einbetten”-Button

Aufbau des Einbettungskonfigurators

Im Konfigurator wählst du auf der rechten Seite den Darstellungsmodus der Journey: Vollbildschirm oder Inline. Auf der linken Seite siehst du eine Live-Vorschau im responsiven Kontext deiner Website — so kannst du auch die Darstellung auf mobilen Endgeräten prüfen.

Vollbildschirm

Im Darstellungsmodus Vollbildschirm wird ein Button auf deiner Website platziert. Klickt der Website-Nutzer darauf, öffnet sich die Journey als Vollbild-Overlay über deiner Website.

Für Vollbildschirm kannst du im Konfigurator definieren:

• Text des Buttons
• Sprache der Journey (Standard: Deutsch)
• Ausrichtung des Buttons (links, mittig, rechts)
• Scroll-Verhalten beim Navigieren

Inline

Im Darstellungsmodus Inline wird die Journey direkt als Teil der Website im Fenstermodus dargestellt.

Für Inline kannst du im Konfigurator definieren:

• Sprache der Journey (Standard: Deutsch)
• Breite (50 %, 80 %, 100 %)
• Kopfleiste der Journey mit Logo ein-/ausblenden
• Scroll-Verhalten beim Navigieren

Beispiel: Einbettung als Vollbildschirm

So bettest du eine Journey als Vollbildschirm in deine Website ein:

1. Wähle den Darstellungsmodus Vollbildschirm.
2. Lege die Bezeichnung des Buttons fest.
3. Wähle die Ausrichtung des Buttons (links, mittig, rechts).
4. Klicke in der Vorschau auf den Button, um das Verhalten zu prüfen.
5. Speichere die Einstellungen und kopiere den Einbettungscode in die Zwischenablage.
6. Füge den Einbettungscode an der gewünschten Stelle deiner Website ein.

Einbettungsarten im Überblick

Darstellungsmodus (Vollbildschirm oder Inline) und Einbettungsart sind zwei unabhängige Entscheidungen. Du wählst zuerst, wie die Journey angezeigt wird (Darstellungsmodus), und dann, mit welchem Code sie auf deine Website kommt (Einbettungsart). epilot bietet drei Einbettungsarten: Legacy, Web Component und SDK.

SDK

Die SDK ist eine moderne JavaScript-Bibliothek mit einer einheitlichen Schnittstelle für iframe-Einbindung und Web Component. Sie ist die empfohlene Wahl für alle neuen Anbindungen.

Setup, Schnittstellen-Referenz und Hinweise zur Umstellung vom Legacy-Einbettungscode findest du im DEV-Guide zur SDK.

Web Component

Die Web Component rendert die Journey direkt in deiner Seite über Shadow DOM — das bringt bessere Performance, bessere Bedienbarkeit und eine engere Integration in deine Host-Seite. Du bindest sie über das HTML-Tag <epilot-journey> ein. Zudem wird auch ein trocken möglich, was mit der Legacy/SDK Variante nur über Umwege möglich war.

Details und Beispiele findest du im DEV-Guide zur Web Component.

Legacy

Der Legacy-Einbettungscode mit __epilot.init() ist die ursprüngliche Einbettungsart. Bestehende Anbindungen funktionieren weiter, neue Projekte sollten aber die SDK oder die Web Component nutzen.

Die Referenz für den Legacy-Einbettungscode findest du im DEV-Guide.

Daten in eine eingebettete Journey vorbefüllen

Wenn deine Website oder dein eigener Tarifrechner schon Informationen über die Endkundin oder den Endkunden kennt — zum Beispiel den ausgewählten Tarif, die Adresse oder den Jahresverbrauch — kannst du diese Werte beim Einbetten direkt in die Journey-Blöcke vorbefüllen. Deine Kundinnen und Kunden setzen nahtlos dort fort, wo sie auf deiner Website aufgehört haben: Was sie dort schon eingegeben oder berechnet haben, steht in der Journey bereit und lässt sich direkt für Logiken, Berechnungen und Preise nutzen.

Die Vorbefüllung deckt drei Anwendungsfälle ab:

1. Werte vorbefüllen — einzelne Felder in Journey-Blöcken mit Werten von außen befüllen.
2. Startschritt frei wählen — die Journey nicht bei Schritt 1 starten, sondern an einem späteren Schritt.
3. Schreibgeschützt setzen — übergebene Werte vor versehentlichen Änderungen schützen.

Die Vorbefüllung funktioniert mit allen drei Einbettungsarten — Legacy, Web Component und SDK.

Visueller Generator im Einbettungskonfigurator

Statt den Einbettungscode selbst zu schreiben, klickst du dir die Vorbefüllung im Konfigurator zusammen:

1. Öffne den Einbettungskonfigurator (Speichern und Einbettung konfigurieren oder Einbetten-Button).
2. Scrolle runter bis zum Reiter “Data Injection”. 

   

1. Wähle die Blöcke, die du beim Laden der Journey vorbefüllen möchtest. 
2. Wähle pro Block die Felder, die einen Wert von außen bekommen sollen (zum Beispiel Firma, Ort, Verbrauch). 

   

1. Optional: Lege den Startschritt fest oder setze einzelne Blöcke schreibgeschützt.
2. Kopiere den fertigen Einbettungscode oder drücke auf Übernehmen— passend zur gewählten Einbettungsart (SDK, Web Component oder Legacy). Die konkreten Werte trägst du in deinem eigenen Code ein; die Block-Verweise sind bereits ausgefüllt.

Werte vorbefüllen

Pro Block wählst du die Felder aus, die einen Wert von außen bekommen sollen. Der generierte Einbettungscode verknüpft die Werte über feste Block-IDs statt über Block-Namen oder Schritt-Positionen — so bleibt deine Anbindung auch dann stabil, wenn du einen Block umbenennst oder einen Schritt umsortierst.

Die konkreten Werte trägst du in deinem eigenen Code ein. epilot speichert keine Werte — nur die Information, welche Blöcke und Felder vorgesehen sind.

Startschritt frei wählen

Wenn die Endkundin oder der Endkunde zum Beispiel den Tarif bereits auf deiner Website ausgewählt hat, kannst du die Journey direkt an einem späteren Schritt starten — der vorherige Schritt wird übersprungen. Auch der Startschritt wird über eine feste Schritt-ID verknüpft; ein Umsortieren von Schritten bricht die Anbindung nicht.

Schreibgeschützt setzen

Damit übergebene Werte nicht versehentlich von der Endkundin oder dem Endkunden geändert werden, kannst du einzelne Blöcke — oder einzelne Felder in einem Block — schreibgeschützt setzen. Die Werte werden angezeigt, sind aber nicht bearbeitbar.