Build persistent, always-visible Pins that attach to elements in your product. You can create Icon w/ Tooltip Pins for contextual help or Button Pins that trigger Flows and link to URLs.

Prerequisites

• The Appcues Chrome Extension installed in your browser
• A Theme configured for your Pins (or use the default)

Create a Pin

Start a Pin from the Appcues App or from the Chrome extension. Either way, you build it in the Chrome extension.

From the Appcues App:

1. Click Experiences > New experience.
2. Select Web, then Pin.
3. Enter a Name and the URL of the page to build on. Optionally, pick a Campaign Tactic.
4. Click Continue. The Chrome extension opens on that page.
5. Click + Add and choose Icon w/ Tooltip or Button.

From the Chrome extension:

1. Go to the page in your app where you want the Pin to appear.
2. Click the Appcues Chrome Extension icon in your browser toolbar. The builder opens.
3. Select Add a Pin, then Create New.
4. Click + Add and choose Icon w/ Tooltip or Button.

To edit a Pin later, open its menu in Experiences and click Edit in extension.

Icon w/ Tooltip Pins

Icon w/ Tooltip Pins display a small icon next to an element. When a user hovers over or clicks the icon, a tooltip expands with your content.

Place the icon

1. After selecting Icon w/ Tooltip, choose an icon from the library or upload your own SVG.
2. Enter Targeting Mode. Click any element on the page to anchor the Pin to it.

To place a Pin inside a dropdown menu, hold Shift while in Targeting Mode. See placing Tooltips for details.

Add content

1. Click anywhere inside the green tooltip outline. The content block menu appears.
2. Add content blocks — text, images, buttons, emojis, or custom HTML.

Style the tooltip

Tooltip styling is controlled by your Theme. New Pins use your default Theme. To pick another, click the Pin experience details button at the bottom of the builder and choose a Theme. Open your Theme and go to the Hotspot & Tooltips section to set the background color, font color, border radius, and shadow.

Style the icon

The icon color is set by your Theme by default. To override it per Pin, click the icon in the Builder to open the minibar. From there you can change the icon, adjust its color, resize it, or reposition it.

Set behavior

Open the sidebar menu to configure how the tooltip opens and closes.

Open trigger:

• On hover — The tooltip opens when a user hovers over the icon. It closes when the cursor moves away or the user clicks outside it.
• On click — The tooltip opens when a user clicks the icon. You can add a close option (X button or Dismiss link). Clicking outside the tooltip also closes it.

Pointer position:

• Auto — The tooltip pointer adjusts its position based on screen size automatically.
• Fixed — You set the pointer position manually.

Button Pins

Button Pins display a clickable button next to an element. They immediately trigger a Flow or navigate to a URL — no tooltip involved.

Place the button

1. After selecting Button, choose a button style: Primary, Outline, Text link, or SVG icon.
2. Enter Targeting Mode. Click any element on the page to anchor the Button Pin to it.

Style the button

Button styling inherits from your Theme. Open your Theme and go to the Buttons tab to set Primary and Secondary button styles.

To override styling per Pin, click the button in the Builder to open the minibar. You can change the button text, colors, border, and font directly.

SVG icon buttons have a more limited minibar. To set the SVG size above the 100 display limit, type the value directly into the size field.

Set button actions

Each Button Pin has one action:

• Go to URL — Takes users to a static or dynamic URL. You can include profile attributes in the URL for personalization.
• Trigger Flow — Launches a Flow on the current page or a different URL. You can also include dynamic URL attributes.

Optionally, enable Track event to capture clicks for analytics, or Update a user property to set a property value when the button is clicked.

Position and embedding

These settings apply to both Icon w/ Tooltip and Button Pins.

Embedding mode

Controls how the Pin is placed relative to its target element.

• Inline Right — Inserts the Pin into the page layout to the right of the target element.
• Inline Left — Inserts the Pin into the page layout to the left of the target element.
• Overlayed — Places the Pin on top of the target element without affecting page layout.

Allow content overlap

Available for Inline Right and Inline Left only. By default, inline Pins "make space" by expanding the target element. Enable Allow content overlap to place the Pin on top of the element instead — useful when placing a Pin on a button without changing the button's size.

Appcues selects a default for this toggle based on the target element. If the Pin isn't positioned as expected, try toggling this on or off.

Fine-tune position

Move the Pin vertically or horizontally by entering positive or negative values in px or % in the sidebar position controls.

Z-index

If your Pin is hidden behind other UI elements, increase its z-index. Open the sidebar and adjust the value — try 99999 or higher. See How Appcues is overlaid for more details.

Refine the target element

When you place a Pin, Appcues captures a CSS selector for the target element. If the selector doesn't work reliably (e.g., it uses dynamic classes or isn't unique), you can refine it.

1. Click Refine Selection in the sidebar.
2. Build a custom selector using the checkbox options, or type a CSS selector directly.
3. Add filters to narrow the match: By order (when multiple elements share the same selector) or By text (to match specific text content).
4. For a deeper guide on selectors, see CSS Selectors.

Set who sees it, then publish

1. In the Appcues App, click Experiences and open the Pin. Its Settings tab opens.
2. Set Who sees this and Where this appears. See Configure an experience's settings.
3. Publish the Pin. See Publish, schedule, and unpublish an experience.

Confirm it worked

• The Pin appears on the correct element when you preview the page.
• Icon w/ Tooltip: hovering or clicking the icon opens the tooltip with your content.
• Button: the text, color, and style match your app.
• The Pin displays correctly on different screen sizes.

After you publish to a staging domain or to internal testers, also check:

• The Pin stays attached to its element as you scroll, resize the window, and move between pages.
• If the element loads later, for example after a click or an API call, the Pin appears once the element is on the page. On pages without the element, the Pin doesn't appear. If it attaches to the wrong element, see Refine the target element above.
• Go to URL buttons open the right page, including URLs built from user properties.
• Trigger Flow buttons launch the right Flow. The Flow must be published.
• If the button tracks an event, the event shows in your test user's activity.

For how to publish to testers and check who qualifies, see Preview and test an experience.

Troubleshooting

Pin doesn't appear on the page

• Verify Appcues is installed on the page. Open the Appcues Debugger and check for green checkmarks.
• Confirm the CSS selector matches a visible element. See Troubleshooting Pins.

Pin is hidden behind other elements

• Increase the z-index value in the sidebar position settings.

Tooltip is clipped or cut off

• If the Pin is inline inside a container with overflow: hidden or overflow: auto, the container clips the tooltip. Move the Pin outside that container or switch to Overlayed embedding.

Pin disappears inside a dropdown menu

• Use Inline embedding so the Pin lives inside the menu's DOM tree. See Pins in dropdown menus.