How to design Hints

Hints are cards that appear by hovering over or clicking on a small icon in your app. They're a super useful tool for product adoption because, unlike Tours, which are typically only seen once, a hint is always available to the user.

The best practice is to populate your application with hints on all the elements that might need more explanation. In this case, more is better (unlike Tours).

Use case examples

Hints with videos

Videos are a great way to describe more complex functionality. Videos from YouTube, Vimeo, and Loom can be linked with ease.

Starting Tours with a Hint

You can link a Tour to text in the same manner as a URL link. Typically you'll want to link the tour to a button. A great aspect of this route is that users can replay tours whenever they want.

Linking articles from a Hint

It's easy to offer additional information via linked articles from a hint. You can even host articles on your Knowledge base to take advantage of the connection between articles and hints, tours, or other adoption tools.

Insert a Typeform in a Hint

It's easy to ask your customers for information with our built-in Typeform option. Simply select "Typeform" in the new section dropdown and use the URL link to your Typeform to integrate it with Product Fruits.

Insert an Adoption Meter

The adoption meter is a great way to ask users for quick feedback, such as introducing a new feature or getting a feel for using your application. You can see the results in administration, or export them via the JavaScript API.

💡How to make the screen less cluttered

If you are afraid the screen may be cluttered with too many hint icons, there are several things you can do:

1. Choose a smaller version of the icons.

2. Show the hint icon only when the cursor is over the element by using the on hover function.

3. Until viewed will show the icon only until it has been viewed by the user.

the Product Fruits editor showing a hint being edited with the on hover until viewed and icon size settings highlighted

4. The dismiss forever flag gives the user the option to disable the hint and its icon permanently