Du kannst deinen Heyflow auf viele Arten und Weise nutzen, z. B. in deine Website einbetten, wenn bereits eine besteht. Du bist flexibel, wenn es darum geht, wie der Heyflow auf deiner Website zu platziert wird, z. B. als Inline- oder Popup-Einbettung.

Dieser Artikel enthält:

🔎 Wenn du deinen Heyflow lieber als eigene Seite auf deiner Website nutzen möchtest, erfährst du hier, wie du eine Domain mit deinem Heyflow verbinden kannst.

❗ Wichtiges Update: Ab Februar 2023 werden Heyflows als Webkomponenten statt als iFrames eingebettet, was eine bessere Reaktionsfähigkeit auf dynamische Höhen, eine schnellere Ladezeit und bessere Tracking-Möglichkeiten erlaubt. Wenn du deine Einbettungen bereits eingerichtet hast, empfehlen wir dir dringend, sie erneut einzurichten und dir unseren Changelog unten anzusehen.

Einrichtung

Inline-Einbettung

❗ Bitte beachte: Dein Flow muss veröffentlicht sein, bevor du fortfahren kannst.

Gehe innerhalb deines Heyflows auf den Tab "Integrieren" und dann auf "Einbetten".
Klicke auf "Hinzufügen". Daraufhin öffnet sich auf der rechten Seite eine Leiste, in der du deinen Website-Betreiber auswählen kannst.
Wähle deinen Betreiber oder "Andere".
Wähle zwischen den zwei Optionen zum Einbetten:
- Wenn du "Inline" auswählst, wird dein Heyflow als Element auf deiner Website angezeigt.
- Wenn du "Popup" auswählst, wird dein Heyflow zentriert vor deiner Seite erscheinen.
Gib deine Domain ein und lege bei Bedarf weitere Einstellungen wie die Größe fest.
Klicke auf "Inline hinzufügen".
Kopiere die angegebenen Codeschnipsel und füge sie in deine Website ein.
Hier findest du einige Anleitungen, wie du die Codeschnipsel mit den gängigsten Website-Anbietern verwenden kannst.

Wenn du später Änderungen vornehmen möchtest, gehst du einfach auf den Tab "Konfiguration" und gibst deine Änderungen ein. Vergiss danach nicht, die neu generierten Codeschnipsel auf deiner Website entsprechend zu ersetzen!

Popup-Einbettung

Wenn du unser Popup-Embedding nutzen möchtest, wählst du die Popup-Option und erhältst dann drei Snippets (siehe unten).

Der erste Teil kommt in den Head-Teil deiner Seite. Diesen musst du nur einmal einfügen.
Der zweite Teil sollte für jeden Flow, den du in den Body deiner Seite einbetten willst, eingefügt werden.
Der letzte Teil ist in unserem Beispiel ein einfaches Button-Element, das ein Ereignis auslöst, auf das das modale Element reagiert.

Du kannst mehrere dieser Elemente haben, ohne mehr als ein <heyflow-modal-elements> zu nutzen. Die Verknüpfung zwischen den beiden basiert auf der modal-id. Diese müssen in deinem Element, das das customEvent auslöst, und dem Element, das du öffnen willst, übereinstimmen.

Anbieter

Wenn du wissen möchtest, wie du die Codeschnipsel für deinen Website-Anbieter verwenden kannst, befolge bitte die folgenden Richtlinien. Wenn dein Anbieter hier nicht aufgeführt ist, schaue bitte im Help Center deines Website-Anbieters nach, um weitere Anweisungen zu erhalten.

Individuelle Anpassungen

Weitergabe von URL-Parametern

Wie bereits erwähnt, ist die automatische Übergabe von Parametern von der übergeordneten Seite jetzt mit den Einstellungen deines Heyflows synchronisiert und standardmäßig aktiviert.

Wenn du URL-Parameter manuell zu deinem eingebetteten Heyflow hinzufügen möchtest, kannst du sie direkt im <heyflow>-Tag definieren. Wenn dein Codeschnipsel also so aussieht wie der im Screenshot unten, musst du ihn wie folgt anpassen:

<heyflow-wrapper flow-id="testytest" dynamic-height style-config='{"width": "800px"}' url-parameters="utm_source=Google&utm_campaign=spring01"></heyflow-wrapper>

Start auf einem anderen Screen

Wenn du deinen eingebetteten Flow von einem anderen Screen starten möchtest, dann kannst du einfach eine Screen-Eigenschaft in den Einbettungscode einfügen:

<heyflow-wrapper flow-id="testytest" dynamic-height style-config='{"width": "800px"}' screen="screenname"></heyflow-wrapper>

Dein Flow startet dann auf dem gewünschten Screen und nicht wie üblich auf dem ersten Screen.

Eigenes JavaScript für eingebettete Heyflows

Wenn du benutzerdefiniertes JavaScript für deinen eingebetteten Flow verwenden möchtest, solltest du dir zum Einstieg diesen Artikel ansehen.

Troubleshooting

Mein Flow wird nicht angezeigt

Vergewissere dich, dass du beide Einbettungsskripte korrekt eingefügt hast, eines im Abschnitt Head-Code und eines dort, wo dein Flow erscheinen soll.

Mein Fluss beginnt nicht von oben

Aktiviere in den Einstellungen der Einbettung die Funktion Scrolle nach oben, die automatisch den folgenden Zusatz hinzufügt:

Stelle außerdem sicher, dass du kein Eingabefeld mit aktiviertem Autofokus verwendest. Dies würde dazu führen, dass der Flow direkt im Eingabefeld beginnt und nicht am Anfang.

UTM-Parameter werden nicht durchgelassen

Wenn du WIX als Web Builder verwendest, ist die Übergabe von UTM-Parametern nicht möglich. In allen anderen Fällen werden sie automatisch an deine Flow-Antwort gesendet.

💬 Solltest du weiterhin Probleme haben, wende dich bitte an den Support.

Changelog

Hier ist, was sich mit unserem Update vom Februar 2023 geändert hat:

Die Weitergabe von URL-Parametern ist jetzt mit den Einstellungen deines Heyflows synchronisiert und standardmäßig aktiviert. Wenn du diese Option deaktivieren möchtest, kannst du dies in deinen Flow-Einstellungen tun
Wenn du möchtest, dass dein Submit-Button zum übergeordneten Fenster weiterleitet, musstest du bisher in den Button-Einstellungen "Übergeordnetes Fenster (eingebettet)" als Ziel auswählen. Diese Option funktioniert nicht mit dem neuen Inline-Element. Wähle stattdessen "Gleiches Fenster (_self)".

Wenn du also deine bestehenden Einbettungen ändern willst, musst du nur diese Schritte befolgen:

Richte deine Inline-Einbettung wie bei der Ersteinrichtung oben beschrieben ein.
Achte darauf, dass du die Weiterleitung von "Übergeordnetes Fenster (eingebettet)" in "Gleiches Fenster (_self)" änderst.
Füge die neuen Codeschnipsel in deine Website ein.