Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form below and we will reply as soon as possible.

  • Appcues Certifications & Training
  • Integration Hub
  • Contact Us
  • Docs home
  • Web Experiences
  • Use Cases

Use a Pin for Quick Help in your Product

Learn how to use a Pin to provide quick contextual help for users as they use your product.

Updated at June 18th, 2024

Submit Article Requests

Do you have a suggestion for an article you would like to see created?
Feel free to submit this form and add your suggestions to our document board.

Please fill out the contact form with the details about the help content you'd like to see.

  • Installation & Developers
    Installing Appcues Web Installing Appcues Mobile API & Data Troubleshooting Extras
  • Web Experiences
    Building Web Experiences Targeting Studio Customization & Styling Use Cases Troubleshooting FAQ
  • Mobile Experiences
    Installation & Overview Building Mobile Experiences Mobile Analytics & Integrations Troubleshooting
  • Workflows
    Building & Configuration Use Cases Workflow Analytics and Integrations
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Best Practices Use Cases Pro Tips Product-led Growth
  • Integrations
    Integration Documents Use Cases Extras
  • System Status
    System Status & Incidents
+ More

Table of Contents

Build Guide Step 1: Create a Pin Step 2: Add the content Step 3: Refine the position of your Pin Step 4: Set a Theme Step 5: Target the Pin

Pins provide contextual help for users as they gain a deeper understanding of your product. They reduce the friction around learning a feature and reduce the potential burden on your support team.

The final product of your Pin will look something like this when we're done:

Screen Recording 2023-12-12 at 06.20.43 PM

Build Guide

Step 1: Create a Pin

Start by creating a Pin in the Builder. For this example, we'll select ‘Icon w/ Tooltip’.

Select the icon you'd like to use for your Pin. We'll go with ‘Question Mark’.

Attach the Pin to the element on the page. When you're placing a pin on the page, Appcues automatically will pick up a CSS selector available and assign it to the Pin.

Screen Recording 2023-12-12 at 05.43.31 PM

Step 2: Add the content

Below our text, we'll add a button set to ‘Go to URL’. This button will take the users to our Help Article where they can learn more about how to set this up. As an option, we can also track an event on any click on that button to get that reporting.

Step 3: Refine the position of your Pin

There are a few cases where you may need to refine the position of your Pin. You may need to find a CSS selector that is more stable and easier to find on the page and you may also need to fine-tune the placement of the pin.

Select the ‘Tooltip Position’ tab to do this. To move the pin after placing it on an element, select a unit (px or %) and enter positive or negative values to move it from left or from top. 

To further refine the CSS selector of your pin, click on ‘Refine Selection’. Here, you can enter a custom CSS Selector if you have one (in the text input box) or you use the options available, including an Order filter or a Text Filter.

Step 4: Set a Theme

If you didn't select a Theme at first, the default theme will be applied. If you'd like to change it, click on the Pin experience details button at the bottom of the Builder.

From there, you can see all your pin details, including the Theme.

Step 5: Target the Pin

Pins are a persistent type of experience which means they'll show on the page at all times until the user becomes ineligible to see them (for instance, the pin is targeting a specific user property and the user no longer matches it). Pins also don't interfere with other live content on the page, so you don't have to worry about that.

In terms of page targeting, we want to make sure it shows on all settings pages of any flow. This means that the pages are dynamic. To ensure the pin will show on any of those pages, we're using a regex pattern to match any character or number.

In terms of audience, we're targeting all users to ensure that everyone can learn more about this at any time.

 

 

 

pin help pin persistent quick help pin tooltip persistent tooltip

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Event Triggering
  • Localize Flows
  • Checklists
  • Forms & Surveys
Appcues logo

Product

Why Appcues How it works Integrations Security Pricing What's new

Use cases

Appcues Integration Hub User Onboarding Software Feature Adoption Software NPS & Surveys Announcements Insights Mobile Adoption

Company

About
Careers

Support

Developer Docs Contact

Resources

The Appcues Blog Product Adoption Academy GoodUX Case studies Webinar Series Made with Appcues Appcues University

Follow us

Facebook icon Twitter icon grey Linkedin icon Instagram icon
© 2022 Appcues. All rights reserved.
Security Terms of Service Privacy Policy

Knowledge Base Software powered by Helpjuice

Expand