⭐ Verfügbar im folgenden Paket: Coding-Paket (inkl. in Scale)
⭐ Verfügbar in den folgenden Plänen: Business
👀 Nicht sicher, welchen Plan du hast? Überprüfe dein Abonnement.
Heyflow ist ein No-Code-Tool, das es dir ermöglicht, Flows zu erstellen, zu gestalten und zu integrieren, ohne dass du programmieren musst. Wir erlauben dir jedoch, dein eigenes JavaScript zu schreiben, um die Funktionalitäten von Heyflow zu erweitern.
💡 Möchtest du math.js nutzen? Unsere integrierte Berechnungsfunktion unterstützt die gesamte math.js-Syntax. Bei Funktionen einfach das Math. weglassen – statt Math.min(x, y) also min(x, y) in deiner Heyflow-Formel verwenden. Mehr erfahren.
Wie du eigenes JavaScript hinzufügst
So fügst du deinem Flow individuelles JavaScript hinzu:
Öffne den Bauen-Bereich deines Flows.
Klicke im linken Menü auf den Code Bereich
<>und JavaScript.Nutze den Editor, um deinen eigenen Code einzufügen.
Klicke auf JS speichern und veröffentliche deinen Flow, um die Änderungen live zu schalten.
💡 Dein Script wird direkt vor dem Laden des Flows ausgeführt.
🔎 Wenn du auf Navigations- oder Absende-Ereignisse reagieren oder Logik an bestimmten Stellen im Flow ausführen willst, wirf einen Blick auf unsere Events API – dort findest du eine Übersicht aller möglichen Events.
Voraussetzungen
Um Stabilität und Benutzerfreundlichkeit für deinen eigenen JavaScript-Code zu gewährleisten, ist die Nutzung unseres offiziellen FlowSDK erforderlich.
Andere Arten der Manipulation werden von Heyflow nicht unterstützt.
Das FlowSDK gibt dir kontrollierten Zugriff auf Flow-Daten und das Verhalten zur Laufzeit, z. B.:
Eingabewerte lesen und aktualisieren
Sichtbarkeit von Blöcken steuern
Den Flow programmgesteuert navigieren
Spezielle Methoden für bestimmte Blöcke nutzen
Wenn Nutzer:innen mit dem Flow interagiert, passiert im Hintergrund eine Menge: Blöcke werden gerendert, Events registriert, Drittanbieter-Skripte ausgeführt usw. Das FlowSDK hängt sich genau in diese Abläufe ein und bietet dir sichere Einstiegspunkte, um darauf zu reagieren oder sie zu erweitern – so, wie das System es erwartet.
Wenn dein Anwendungsfall das Lesen oder Schreiben von Werten, die Steuerung von Logik oder das Verändern des Flow-Verhaltens betrifft, ist das SDK der einzige offiziell unterstützte Weg.
❗ Direkte DOM-Manipulation (z. B. mit querySelector, innerHTML setzen, Felder manuell einfügen etc.) wird nicht unterstützt. Sie kann jederzeit brechen und es gibt keine Kompatibilitätsgarantie dafür.
🔎 Mehr Infos zum FlowSDK findest du hier.
JavaScript in eingebetteten Heyflow
Wenn du deinen Heyflow auf einer Website eingebettet hast, beachte bitte, dass dein JavaScript im globalen window-Kontext ausgeführt wird – also nicht direkt im Heyflow selbst. Das bedeutet: Dein Code ist nicht automatisch auf den Flow beschränkt, und du musst gezielt darauf achten, ihn korrekt zu adressieren.
Wenn du unsere Web-Komponenten-Einbindung (<heyflow-embed>) verwendest, läuft dein Flow in einem sogenannten Shadow DOM. Dadurch funktionieren direkte DOM-Abfragen (z. B. document.querySelector(...)) nicht wie gewohnt, solange sie nicht richtig eingeschränkt sind.
Damit dein Script korrekt mit dem Flow interagieren kann, solltest du auf das Event heyflow-init warten (siehe Events API) und es nutzen, um sicher und gezielt auf das Shadow DOM zuzugreifen.
let shadowRoot;
window.addEventListener('heyflow-init', (event) => {
shadowRoot =
(document.querySelector(`[flow-id="${event.detail.flowID}"]`) &&
document.querySelector(`[flow-id="${event.detail.flowID}"]`)
.shadowRoot) ||
document;
shadowRoot.querySelector('foobar').value = "baz";
})
❗ Eigenes JavaScript in eingebetteten Flows funktioniert nur, wenn pro Seite ein einzelner Flow eingebettet ist. Mehrere Flows auf derselben Seite können zu Fehlern führen.