Unser Adressen-Block inkl. Google Maps verbessert die Adresserfassung in deinem Flow und erleichtert deinen Besucher:innen die Eingabe ihrer Adressdaten. Er umfasst die folgenden Funktionen:

Autovervollständigung von Adressen über Google Maps: Wenn Nutzer:innen ihre Adressen eingeben, zeigt diese Funktion Autovervollständigungsoptionen in einem Dropdown an und erleichtert die Nutzereingabe.
Anzeige von Adressen auf einer Google Map: Du kannst eine Google Map bzw. Karte zum Flow hinzufügen, die die Adresse der Besucher:innen anzeigt und erscheint, sobald die Nutzer:innen eine gültige Adresse ausgewählt haben.

Hinzufügen des Kartenblocks

Gehe im Blöcke-Tab zu Eingabe und ziehe den Adressenblock in deinen Heyflow
Aktiviere die Integration und schalte die Autovervollständigung mit deinem Google Maps API-Schlüssel frei.
Passe die Einstellungen an, wie z.B. bis zu 15 Länder für die Adresssuche und die Sprache der Ergebnisse.
Aktiviere optional „Google Map anzeigen“ und wähle den Kartentyp (Satellit oder Standard)
Füge ein Systemlabel hinzu, um die Daten sinnvoll zu verarbeiten.
Publiziere deinen Heyflow und schon bist du startklar!

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.

Für die Einrichtung benötigst du ein aktives Google Cloud Project. Du kannst ein Konto hier erstellen. Danach befolge diese Schritte:

Erstelle ein Google Cloud Projekt
API aktivieren
API Key generieren
API Key beschränken
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.

❗ Wichtig: Pro Konto kann nur ein API-Schlüssel verwendet werden.

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.
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.

2. 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.

3. 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 Standard-Domain von Heyflow, 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.

4. 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 nur die vollständige Adresse 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.

Bearbeitungsoptionen

Adressfeld

Auto-Vervollständigung: Bei Aktivierung werden den Nutzer:innen bei Eingabe unterhalb des Feldes Vorschläge angezeigt.
Länder für die Auto-Vervollständigung: Wähle bis zu 15 Länder aus, bei denen die Adresseingabe automatisch ausgefüllt wird.
Sprache der Suchergebnisse: Wähle die gewünschte Sprache, in der die Suchergebnisse deinen Nutzer:innen angezeigt wird.
Sensitiv: Wenn aktiviert, werden die Werte nicht in unserer Datenbank gespeichert (mehr Informationen hier).
Auto-Fokus: Setzt den Maus-Fokus auf das Eingabefeld, sodass die User:in direkt lostippen kann.
Benötigt: Wenn aktiviert, müssen deine User eine Auswahl treffen, bevor sie im Flow weiter klicken können. Die Eingabe ist dann obligatorisch.

Karte

Google Maps anzeigen: Wenn aktiviert, wird eine Google Map bzw. Karte zum Flow hinzugefügt, die die Adresse der Besucher:innen anzeigt. Sie erscheint, sobald die Nutzer:innen eine gültige Adresse ausgewählt haben.
Kartentyp: Wähle aus den zwei Kartentypen Satellit und Straßenkarte, um die Anzeige zu individualisieren.

Abstand

Breite: Hierüber kannst du die maximale Ausbreitung des Blockes anpassen und zwischen S, M, L und maximaler Breite auswählen.
Oben, Unten, Links und Rechts: Über diese Optionen kannst du den Abstand zu allen Seiten festlegen. Verwende hierzu entweder den Schieberegler oder lege die genaue Pixelanzahl fest.

Aussehen

Sichtbarkeit: Hierüber kannst du auswählen, ob der Block nur in der mobilen bzw. Desktop Version angezeigt wird oder diesen gänzlich verstecken.
Hintergrundfarbe: Du kannst du eine Farbe auswählen, die als Hintergrund für den Block genutzt wird.
Schwebendes Label: Das Label erscheint zunächst innerhalb des Feldes, und wenn der Benutzer mit ihr interagiert, "schwebt" das Label über dem Feld und macht Platz für die Eingabe eines Wertes durch den Benutzer.
Info-Zeile anzeigen: Füge zusätzliche Informationen unter dem Eingabefeld ein, z. B. um darauf hinzuweisen, wenn ein Feld optional ist.

Dekoratoren

Präfix Text: Lege ein extra Textfeld vor der Eingabe fest.
Präfix Icon: Lege ein extra Feld mit Icon vor der Eingabe fest.
Suffix Text: Lege ein Textfeld nach der Eingabe fest.
Suffix Icon: Lege ein extra Feld mit Icon nach der Eingabe fest.

Validierung

Auslösen bei: Wähle, nach welcher Aktion der Nutzer:in die Validierung stattfinden soll und das Ergebnis angezeigt werden soll.
Fehlermeldung: Lege den angezeigten Text der Fehlermeldung fest, der bei einer falschen Eingabe angezeigt wird.

Labels & Variablen

System Label: Lege ein System Label für den Block fest.
Variable: Siehe Variable.
Inhalt: Der vorausgefüllte Wert des Feldes. Die User:in kann den Wert ändern, sofern der Block nicht über die Einstellungen deaktiviert wurde.

Verwandte Artikel