Buttons
Add clickable buttons and links to your items and details pages.
Item Link vs Buttons
There are two ways to add clickable actions to your items:
| Feature | Item Link | Buttons |
|---|---|---|
| What it does | Makes the entire item clickable | Adds individual button elements |
| Appearance | No visible button | Styled buttons with labels |
| Best for | Simple navigation | Multiple actions or prominent CTAs |
Adding an Item Link
Make the entire item clickable so visitors can click anywhere on it to navigate.
Open the Items tab
- Open your widget in the Creator
- Go to the Items tab
- Find the Buttons section
Add an Item Link
- Click Add Item Link
- Choose the link action (see options below)
Configure the link
Select where the link should go and which column contains the URL (if applicable).
Item Link Actions
| Action | Description |
|---|---|
| Open Details Page | Navigate to the item’s details page |
| Link to Field | Open a URL from a column in your data |
| External Link | Open the same fixed URL for all items |
Item links are not available on details pages since visitors have already navigated to the item.
Adding Buttons
Add styled button elements with custom labels.
Open the Items tab
- Open your widget in the Creator
- Go to the Items tab
- Find the Buttons section
Add a Button
- Click Add Button
- Choose the button action
- Enter a label and configure the link
Style the button
Click on the button to open the editor and adjust its appearance.
Button Actions
| Action | Description |
|---|---|
| Link to Field | Open a URL from a column in your data (each item links to its own URL) |
| External Link | Open the same fixed URL for all items |
| Open Details Page | Navigate to the item’s details page |
Button Settings
| Setting | Options |
|---|---|
| Action | Link to Field, External Link, Open Details Page |
| Field/URL | Select column or enter URL (depends on action) |
| Link opens in | New tab, Same tab |
| Label | Custom button text |
Button Styling
Click on a button to open the styling editor:
| Setting | Options |
|---|---|
| Font size | S, M, L |
| Font weight | Light to Bold |
| Text colour | Custom colour picker |
| Spacing | Top and bottom padding (S, M, L) |
| Button colour | Custom background colour |
| Shape | Pill (fully rounded), Rounded, Square |
| Border | Toggle on/off, colour, width (Light, Normal, Medium, Heavy) |
| Shadow | Toggle on/off, size (Small, Medium, Large, Extra Large) |
Full Width Buttons
For Cards layout, you can toggle Full width to make buttons span the entire width of the card.
Multiple Buttons
You can add multiple buttons to each item. Drag and drop to reorder them.
Adding Buttons to Details Pages
Details pages have their own button settings, allowing you to add different buttons than the item list.
Open the Details tab
- Open your widget in the Creator
- Go to the Details tab
- Make sure the details page is enabled
- Find the Buttons section
Add and configure buttons
Follow the same process as the item list — add buttons, configure actions, and style them.
The “Open Details Page” action is not available for buttons on details pages, since visitors are already viewing the details.
Full Width on Details Pages
Toggle Full width to make buttons span the full width of the content area on details pages.
Tips
- Use descriptive button labels like “View Website” or “Book Now” instead of generic text like “Click Here”
- Limit to 1-2 buttons per item to avoid clutter
- Use contrasting colours to make buttons stand out
- Consider using Item Link for simple navigation and reserve buttons for important calls-to-action