đ Intro to visual tags
⨠How to set up
đ¨ Customizing tags
Welcome to Bento's visual tags!
Visual tags (they can be hotspots, pills, dots and labels, etc) are a gentle way of reminding users to come back to their guide. They can be added to any page in your app (or in a navigation item that shows up across pages). And you can add many, knowing that a user will only see the tags for steps related to their current guide.
How itâs different:
Unlike pop-up tool-tips, Bentoâs visual tags allow the user to
Opt-in
Track progress within their guide
Come back to it later without fear of that step simply disappearing because it was seen once.
⨠Setting up tags for checklist steps
In your Guide templates, find the step you want to add a visual tag to.
In the step setting, choose "Add" to the visual tag.
Clicking on this launches the tag editor experience which starts with entering your appâs URL.
If the tag editor doesnât show up, itâs probably because you havenât updated your Content Security Policy to allow Bento to launch the experience. Go ahead and ask any engineer to help with this, along with instructions here.
Alternatively, make sure you are using a URL that has the Bento snippet installed. For example, if the snippet is installed in staging, use your app staging URL, and the same for production.
Notes:
Visual tags must be added in the guide template NOT the step group
You can decide if the visual tags should always show up or just when your users are on the relevant step. Go to styles > visual tags to adjust this setting.
Setting up tags for contextual guides
If you are adding a visual tag to a contextual guide you will also use the visual tag editor, but find the setting within the Targeting sub-tab
đ¨ Customizing tags
Navigate to the correct page and click âStart Designâ in the menu bar at the bottom of the editor experience.
Hover around and select the element you wish to append a tag to. Once selected, youâll be able to choose from different visual styles, and tweak the placement of the tag and the tooltip which shows on hover
Save to link the tag to the guide
When you launch the guide the visual tag will automatically be published.
Customizing visual tags
Each visual tag can be further customized.
For dots, you can control the level of pulsing (on the org level). This allows you to have a faster (more obvious) or slower (more discrete) beacon on the screen.
When building guides, you can also control the text in the visual tag. Choose the badge that says New, and change the text to be whatever you want. This is only available on the growth plan so let us know if you are interested in trying it.
Watch-outs:
You cannot embed a Bento guide in an iframe on your page. Otherwise, it can be placed anywhere, for example on your homepage or dashboard.
Bento's components are designed to be responsive for web.