⭐ Verfügbar im folgenden Paket: Conversion-Paket (inkl. in Growth, Scale)
⭐ Verfügbar in den folgenden Plänen: Pro, Agency, Business
👀 Nicht sicher, welchen Plan du hast? Überprüfe dein Abonnement.
Mit dem Address & Maps Block machst du es deinen Nutzer:innen besonders einfach, ihre Adresse einzugeben – und stellst sicher, dass du saubere und vollständige Daten bekommst. Der Block bietet dir folgende Funktionen:
Autovervollständigung von Adressen über Google Maps: Beim Eintippen erscheinen automatisch passende Adressvorschläge in einem Dropdown. Die Integration ist so eingerichtet, dass sie bei jeder Abfrage – zum Beispiel bei der Autovervollständigung oder dem Anzeigen der Karte – eine sichere Verbindung zu Google herstellt. Dabei wird ein spezieller Zugangsschlüssel mitgeschickt, sozusagen wie ein Ausweis, um Zugriff zu erhalten.
Nur vollständige Adressen akzeptieren: Wenn diese Option aktiviert ist, können Nutzer:innen erst weiterklicken, wenn eine vollständige Adresse (z. B. Straße, Postleitzahl, Ort) eingegeben wurde. Bitte beachte, dass die Option „Autovervollständigung von Adressen“ aktiviert sein muss, damit du das Kontrollkästchen für die Option „Vollständige Adresse“ sehen kannst.
Adresse auf Google Map anzeigen: Zeige die ausgewählte Adresse direkt auf einer Karte im Flow – ideal für mehr Transparenz und Vertrauen.
Inhalt bearbeiten
Nach dem Klick auf einen Block findest du rechts den Bereich Inhalts. Hier fügst du neue Elemente hinzu oder bearbeitest bestehende Inhalte.
Vergib einen Label, um das Feld zu beschreiben, und füge einen Platzhalter hinzu, der zeigt, was eingegeben werden soll. Aktiviere den Info-Text, um zusätzliche Hinweise zu geben, und definiere eine Fehlermeldung, die bei ungültiger Eingabe angezeigt wird.
Einstellungen anpassen
Nach dem Klick auf einen Block findest du rechts den Bereich Einstellungen. Hier passt du Optionen, Darstellung und Verhalten des Blocks so an, wie es zu deinem Flow passt.
Module
Google Maps
Aktiviere Karte & Autovervollständigung, um eine automatische Adresssuche mit Google Maps-Integration zu ermöglichen (Abrechnung erfolgt über deinen Google-Account). Du kannst optional nur die Google Map anzeigen oder nur die Autovervollständigung ohne Kartenansicht nutzen.
Allgemein
Aktiviere Sensibel, wenn die eingegebenen Werte nicht in unserer Datenbank gespeichert werden sollen (mehr Informationen hier). Mit Erforderlich stellst du sicher, dass deine User eine Eingabe machen müssen, bevor sie im Flow weiterklicken können. Durch Autofokus wird der Cursor direkt ins Eingabefeld gesetzt, sodass die User:in sofort mit der Eingabe beginnen kann.
Erscheinungsbild
Über die Sichtbarkeit legst du fest, ob der Block nur auf dem Desktop, nur mobil oder gar nicht angezeigt wird. Wähle eine passende Hintergrundfarbe, um das Design individuell zu gestalten. Mit dem Label-Verhalten bestimmst du, ob das Label standardmäßig, schwebend außerhalb oder schwebend innerhalb des Eingabefelds angezeigt wird.
Abstände
Passe die Breite des Blockes (S, M, L oder max.) an und definiere die Abstände nach oben, unten, links und rechts mit einer Pixelangabe.
Dekorationen
Füge einen Präfix-Text oder ein Präfix-Icon hinzu, um vor der Eingabe hilfreiche Hinweise oder Symbole anzuzeigen.
Ebenso kannst du einen Suffix-Text oder ein Suffix-Icon verwenden, um nach der Eingabe zusätzliche Informationen oder visuelle Elemente darzustellen.
Validierung
Unter Auslösen bei wählst du aus, nach welcher Aktion der Nutzer:in die Validierung durchgeführt und das Ergebnis angezeigt werden soll – zum Beispiel nach dem Tippen, Auswählen oder Klicken.
Labels & Variablen
System Label legen fest, wie deine Daten gespeichert und organisiert werden, während Variablen es dir ermöglichen, diese Daten dynamisch in deinem Flow zu nutzen und anzuzeigen.
Definiere ein System Label, um den Block intern eindeutig zu kennzeichnen. Die Variable dient zur Weiterverarbeitung des Werts an anderer Stelle (siehe Variable).
Unter Inhalt kannst du einen vorausgefüllten Wert hinterlegen. Die User:in kann diesen anpassen, sofern der Block nicht über die Einstellungen deaktiviert wurde.
Verbinden des API Key
Bevor du deinen Flow mit Besucher:innen teilen kannst, musst du deinen Google API-Schlüssel bzw. Key verbinden. Dieser Schlüssel sorgt dafür, dass der Adresse & Karte Block mit deinem Konto verknüpft ist und Abrechnungen ausschließlich für Anfragen über deinen Block erfolgen.
❗ Wichtig: Pro Konto kann nur ein API-Schlüssel verwendet werden.
Für die Einrichtung benötigst du ein aktives Google Cloud Project. Du kannst ein Konto hier erstellen. Danach befolge diese Schritte:
API Key verändern oder entfernen (wenn nötig)
🔎 Wenn du mehr über die Preismodelle und API-Kosten von Google erfahren möchtest, dann klicke hier.
1. Erstelle ein Google Cloud Projekt
Nachdem du dich angemeldet oder ein Konto erstellt hast, befindest du dich auf der Startseite. Bitte folge den nächsten Schritten, um dein eigenes Projekt zu erstellen:
Klicke oben links auf Projekt auswählen.
Da du gerade dein Konto erstellt hast, musst du zunächst eine Organisation festlegen. Wähle im Dropdown-Menü die Organisationsressource aus, in der du ein Projekt erstellen möchtest. Wenn du wissen möchtest, wie du eine Organisation einrichten kannst, klicke hier.
Klicke oben rechts auf Neues Projekt.
Gebe in dem nun erscheinenden Fenster deinen Projektnamen ein und wähle ein Rechnungskonto. Achte darauf, dass dein Projektname nur Buchstaben, Zahlen, einfache Anführungszeichen, Bindestriche, Leerzeichen oder Ausrufezeichen enthält und zwischen 4 und 30 Zeichen lang ist.
Wenn du dein Rechnungskonto noch einrichten musst, schau dir diese Seite an und folge den Schritten. Stelle sicher, dass dein hinterlegtes Zahlungsmittel auch in der lokalen Währung abgerechnet werden kann.
Deine Organisation ist bereits vorher eingerichtet. Das bedeutet, dass du nur noch deinen Speicherort einrichten musst. Gebe die übergeordnete Organisations- oder Ordnerressource in das Feld ein. Diese Ressource ist das hierarchisch übergeordnete Element des neuen Projekts. Wenn die Option Keine Organisation angezeigt wird, kannst du sie auswählen, um das neue Projekt als oberste Ebene seiner eigenen Ressourcenhierarchie zu erstellen.
Klicke auf Erstellen und dein neues Projekt ist fertig!
💡 Weitere Informationen zur Erstellung eines Projekts findest du hier.
2. API aktivieren
Um mit deinem Google API zu starten, musst du es zuerst aktivieren. Aktiviere sowohl die Places API (New) (achte darauf, dass es die neue Version ist) als auch die Maps JavaScript API.
3. API Key generieren
Um einen API-Schlüssel zu erstellen, folge diesen Schritten:
Gehe zur Google Cloud-Plattform und wähle das Projekt, das du verbinden möchtest.
Öffne das Navigationsmenü oben links, gehe zu APIs & Services und dann zu Credentials.
Klicke auf „Create credentials“ und wähle API key.
Ein Popup zeigt dir deinen neuen API-Schlüssel.
In der Listenansicht kannst du den Schlüssel bearbeiten, um ihn umzubenennen und einzuschränken.
4. API Key beschränken
Das Einschränken deines API-Schlüssels ist optional, wird jedoch dringend empfohlen, um unerwünschte oder missbräuchliche Nutzung zu verhindern.
Um Anwendungsbeschränkungen einzurichten, füge die Domains hinzu, auf denen deine Flows laufen oder eingebettet sind. Nutzt du die Heyflow Default Domain, stelle sicher, dass du die richtige Domain als Referrer hinzufügst, um die Einschränkung zu aktivieren.
❗ Wichtig: Autovervollständigung und die Karte funktionieren in der Vorschau nicht, wenn der API-Schlüssel eingeschränkt ist. Sie funktionieren nur auf den freigegebenen Webseiten.
5. API Key verändern oder entfernen
Wenn du deinen API-Schlüssel bearbeiten oder entfernen möchtest, gehe zu deinem Konto unter Integrationen. Klicke auf Google Maps und anschließend auf Konten verwalten, um das Konto einfach zu entfernen.
Adressen in Antworten
Wenn eine Antwort mit Daten aus dem Adressen-Block eingereicht wird, erhältst du standardmäßig die vollständige Adresse. Zusätzlich werden die Daten nach Kategorien wie Land, Stadt, Straße und mehr aufgeschlüsselt.
Wenn du deine Antworten an eine unserer Integrationen wie HubSpot sendest, kannst du die vollständige Adresse oder auch nur bestimmte Kategorien, wie z.B. Land, Stadt, etc. zuordnen.
Troubleshooting
Mir werden keine Vorschläge bei der Adresseingabe angezeigt
Damit Adressvorschläge korrekt angezeigt werden, muss die URL deines Flows exakt mit der in Google registrierten URL übereinstimmen. Wenn dein Flow über eine Subdomain erreichbar ist, muss diese angegeben werden – die Root-Domain allein reicht nicht aus.
💡 Tipp: Kopiere die URL direkt aus der Browserleiste, um Tippfehler zu vermeiden.
Bedenke, dass deine Domain mit oder ohne „www“ verwendet werden kann, da dies die Erreichbarkeit beeinflusst. Falls dein Flow sowohl unter „www.beispiel.com“ als auch unter „beispiel.com“ funktionieren soll, stelle sicher, dass beide Varianten bei Google registriert sind.
Wenn dein Flow auf einer Website eingebettet ist, gib die exakte URL der Seite an, auf der er eingebunden ist. Wichtig: Verwende die vollständige Domain mit „https://“.
💡 Tipp: Nutze Wildcards (*), um mehrere Subdomains abzudecken – z. B. deckt „https://*.beispiel.com“ alle Subdomains unter „example.com“ ab. So bleibt dein Flow über verschiedene Subdomains hinweg erreichbar.
In meinen Antworten werden Adressen ohne oder mit unvollständiger Postleitzahl angezeigt
Manchmal werden Adressen ohne oder mit unvollständiger Postleitzahl in den Antworten angezeigt. Das passiert, wenn Orte ohne Hausnummer oder bekannte Wahrzeichen (z.B. „Fischmarkt Hamburg“) gesucht werden.
Heyflow nutzt Google Maps für die Adresssuche. Dort gibt es manche Orte sowohl als offizielle Einträge inkl. Postleitzahl als auch als benutzergenerierte Inhalte. Falls ein benutzergenerierter Eintrag keine Postleitzahl enthält, wird diese nicht in deiner Antwort angezeigt.
Adresse wird in den Antworten in Einzelteile aufgeschlüsselt
Wenn die Option Auto-Vervollständigung aktiviert ist, wird die eingegebene Adresse in den Antworten automatisch in ihre Bestandteile zerlegt – also Straße, PLZ, Stadt und Bundesland.
Geben Nutzer:innen die Adresse jedoch manuell ein und klicken nicht auf einen der Vorschläge aus der Autovervollständigung, erscheint die Adresse in den Antworten nur als einzeiliger Text – ohne Aufschlüsselung.