Pins are persistent, always-visible elements you attach to specific parts of your UI to give users on-demand help, contextual tips, or quick actions — without interrupting their workflow. Use them anywhere you'd place a native tooltip or helper button, except you don't need engineering to build or update them.

Also known as: persistent tooltips, helper icons, contextual buttons, in-app help icons.

When to use Pins

• Answer common questions right where they come up (e.g., a "?" icon next to a confusing setting)
• Give users a way to relaunch an onboarding tour or product walkthrough on demand
• Link to help articles, external resources, or other pages from inside your product
• Surface tips, best practices, or feature context without cluttering the UI
• Add persistent CTAs like "Take a tour" or "Learn more" that stay on the page

How Pins work

Pins are anchored to a specific element on a page using a CSS selector. When the page loads and the element is visible, the Pin appears. They stay on the page as long as the user qualifies to see them based on your audience and page targeting rules.

Pins are completely separate from Flows. They don't interfere with Flows, and Flows don't interfere with them — both can appear on the same page at the same time. You can also target multiple Pin experiences to the same page, and qualifying users will see all of them.

There are two types of Pins:

Icon w/ Tooltip

A small icon (question mark, info, or custom SVG) placed next to an element. When a user hovers over or clicks the icon, a tooltip expands with content you define — text, images, buttons, custom HTML, or links.

Use Icon w/ Tooltip Pins to provide explanations, tips, or additional context without taking up screen space.

Button

A clickable button placed next to an element. Button Pins immediately trigger a Flow or navigate to a URL — there's no tooltip step in between.

Button styles include Primary, Outline, Text link, and custom SVG icon. Use Button Pins when the action is self-explanatory and users don't need additional context before clicking.

Key details

• Persistent by default. Pins stay visible on the page whenever the user qualifies. They don't disappear after a single view the way a Flow set to "Show Once" does.
• No Flow limits impact. Pins are separate from Flows and don't count toward any Flow display limits.
• Embedding options. Place Pins inline (left or right of the target element) or overlayed on top of it.
• Styling. Pins inherit styling from your selected Theme. Custom CSS is not supported in Pins at this time.
• Accessibility. Pins are accessible via screen readers and keyboard navigation. Inline Pins follow DOM tab order; overlayed Pins become the last focusable element on the page.

Common questions

Can multiple Pin experiences show on the same page?

Yes. If a user qualifies for multiple Pin experiences on the same page, all of them will appear.

Do Pins interfere with Flows?

No. Pins and Flows are completely independent. Both can display on the same page without conflict.

Can I use custom CSS to style Pins?

Not at this time. Pins adopt the settings from your Theme but do not support additional custom CSS.

What happens if the target element isn't on the page?

The Pin won't appear. Pins are anchored to a CSS selector, so if the element is missing, hidden, or off-screen, the Pin has nothing to attach to. See Troubleshooting Pins for help.

Can I place a Pin inside a dropdown menu?

Yes, but dropdown menus can behave unpredictably. Use inline embedding and see Pins in dropdown menus for details.

Can I localize Pins?

Not at this time. Create multiple language versions and target them to the language property of the user.