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.
❗ Allgemeine Support Information
Individuelle Skripte und Selbst-Hosting: Bitte beachte, dass wir keine benutzerdefinierten Skripte und kein Self-Hosting des Flows unterstützen. Um eine optimale Sicherheit und Leistung deiner Flows zu gewährleisten, solltest du immer unsere offiziellen Skripte verwenden.
Widget-Version: Widget-Skripte mit bestimmten Versionsnummern sind nicht mehr aktuell und sollten ersetzt werden. Wenn du derzeit ein Skript wie https://static.heyflow.app/widget/1-6-2/widget.min.js verwendest, aktualisiere es bitte auf die folgende Version: https://assets.prd.heyflow.com/builder/widget/latest/webview.js
❗ Wichtiges Updates
Wenn du die Einbettung vor Oktober 2024 eingerichtet hast, empfehlen wir, Caching auf deiner Website zu deaktivieren, um das Risiko zu vermeiden, dass auf eine alte Version des Widgets verwiesen wird.
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
Intro
Gehe innerhalb deines Heyflows auf den Tab "Integrieren" und dann auf "Einbetten".
❗ Bitte beachte: Dein Flow muss veröffentlicht sein, bevor du fortfahren kannst.
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 Änderungen an deinem Flow vornimmst und diesen neu publiziert, dann werden alle Änderungen automatisch in deinem eingebetteten Flow angezeigt.
Inline-Einbettung
Wenn du unsere Inline-Einbettung nutzen möchtest, wähle die Inline-Option und folge den nächsten Schritten:
Gib die Domain, auf der dein Flow eingebettet werden soll
Lege bei Bedarf weitere Einstellungen bezüglich der Größe fest, wie z.B. die initiale Höhe oder Breite
Passe weitere Einstellungen deiner Einbettung an
Dynamische Höhe: Passt die Höhe des Elements automatisch die Höhe des Heyflows an. Dies überschreibt die initiale Höhe
URL Parameter weitergeben: Gibt URL Parameter, z.B. as utm_source, automatisch an den Heyflow weiter.
Volle Breite: Setzt die Breite des Elements auf 100%.
Scroll nach oben: Scrolle die Seite automatisch zum Flow wenn von Screen zu Screen navigiert wird.
Klicke auf "Inline hinzufügen".
Kopiere die angegebenen Codeschnipsel und füge sie in deine Website ein.
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.
🔎 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 die Einbettungeinstellungen 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ähle die Popup-Option und folge den nächsten Schritten:
Gib die Domain, auf der dein Flow eingebettet werden soll
Lege bei Bedarf weitere Einstellungen bezüglich der Größe fest, wie z.B. die initiale Höhe oder Breite
Passe weitere Einstellungen deiner Einbettung an
Dynamische Höhe: Passt die Höhe des Elements automatisch die Höhe des Heyflows an. Dies überschreibt die initiale Höhe
URL Parameter weitergeben: Gibt URL Parameter, z.B. as utm_source, automatisch an den Heyflow weiter.
Volle Breite: Setzt die Breite des Elements auf 100%.
Scroll nach oben: Scrolle die Seite automatisch zum Flow wenn von Screen zu Screen navigiert wird.
Klicke auf "Inline hinzufügen".
Kopiere die angegebenen Codeschnipsel und füge sie in deine Website ein.
Der erste Teil kommt in den Head-Teil deiner Seite. Diesen musst du nur einmal einfügen.
Der zweite Teil sollte an einer beliebigen Stelle in den Body deiner Seite 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. Füge diesen Code an dem exakten Ort ein, wo du den Button platzieren möchtest. Du kannst den Button individuell innerhalb des Codes weiter stylen.
<button style="background:#3630a3;color:white; border-radius: 8px;
onclick="window.dispatchEvent(new CustomEvent('heyflow-modal-element:open', { detail: { modalId: 'XoonEvirK4H-_B0Qq4y3m' }}))">Dein Button Text</button>
💡 Du kannst mehrere dieser Einbettungen 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.
❗ Allgemeine Support Information
Individuelle Skripte und Selbst-Hosting: Bitte beachte, dass wir keine benutzerdefinierten Skripte und kein Self-Hosting des Flows unterstützen. Um eine optimale Sicherheit und Leistung deiner Flows zu gewährleisten, solltest du immer unsere offiziellen Skripte verwenden.
Widget-Version: Widget-Skripte mit bestimmten Versionsnummern sind nicht mehr aktuell und sollten ersetzt werden. Wenn du derzeit ein Skript wie https://static.heyflow.app/widget/1-6-2/widget.min.js verwendest, aktualisiere es bitte auf die folgende Version: https://assets.prd.heyflow.com/builder/widget/latest/webview.js
Mein Flow 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.
Nächste Schritte
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.