# URL Component

> Embed clickable web links as visual cards on your whiteboard canvas for better brainstorming and collaboration with MockFlow Board.

Source: https://mockflow.com/docs/boards/components/url-component-in-ideaboard

Available in:
                    

              Basic
            

              WireframePro
            

              MockFlow Board
            

              Bundle Plan
            

              Enterprise
            

The **URL Component** in MockFlow Board lets you visually embed external links directly onto your whiteboard. Instead of plain text URLs, links appear as **interactive cards** with the website’s title, description, and preview image (when available). This makes your whiteboard richer, more informative, and visually organized.

## **What is the URL Component?**

This component turns any web link into a clickable, formatted card that displays key Open Graph (OG) metadata - such as the title, thumbnail image, and link description. Once added, the card behaves like an interactive preview of the webpage. When clicked, it opens the link in a **new browser tab**, allowing you to quickly reference external resources without leaving your whiteboard.

## **How to add a URL Component?**

1. In the MockFlow Board editor, click on the 'Add' icon in the top left corner.

![Adding URL Component Step 1 - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/d6b0c34a8e88c81ce9dac68f.webp)

1. This will open the components modal. Look for the URL Component and add it to the canvas by dragging and dropping it.

![Ideaboard - URL Component.gif](https://assets.mockflow.com/docs/media/bed0b503280dcdb1cc80ea26.gif)

**Entering the URL:** The link can be added to the URL component by clicking on the 'Edit Link.' The component automatically fetches and displays the website’s **OG title, image, and description** in a clean card layout.

![Adding Links in URL Component - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/32c799b8cbc055a30eeb86a4.gif)

### **Customisation options**

**Background color:** You can customize the background color of the URL component by using the 'Select Color' option.

![Customzing the URL Component - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/e346ef2c8e052969d2dbd1d4.gif)

**Font Settings:** Font settings like Font style, font color, and font size can be updated using the options in the quick toolbar.

![Font settings in URL Component - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/b9fe368e11fb9bce5421b602.webp)

Interacting with the Component: You can use the 'Interact with Component' option to enable interaction with the URL Component. On clicking, you will be directed to the respective link, which is added to the URL component.

![Interaction in URL Component - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/3dc6d73cf8b1810de97a5165.gif)

Accessing the Advanced Settings for URL: To access the advanced settings toolbar, click on the 'Toggle Advanced Settings' option from the quick toolbar. You can find advanced options like themes, shadow, and export.

![Advanced settings in URL Component - MockFlow IdeaBoard ](https://assets.mockflow.com/docs/media/fd3f39edeebad6d830bc49af.webp)

_Use Cases of the URL component_

Design inspiration boards: Collect and visualize design references, landing pages, or ad examples.

Research boards: Organize industry links, articles, and resources for brainstorming sessions.

Project documentation: Link to external reports, project briefs, or task trackers alongside your visual notes.

Marketing planning: Pin campaign URLs, landing page prototypes, or published ads for quick access and discussion.