Create and style Pins
Learn more about Pins, a persistent experience type that provides quick and contextual help to your users.
Table of Contents
How to create a Pin
- You can go to a page of your app where you want to create your Pin and open the Chrome Extension via its icon.
- You can go to the Pins page in Appcues and click ‘Create a Pin’.
Using the first option, the Builder will ask you what you would like to create. Choose Add a Pin and then Create New.
Once you select Create New, click on '+ Add' and choose Icon w/ Tooltip or Button.
Icon w/ Tooltip
Icon w/ Tooltip Pins open a tooltip when a user interacts with the icon.
If you select Icon w/ Tooltip, you'll be able to choose an Icon for your Pin or upload your own SVG icon.
Place the Pin
After you make a selection, you'll enter Targeting Mode and now be able to drop the Pin anywhere on the page. Pins work by being anchored to an element on the page.
To place a pin within a dropdown menu, hold shift while in Targeting Mode and place your pin. More details on this in our article on placing Tooltips.
Add Content
Once you drop the Icon w/ Tooltip Pin, you can start adding content. Select anywhere in the green outline to add Content Blocks to your tooltip.
Content Blocks are what you put into each step and are how you make the content yours. Add an image, text, buttons, emojis, or even custom HTML to your Pins. To learn more about each of these content block options, click the hyperlink to take you to the appropriate help article.
Styling
By default, the styling applied to your Pin is inherited from the Theme selected. You can set your custom font here if you'd like to use one.
Both the Tooltip and the Icon can be styled in the Hotspot & Tooltips section highlighted below.
Custom CSS isn't supported in Pins at this time.
Tooltip
The tooltip that expands from the Icon can only be styled in your Theme right now. You can set the background color for the tooltip here, as well as your font color, border radius and shadow.
Icon
By default, the icon will be applied with the color set in your Theme.
To further customize the Icon, click the Icon and a minibar of options will appear. You can choose a different icon for your Pin, change the color of the icon, adjust the size of the Pin, or reposition the Pin.
Behavior & Position
You can customize the behavior and position of the Icon w/ Tooltip. These options are available in the sidebar menu.
Behavior
Allows you to choose how the pin will open.
- On hover: The pin will open when a user hovers over the icon
- On click: The pin will open when a user clicks the icon. You can also set a close option, with an X or a Dismiss Link. In either case, clicking outside the Pin will also close it
- In either case, the pin will close when you click anywhere outside the tooltip. On hover, the pin will also close if you hover your cursor a far enough distance away from the tooltip
Pointer position
Allows you to set whether the pointer of the tooltip automatically adjusts based on screen size, or if you want to set a fixed position manually.
Button Pin
Button Pins immediately trigger Flows or link off to other URLs.
If you select Button, you'll be able to choose from your Primary button style, a hardcoded outlined button, as well as just place a button that looks like a Link, or even upload your own SVG icon.
Place the Button
After you make a selection, you'll enter Targeting Mode and now be able to drop the Pin anywhere on the page. Pins work by being anchored to an element on the page.
Styling
By default, the styling applied to your Button Pin is inherited from the Theme selected. You can set your custom font here if you'd like to use one.
Additional styling is set in the Buttons tab. You can define the styling for your Primary and Secondary Buttons here.
Custom CSS isn't supported in Pins at this time.
You can also set styling directly in the Builder to override your Theme. Click the button to open the minibar for customization, as well as adjusting the text of the button.
Button Pins that use an uploaded SVG icon will have a more limited minibar for customization. If needed, you can increase the size of the SVG icon above the 100 display limit. For that, type the value directly.
Button Actions
Go to URL
Take users to regular or dynamic URLs. If you want to take users to dynamic URLs, you can add the profile attribute to the URL. You can read more about this button action in our help article Buttons.
Trigger Flow
Launch a Flow on the same URL or on another URL. If you want to take users to dynamic URLs, you can add the profile attribute to the URL. You can read more about this button action in our help article Buttons.
Track clicks on these buttons by enabling the toggle Track event.
Update an existing user property with a specific value by enabling the toggle Update a user property.
Pin/Button position
This allows you to set the position of the Pin and Button.
- Embedding: Controls how the Pin will be placed on your site
- Inline Right: Pins will be inserted within the UI of your website, and offset the target element on the right.
- Inline Left: Pins will be inserted within the UI of your website, and offset the target element on the left.
- Overlayed: Pins will be displayed on top of the target element.
Typically inline positioning will "make space" for the icon/button and expand the selected element. If you ‘allow content overlap’, that removes the space and place the icon/button on top of the selected element. Allowing content overlap is great when you want to place a pin on a button without expanding the size of the button. This option is only available for inline right/left embedding.
Depending on the element you anchor the pin to, Appcues will try to choose the best default for this toggle. If your pin is not being placed where you expected, consider toggling this on/off as needed
Fine tune position
There will be situations in which you will need to fine tune the position of your Icon. Move it vertically and horizontally by defining a percentage (%) or a Pixel (Px). Enter positive or negative values until you get the desired position.
Z-Index
Sometimes our z-index value will conflict with the existing elements on your page and you may need to adjust the Appcues z-index up/down a bit so the page looks as it should. You can read more about this in our article How Appcues is overlaid.
Target element
When you initially place a Pin in our Builder, we capture a CSS selector for the element you are trying to annotate. You can think of CSS selectors as repeatable instructions for where your Pin marks should go on the page. There will be situations in which you'll need to manually adjust them. For that, go click ‘Refine Selection’. Here, you'll be able to further define the CSS selector for the element you're highlighting.
- You can build your own selector either using the options available in the checkboxes or by manually typing your custom CSS selector.
- You can also add additional filters to narrow the results when trying to find it on the page. You can add a ‘By order’ filter if you have multiple objects with the same CSS header or a ‘By text’ filter.
For a deeper dive into CSS selectors, please check out our article CSS Selectors.