What Are Pins?
Pins will not interfere with Flows at all, so Flows will still show on the page even if there are Pins already dropped on the page. Also, unlike Flows, you can set it up so that multiple Pins are targeting the same page, and as long as a user qualifies to see them, they will see all possible Pins!
How to Build Pins
In order to build Pins, you'll want to go to the URL of where you want to drop a Pin, and then select the Appcues Chrome Extension
Once you select the extension, you'll be prompted to either build a Flow, drop a Pin, or track an event.
Select 'Create Pins' to start building your first Pin. (Note: If you click 'Build flows', the Flow building experience will begin. If you click 'Track events', you’ll immediately be able to start selecting an element to track an event.)
Once you select Create Pins, you can either select from an existing list of Pin experiences, or create a brand new Pin experience. Alternatively, you can hop over to the other Builders (Flow and Track Event), or close the Builder by selecting the menu at the top of the page.
You can also access Pins from Studio. Inside Studio, select Pins from the main navigation. Here you will see a list of all your current Pin experiences, as well as the ability to create a new Pin.
If you select the More Menu from an existing Pin experience, you'll be able to select 'Open in Builder', or you can create a new experience by selecting the 'Create a Pin' button.
Creating a Pin Experience
Once you select 'Create New' from the Pin builder, you'll be prompted to enter a name for the experience, as well as the Build URL (already prefilled with the Current URL if you started this process from the Builder), and a Theme.
Once you select Create, you'll see that the bottom bar has new options, including the 'Add' option. Select 'Add' and choose Icon w/ Tooltip or Button.
If you select Icon w/ Tooltip, you'll be able to choose an Icon for your Pin or upload your own SVG icon. Icon w/ Tooltip Pins open a tooltip when a user interacts with the icon.
If you select Button, you'll be able to choose from your Primary button style, a hardcoded outline based button, as well just place a button that looks like a Link, or even upload your own SVG icon. Button Pins immediately trigger flows or link off to other URLs.
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.
- You can select an element within a dropdown menu by holding shift while in Targeting Mode. While holding shift, you’ll be able to navigate around your app like normal, and select elements that may appear within menus or dropdowns.
Once you drop the Icon w/ Tooltip Pin, you have a number options to customize it! It's important to note that at this time Pins will only adopt the settings of the actual Theme, and not any additional custom CSS. Button Pins will allow you to customize the button by using the standard button minibar for customization, as well as adjust the text of the button.
Button Pins that utilize an uploaded SVG icon will have a more limited minibar for customization.
To add content to the Icon w/ Tooltip Pin, 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 flow content yours. Add an image, text, buttons, emojis, or even custom HTML to your Pins. Just choose the option from the menu to get started. (For more info on Content Blocks, click here)
To customize the Icon, click the Icon and notice the minibar of options presented to you. 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.
And finally, you can customize the behavior of the Icon w/ Tooltip. These options are available in the sidebar menu.
- Position: Will reopen Targeting mode for you to change the position of the Icon
- Duplicate: Will duplicate the current Pin
- Save: Will save the current Pin as a Template for reuse later (COMING SOON)
- Delete: Will delete the current Pin
- Pin Name: The name of the individual Pin within the overall Pin Experience so you can reference the individual Pins within the analytics
- Behavior: Allows you to choose how the pin will open (Only available w/ Icon w/ Tooltip)
- 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, and for hover the pin will also close if you hover your cursor a far enough distance away from the tooltip
- Backdrop: Allows you to choose the fill color and opacity of the backdrop (COMING SOON) (Only available w/ Icon w/ Tooltip)
- Spotlight: Allows you to set the focus strength, corner radius, and padding for the Pin (COMING SOON) (Only available w/ Icon w/ 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 (Only available w/ Icon w/ Tooltip)
- Tooltip/Button position: Allow you to set the position of the Pin
- 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
- Allow content overlap: Typically inline positioning will "make space" for the icon/button and expand the selected element. Enabling this toggle will remove the space and place the icon/button on top of selected element. Allowing content overlap is great when you want to place a pin on a button without expanding the size of the button. (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
- The position from the left, top, and the Z-index
- The ability to reposition the icon/button
- Enter a specific selector
- Refine the selector
- Embedding: Controls how the Pin will be placed on your site
Pins in Studio
After you've built out your Pin experiences, you'll want to manage them, and check out their analytics. Both of these items will be done via Studio.
Pins will be a new item within the main navigation of Appcues. When clicked, you will now see a list of all the Pin experiences within your account. You can search and filter your list of Pin experiences. When you click an unpublished Pin, you will be brought to the settings page, but if you click a live Pin, you'll be brought to the analytics page. If you are on the analytics page, you can click the more menu to access the settings page again.
You can also access the settings, and analytics page, as well as edit tags, clone Pin experiences, or Archive Pin experiences all via the more menu of any Pin.
When adjusting the settings of a Pin, you will be able to control the
When viewing the Pin experience's analytics page, you will be able to see the total number of Opens on Icons w/ Tooltip and Clicks on Buttons per Pin, the number of unique users that have opened/clicked the Pin, as well as the total issue count per Pin (keep in mind, since Pins are persistent, the issue count is something that can only increase). A Pin experience's analytics page will also show you ALL the users that interacted with the Pins within the selected date range under the Recent Users section!
You can also view additional Pin analytics in the Appcues Event Explorer. Select Pin Events from the Source dropdown menu, and then select the Pin Experience you are interested in. From here you can select the individual Pins and see the total number of Opens on Icons w/ Tooltip and Clicks on Buttons, as well as the number of unique users that have opened/clicked the Pin.
Pin events will also be sent to our client-side integrations if you have any of those integrations enabled. The Pin events will that we send are 'experience_started', 'icon_seen', and 'step_seen'.
Q: I see the Pins in the navigation list, but it's grayed out, why?
- A: Pins are only available on modern subscription tiers. Contact email@example.com to upgrade your plan
Q: Can multiple Pin experiences be targeted to the same page? Will they all show up at the same time if a user qualifies to see them?
- A: Yes, and Yes!
Q: Can Pins be dismissed?
- A: No, as long as the user qualifies they will always be on the page (just like a standard native tooltip)
Q: What is the difference between Inline Embedding and Overlayed Embedding?
- Inline pins are inserted into a site's HTML before or after the target element that is selected. Because the pin element now exists within the structure of the site, its positioning is affected by the elements around it. It is positioned according to the layout specified by site. There are positives and negatives to this approach. One benefit is that the pins will scroll perfectly smoothly with the page, because they are part of the page. Another benefit is that an inline pin can "make space" for itself when it is placed in between two elements on the page. A downside to this approach is that there is less control over the position of the pin. Because the pin element is part of the site's layout, its exact position is determined by the site.
- Overlayed pins are not inserted directly into the structure of the site, but rather are positioned above the site. Appcues calculates the correct position periodically to ensure the correct position is maintained as the user scrolls the page or hides or expands different elements on the page. One benefit to this approach is that the position of the pin can be very specifically set. A downside, however, is that the pin is not embedded into the site so it does not scroll as smoothly with the site.
Q: I've adjusted the z-index of my inline Icon w/ Tooltip Pin, but the tooltip is still being cut off, why?
- A: If you are placing an Inline Pin within a target element or a parent container having the CSS property of overflow:hidden, then the CSS property will set any overflow of that container to be clipped. This affects the inline pin because it’s nested within that container. To avoid this remove that CSS property from your element, OR place the Pin outside the container that uses this property, OR use the Overlayed embedding option.
Q: Do Pins count in account’s Flow Frequency/Priority limits?
- A: No, Pins are completely separate from Flows, and will always be visible on the page regardless of limits
Q: Do themes' custom CSS carry over to Pin Experiences?
- A: No, not at this time. Currently, Pins will only adopt the settings of the actual Theme, and not any additional custom CSS.
Q: Will Appcues continue investing in Pins and other persistent experiences?
- A: Yes, we will! The following items will be worked on as we move forward -
- Additional Pin types
- Pin Localization
- Pin Analytics page
- Pins in User Profile (activities & eligibility)
- Pin Test Mode
- Pin Events within the conditions editor
- Public API Endpoints