.png)
Journeys als Web Components einbetten
Inhaltsverzeichnis
Was sind Web Components?
Web Components ermöglichen es, eine Journey direkt in den Code deiner Website einzubetten. Die Journey verhält sich dabei wie ein echtes Bestandteil deiner Seite: Styles und Skripte sind sauber voneinander getrennt, ohne dass sie sich gegenseitig beeinflussen.
Deine Vorteile auf einen Blick:
- Schnellere Ladezeiten – Journeys laden schneller und laufen flüssiger.
- Bessere Integration – Journey und Website können direkt miteinander kommunizieren, für ein nahtloses Nutzererlebnis.
- Einfacheres Tracking – Nutzerverhalten innerhalb der Journey lässt sich problemlos mit Tools wie Hotjar, Google Analytics und anderen messen und auswerten.
- Bessere SEO – Inhalte in Web Components werden von Suchmaschinen besser indexiert und wirken sich positiv auf das Ranking deiner Seite aus.
- Sauberes Design auf allen Geräten – die Journey passt sich besser an verschiedene Bildschirmgrößen an und beeinflusst das restliche Design deiner Seite nicht.
Einrichtung
Schritt 1: Embed-Script einbinden
Füge folgenden Code in den <head>-Bereich deiner Website ein:
<script
src="https://journey.epilot.io/stable/assets/embed.js"
type="module"
async
></script>💡 Hinweis
Das async-Attribut sorgt dafür, dass das Script im Hintergrund geladen wird und deine Seite nicht verlangsamt.
Schritt 2: Journey-Element platzieren
Füge das <epilot-journey>-Element an der Stelle ein, an der die Journey erscheinen soll:
<epilot-journey
journey-id="deine-journey-id"
mode="inline"
lang="de"
top-bar="true"
></epilot-journey>Ersetze deine-journey-id mit der ID deiner Journey. Die Journey-ID findest du im Journey Builder.
Schritt 3: Fertig
Die Journey wird jetzt direkt auf deiner Seite angezeigt.
Verfügbare Einstellungen
| Einstellung | Mögliche Werte | Standard | Beschreibung |
|---|---|---|---|
| journey-id | Text | – | Pflichtfeld. Die ID der Journey, die angezeigt werden soll. |
| mode | inline, full-screen | full-screen |
inline zeigt die Journey direkt auf der Seite. full-screen öffnet sie als Overlay. |
| lang | de, en, fr | de | Sprache der Journey-Oberfläche. |
| top-bar | true, false | true | Navigationsleiste oben ein- oder ausblenden. |
| scroll-to-top | true, false | true | Seite bei jedem neuen Schritt nach oben scrollen. |
| close-button | true, false | true | Schließen-Button in der Navigationsleiste anzeigen. |
Anzeigemodi
Inline-Modus
Die Journey erscheint direkt eingebettet im Seiteninhalt:
<epilot-journey
journey-id="deine-journey-id"
mode="inline"
lang="de"
top-bar="true"
></epilot-journey>
Vollbild-Modus
Die Journey ist zunächst ausgeblendet und öffnet sich erst, wenn ein Button geklickt wird:
<epilot-journey
journey-id="deine-journey-id"
mode="full-screen"
lang="de"
top-bar="true"
close-button="true"
></epilot-journey>
<button onclick="document.querySelector('epilot-journey').setAttribute('is-full-screen-entered', 'true')">
Journey öffnen
</button>
Hinweise & Einschränkungen
⚠️ Achtung
Pro Seite kann nur eine Journey gleichzeitig als Web Component eingebettet werden. Wenn du mehrere Journeys gleichzeitig anzeigen möchtest, nutze bitte die iframe-Einbettung.
💡 Hinweis
Wenn du eine andere Journey laden möchtest, ändere einfach die journey-id des bestehenden Elements – füge kein zweites Element hinzu.
Content-Security-Policy (CSP)
Wenn du eine Content-Security-Policy für deine Website definiert hast, ergänze bitte folgende Regeln:
script-src https://journey.epilot.io, style-src https://journey.epilot.io und https://fonts.googleapis.com, img-src https://file.sls.epilot.io, https://file-preview.sls.epilot.io und https://journey.epilot.io, font-src https://journey.epilot.io und https://fonts.gstatic.com, connect-src https://.sls.epilot.io, https://.epilot.io und https://portal.epilot.cloud, frame-src https://journey.epilot.io und https://portal.epilot.cloud sowie form-action https://submission.sls.epilot.io und https://journey.epilot.io.
💡 Hinweis
Wenn du keine CSP für deine Seite definiert hast, kannst du diesen Schritt überspringen.
Von iframes auf Web Components wechseln
Du nutzt aktuell iframes? Der Wechsel ist einfach:
1. Altes Script ersetzen:
<!-- Vorher -->
<script src="https://embed.journey.epilot.io/bundle.js"></script>
<!-- Nachher -->
<script src="https://journey.epilot.io/stable/assets/embed.js" type="module" async></script>
2. Initialisierung ersetzen:
<!-- Vorher -->
<div id="epilot-journey-<id>"></div>
<script>
__epilot.init([{ journeyId: '<id>', mode: 'inline', lang: 'de' }])
</script>
<!-- Nachher -->
<epilot-journey journey-id="<id>" mode="inline" lang="de"></epilot-journey>💡 Hinweis
Die iframes-Einbettung bleibt weiterhin verfügbar und wird nicht abgeschaltet.
Weitere Informationen
Für eine detailliertere technische Dokumentation – inklusive erweiterter Konfigurationsmöglichkeiten, Data Injection und Event-Handling – besuche unsere Developer-Dokumentation:
Für eine bessere Lesbarkeit beziehen sich Personenbezeichnungen auf alle Geschlechter.