Links and Link Button
Heyflow avatar
Written by Heyflow
Updated over a week ago

Links serve as essential connectors, enabling users to navigate, reference, share, and interact in your flow.


Links Block

The links block is often used in the footer to redirect to the company's imprint or data privacy, or when wanting to show multiple links at once.

Adding the links block

  1. In the blocks tab, navigate to Navigation and drag the links block into your heyflow.

  2. Insert the URLs you want to redirect to and choose if the links should be opened in the same or a new window.

  3. Change the label on the button and add new options if necessary.

  4. Publish your heyflow, and you’re good to go!

💡 Tip: When inserting #screenname, you redirect to a specific screen when clicking on the link.


Link Button

As a variation of the buttons, you can easily insert a link button to redirect to a different URL.

💡 Tip: You can also use other buttons, like the submit button or universal button, to insert links. Find out more about buttons here.

Adding the link button

  1. In the blocks tab, navigate to Buttons and drag the link button into your heyflow.

  2. Adjust the navigation to Redirect.

  3. Insert the URL you want to redirect to and choose if the link should be opened in the same or a new window.

  4. Change the label on the button.

  5. Just publish your heyflow, and that's it!

🔎 Learn more about redirecting to a URL with entries from your flow via variables here. If a variable in the redirect URL has no value, it can be removed entirely, including the prefixed '&term=' by simply activating the feature under General.


Links in other blocks

In addition to the options above, you can also insert links in other blocks as well. When blocks have a text element, you can insert any text that includes a link. Just mark the text and select link to insert your link from the menu that appears.

You can also insert links to the following other blocks that don't include text:

To do so, just select the respective block and click on Enable link in the General tab. Insert your link afterwards and select if your link should be opened at the same window or in a new window.


Examples

E-Mail

When using mailto:[email protected] the user is redirected to the mail provider and a new email draft opens with the inserted email as the recipient.

Calling

If you want the user to immediately call you when clicking on a button, you can simply use the following entry to redirect to: tel:0123456679.

Share

There are already multiple share link generators on the market, which help you create links for users to send to friends & family and share your flow on Social Media or messengers.

Download

There are multiple ways to include a download when clicking on a link button. In our example, let's take a look at a file uploaded in Google Drive. In order to download your file from Google Drive on the click on the link, you need to change the URL to this one:

https://drive.google.com/uc?export=download&id=FILEID

You can find the File ID in the URL in the link of your file:

Also, it is important to give general access to anyone with the link in the sharing settings.


Edit Options Links Block

Spacing

  • Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.

  • Top, Bottom, Left and 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 select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.

  • Background colour: You can select a colour to be used as the background for the block.

  • Align label: You can use this option to select the placement of the label. The label can be centred, left-aligned or right-aligned.

Links

  • Link URL: Insert the link URL of each link option of this block.

  • Open in...: Decide whether the link should be opened in the same or a different window of your browser.


Edit Options Link Button

General

  • Navigation: Select the action that takes place when you click on the button. Navigate to the next screen of your flow or go to a specific screen of your flow. Redirect to a different page or define specific rules for the navigation that react to the user's input. Alternatively, you can select no action.

  • No validation: Ignore all validations that are set for the blocks on this screen.

Spacing

  • Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.

  • Top, Bottom, Left and 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 select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.

  • Background colour: You can select a colour to be used as the background for the block.

  • Button size: Choose the size of the button.

  • Content align: Choose how the content of the block is aligned.

  • Show line 2: Select whether a second line with text elements should be displayed.

  • Fit width to content: Reduce the width of the button to its content.

  • Align: Layout of block placement relative to a page.

Tracking

  • Tracking activated: Send a tracking event when this block is clicked.

  • Event name: Name of the tracking event that will be sent to your integrated tracking tool (e.g. Google Analytics).

Did this answer your question?