Hyperlink Field

The hyperlink field is a Collection feature that enables adding dynamic hyperlinks to designs — for instance, to generate signup URLs to external event platforms (e.g., Eventbrite) or hyperlinks to social platforms. Hyperlink fields are usually associated with text links or buttons and can be employed to filter Collection arrays, or to exhibit specific components using conditional display in Collection arrays or on Collection pages.

Power Tip: You can embed inline hyperlinks with the rich text field.

Throughout this tutorial, you’ll understand:

1. Steps for constructing a hyperlink field
2. Methods to link hyperlink fields to text and hyperlinks
3. Ways to refine a Collection array with the hyperlink field
4. Strategies to establish conditional visibility with the hyperlink field

Steps for constructing a hyperlink field

You are capable of establishing a hyperlink field in any new or existing Collection. Proceed to your Collection settings, tap Add another field, and opt for Hyperlink. To input content into a hyperlink field, select a Collection item in the CMS and insert any valid URL to this field. You can utilize relative hyperlinks (e.g., “/about-us”) in the hyperlink field.

Methods to link hyperlink fields to text and hyperlinks

You can link hyperlink fields to text features in Collection arrays or on Collection pages to showcase the URL dynamically as text. To associate a hyperlink field with a text element:

1. Pick the text element (e.g., text block) on the canvas
2. Visit Element settings panel > “Element” settings
3. Activate the Fetch text from “Collection” checkbox
4. Select the hyperlink field from the dropdown

Alternatively, you can link a hyperlink field to any hyperlink element, such as buttons, in Collection arrays or on Collection pages, to design a dynamic hyperlink. To associate a hyperlink field with a hyperlink element:

1. Choose the hyperlink element (e.g., hyperlink block, button) on the canvas
2. Access Element settings panel > Link settings
3. Tick the Fetch URL from “Collection” checkbox
4. Select the hyperlink field from the dropdown

You can detach linked hyperlink fields from text and hyperlink elements by deselecting the Fetch URL from “Collection” or Fetch text from “Collection” checkbox(es) in the Element settings panel.

Ways to refine a Collection array with the hyperlink field

To refine your Collection array using a hyperlink field:

1. Identify the Collection array you wish to refine on the canvas
2. Access Element settings panel > Collection array settings > Filters
3. Tap the “plus” symbol to create a filter
4. Select the hyperlink field from the initial dropdown
5. Pick a criteria (e.g., Equals, Does not equal, etc.) from the second dropdown
6. (Optional) Specify the value if required
7. Hit Save

Criteria for filtering

You can utilize the subsequent filtering criteria with hyperlink fields:

• Equals — searches for Collection items with a URL identical to the URL you specify for this criterion
• Does not equal — scans for Collection items with a URL that isn’t identical to the URL you specify for this criterion
• Is set — looks for Collection items that possess any URL set for this hyperlink field
• Is not set — hunts for Collection items lacking any URL set for this hyperlink field

Get more insights on filtering Collection arrays.

Strategies to establish conditional visibility with the hyperlink field

You can configure conditional visibility to present or conceal individual elements in a Collection array or on a Collection page employing the hyperlink field.

For instance, if you maintain a Collection of individuals and aspire to list their project websites, knowing that not all have project websites, you can devise a hyperlink to each person’s project site, visible only when a project site link is set.

To institute this condition, you’ll need to incorporate a hyperlink field to your Collection (e.g., “Project site”), attach project site links for each person with one in their related Collection item, and devise an element to serve as the link to their project. Then:

1. Select the hyperlink element on the canvas
2. Access Element settings panel > Link settings
3. Activate the Fetch text from “Collection” checkbox
4. Select the hyperlink field from the dropdown
5. Visit Element settings panel > Conditional visibility
6. Press the “plus” symbol
7. Pick the hyperlink field (e.g., “Project site”) from the initial dropdown
8. Select Is set in the second dropdown
9. Press Save

Get more insights on conditional visibility.