Journeys als Web Components einbetten

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([&#123; journeyId: '<id>', mode: 'inline', lang: 'de' &#125;])
</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:

📄 Web Components – Developer Dokumentation

Journeys als Web Components einbetten

Auf dieser Seite