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

Im Tab Blöcke gehe zu Eingabe und ziehe den Kartenblock 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 vom 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.

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

API aktivieren

Um mit deinem Google API zu starten, musst du es zuerst aktivieren. Wähle entweder die Places API (New) (achte darauf, dass es die neue Version ist) oder die Maps JavaScript API.

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.

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.

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 Adresse & Karte 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.

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

Native Autovervollständigung