Quick Links

1. Overview

The Quick Links widget displays a set of internal and external links on a dashboard, so users can reach frequently used pages in one click.

Quick Links is configured through a visual builder. Links, icons, layout and styling can all be set without writing JSON, while Edit JSON remains available for advanced configuration.

The Quick Links widget allows you to:

• Add internal and external links, with external links named automatically after the page's own web title.
• Rename, reorder and delete links, with the option to undo a deletion.
• Choose a favicon, custom icon or uploaded image for each link.
• Display links in a grid or list layout.
• Choose whether links open in a new tab.

2. Adding a Quick Links Widget

Watch the guided demo below to learn how to export data.

You can also follow the same steps using the written guide below.

1. Open the required dashboard tab in edit mode.
2. Click + Add Widget.
3. In the Add Widget window, select New Widget, then select Quick Links.
4. Under Heading, enter a title for the widget. The default is Quick Links.
5. Optionally, click + Add tooltip and enter the tooltip text.
6. In the Data tab, enter an internal link or an external URL (for example, https://figma.com) in the link field.
7. Click Add Link. The link is added to the top of the list and appears in the widget preview.
8. Repeat steps 6 and 7 for each link you want to add.
9. Click Save.

The widget preview on the left updates as you configure it. Clicking Cancel with unsaved changes opens a Discard changes confirmation.

2.1. Automatic Link Titles

External links are named automatically after the page's own web title. For example, adding https://figma.com creates a link titled Figma.

Internal links are recognised automatically and are named after their path (for example, /app/reports). Use Rename to give them a friendlier name (see section 3.1).

2.2. Title and URL Display

Each link shows its title with the URL underneath. Both the title and the URL are kept to a single line. Longer values are truncated with an ellipsis (...).

3. Managing Links

Each link in the list has a drag handle (=) on the left, an icon selector, and a three dot menu on the right.

3.1. Renaming a Link

1. Click the three dot menu next to the link.
2. Select Rename.
3. Enter the new name.
4. Click Update.

3.2. Deleting a Link

1. Click the three dot menu next to the link.
2. Select Delete.

The link is removed and a toast appears with the message 1 link deleted and an Undo option. Click Undo while the toast is visible to restore the link to its original position.

3.3. Reordering Links

Drag a link by its handle (=) and drop it in the required position. The widget preview follows the new order.

3.4. Changing the Link Icon

Click the icon next to a link to choose how it is represented:

• Favicon: Uses the website's own icon. This is the default for new links.
• Custom Icon: Opens an icon search. Select an icon, then pick an icon colour from the colour options or enter a hex value.
• Upload Image: Uses an uploaded image as the icon.

4. Layout and Styling

4.1. Layout

The Layout section offers two display options:

• Grid: Links are shown as tiles, with the icon above the title and URL.
• List: Links are shown as rows, with the icon beside the title and URL. This is the default layout for a new widget.

4.2. Styling

Select the Styling tab to configure how links and the heading are displayed.

5. JSON Configuration

Click Edit JSON in the builder to view or edit the widget configuration directly. Settings made in the builder are written to the config object.

{
    "config": {
        "title": "Quick Links",
        "titleStyle": {
            "fontSize": "large",
            "fontWeight": "bold",
            "color": "#2b8bfe"
        },
        "type": "icon",
        "openInNewTab": true,
        "hideUrl": true,
        "links": [
            {
                "name": "GitHub",
                "value": "https://github.com",
                "useFavicon": false,
                "icon": "fal fa-home",
                "iconColor": "#2b8bfe"
            },
            {
                "name": "Reports",
                "value": "/app/reports",
                "type": "internal",
                "useFavicon": true
            }
        ]
    }
}

5.1. Widget Properties

5.2. Link Properties

6. Notes

• New links are added to the top of the list. Drag them to reorder.
• Clicking Add Link adds the link. Pressing Enter in the link field does not.
• Changes are only applied to the dashboard after clicking Save.

📌 Need Help?

If you require assistance or encounter any issues, please don't hesitate to contact us for further support.