# Visual Picker Link

## Setting Up Your Visual Picker Link

### Step 1: Add the Picker Link

**What It’s For**: This is where you drop the Picker Link into your Flow and give it a purpose. It’s the foundation—turning a plain link into something users notice and want to click.

* **How**: Drag the **Visual Picker Link** component from the Elements Panel into your Flow canvas.
* **Why**: Sets up a clickable spot that stands out—like a colorful signpost pointing to external content.
* *Example*: Add it to a dashboard to link to a training video or support page.

*What You Get*: A ready-to-customize link that’s live in your Flow, waiting for content and style.

### Step 2: Add Content

Content is the heart of your Picker Link—it’s what users see and click on. Adding a title and description makes it clear what they’re linking to, turning it from a mystery button into an inviting gateway.

* **How**: Fill out the **Title** and **Content** fields in the Properties Panel.
* **Options**:
  * **Title**: Give it a short, catchy name.
    * *Why*: The title is the headline, which grabs attention and summarizes the link’s purpose.
    * *Example*: “Visit Our Blog” for a link to your company’s articles.
  * **Content**: Add a brief description below the title.
    * *Why*: Provides extra context—tells users what to expect when they click, building trust.
    * *Example*: “Check out our latest tips and updates” under the “Visit Our Blog” title.<br>
* *Example Setup*:
  * Title: “Download Guide”
  * Content: “Get our free PDF on best practices”
  * Result: A clear, enticing link to a downloadable file.

*What You Get*: A Picker Link that speaks for itself—users know precisely where it’s taking them.

### Step 3: Add an Icon (Optional)

An icon adds a visual spark to your Picker Link, making it more eye-catching and memorable. It’s like a little flag that visually draws users in and ties the link to its content.

* **How**: In the Properties Panel, enable the icon option and choose its placement.
* **Options**:
  * **Placement**: Put the icon on the left or right of the content.
    * *Why*: Left icons lead the eye naturally (great for emphasis), while right icons complement the text (subtle flair).
    * *Example*: A “globe” icon on the left for “Visit Our Site” feels bold; it’s a gentle nudge on the right.
  * **Icon Choice**: Pick from Salesforce’s icon library (e.g., “world,” “document,” “arrow”).
    * *Why*: Matches the icon to the link’s purpose—reinforces meaning without words.
    * *Example*: A “download” arrow for “Get the App” points users to an app store link.
* *Example*: Add a “link” icon on the left of “Explore Resources” to hint at external content.

*What You Get*: A Picker Link that pops visually—icons make it inviting and quick to recognize.

### Step 4: Add Interactions

Interactions decide what happens when users click the Picker Link—turning it from a static label into an active bridge to external content. This is where you define the action, making it a seamless part of your Flow.

* **How**: Open the **Interactions Panel** and set up what triggers when users interact.
* **Available Interaction**:
  * **On Click**: Fires an action when the Picker Link is clicked.
    * *Why*: Links the click to something meaningful—like opening a URL or running a Flow step—giving it purpose.
    * *Example*: Set “On Click” to open [www.example.com/resources](http://www.example.com/resources) in a new tab when users click “Explore Resources.”
    * *How to Configure*:
      1. Select “On Click” in the Interactions Panel.
      2. Choose an action (e.g., “Navigate to URL”).
      3. Enter the destination (e.g., a website or file link).<br>
* *More Options*: Check the full interactions list for additional possibilities (e.g., triggering a Flow or showing a modal).<br>

*What You Get*: A Picker Link that does something—clicking it takes users exactly where you want, smoothly and reliably.

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/visual-picker-link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.