Visual Picker Link
The Avonni Picker Link is a dynamic, clickable component that connects users to external content—like websites, documents, or resources—in a visually appealing way.
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.
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 in a new tab when users click “Explore Resources.”
How to Configure:
Select “On Click” in the Interactions Panel.
Choose an action (e.g., “Navigate to URL”).
Enter the destination (e.g., a website or file link).
More Options: Check the full interactions list for additional possibilities (e.g., triggering a Flow or showing a modal).
What You Get: A Picker Link that does something—clicking it takes users exactly where you want, smoothly and reliably.
Last updated
Was this helpful?