Our Address & Maps Block improves address collection in your flow, making it easier for your visitors to insert their address data. It includes the following features:

Autocomplete addresses via Google Maps: When users type their addresses, this feature shows autocomplete options in a dropdown and facilitates the user input.
Display addresses on a Google Map: You can add a Google Map to the flow displaying the visitor’s address, which will appear once users have selected a valid address.

Adding the Address & Maps Block

In the blocks tab, navigate to Input and drag the Address & Maps Block into your heyflow
Enable the integration and activate Autocomplete with your Google Maps API key, as described below.
Adjust the Autocomplete settings, such as up to 15 countries to autocomplete address and the language of the autocomplete results
If you want, activate Show Google Map and choose your map type (satellite vs. default street map)
Add a system label to make sure you are processing the data in a meaningful way.
Just publish your heyflow and you’re good to go!

Connecting your API

Before you can share your flow with your audience, you need to connect your Google API key. Your Google API key makes sure that your Address & Maps Block is connected to your account, and only requests made through your block will be billed to your account.

For the setup, an active Google Cloud Project account is necessary. You can create one here.

🔎 If you want to learn more about Google's pricing models and API costs, click here.

❗ Important: You can only use one API key per account.

How to enable APIs

To get started with your Google API, you need to first enable it. Go to the Places API (New) (make sure it's the new version) or use the Maps JavaScript API.

How to generate an API key

To generate an API key, follow these steps:

Go to your Google Cloud platform and head to the project you would like to connect your flow to.
Click on the navigation icon in the top left corner, go to APIs & Services and then to Credentials
Click on the “Create credentials” button and select API key
A pop-up window with your new API key will open.
In the list view, you can click the edit icon to rename your API key and set its restrictions

How to restrict an API key

Restricting your API key is optional, but highly recommend because it prevents unintended or malicious usage of your project.

To set up application restrictions, you simply need to add the domains connected to your flows or where your flows are embedded as application restriction under websites.

If you're using our default Heyflow domain, make sure to add the correct domain as a referrer to enable the restriction.

❗ Important: The autocomplete and the map do not work on the preview when the API key is restricted. It only works on the restricted websites.

How to remove or edit an API key

If you want to remove or edit your API key, go to your account and integrations. When clicking on Google Maps and manage accounts, you can easily remove the account.

Addresses in Responses

When a response is submitted including data from the Address & Maps block, per default you'll get the information about the complete address, but also see the data per category, such as country, city, street and much more.

When sending your responses to one of our integrations, e.g. HubSpot, you're only able to map the complete address.

Edit Options

Address Field

Autocomplete: When enabled, users are shown suggestions below the field as they type.
Restrict autocomplete results: Select up to 15 countries where address suggestions will automatically be provided.
Language for autocomplete results: Select the desired language, in which the autocomplete results are shown to the users.
Sensitive: If activated, the values are not saved in our database (more information here).
Autofocus: Sets the mouse focus on the input field so that the user can start typing immediately.
Required: If activated, your users must make a selection before they can continue clicking in the flow.

Map

Show Google Map: You can add a Google Map to the flow displaying the visitor’s address, which will appear once users have selected a valid address.
Map Type: Select from the two map types (satellite vs. default street map) to individualize how the Google Map is shown.

Spacing

Width: Here you can adjust the maximum spread of the block and choose between S, M, L and maximum width.
Top, Bottom, Left, Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

Visibility: Here you can choose whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background color: You can select a colour to be used as the background for the block.
Floating label: The label initially appears within the field, and when the user interacts with it, the label "floats" above the field and makes room for the user to enter a value.
With info: Add additional information below the input field, e.g. to indicate when a field is optional.

Decorators

Prefix text: Specify an extra text field before the input.
Prefix icon: Specify an extra field with an icon before the input.
Suffix text: Specify a text field after the input.
Suffix icon: Specify an extra field with an icon after the input.

Validation

Trigger on: Select after which action of the user:in the validation should take place and the result should be displayed.
Error message: Specify the error message text that is displayed if an incorrect entry is made.

Labels & Variables

System label: Specify a system label for the block.
Variable: See Variable.
Content: The prefilled value of the field. The user can change the value if the block has not been deactivated via the settings.