General styles
The Bento sidebar is a core part of the Bento experience. When there are active guides, it appears anywhere the snippet is installed. It houses active checklist guides, and the resource center. It is an effective way to re-engage users as they navigate through onboarding, or, explore everboarding guides.
The styling of the sidebar can be controlled from the General styles page. Play with the settings and see the impact in the previews.
Default Sidebar behaviour
To control what the user sees when they open the sidebar you actually control that under resource center settings.
By default, users will see the latest active guide. If you want users to click into various guides or have constant access to the help center integration, showing them the resource center might be preferred
Sidebar toggle location
You can control where the sidebar appears in style settings
Location of the guides are controlled on the guide level
The sidebar toggle is the only experience that shows up across your entire app, wherever the snippet is installed.
You can hide the Bento toggle on certain pages under Toggle Visibility
You can also control where on the screen the sidebar shows up:
Sidebar header
Every Bento sidebar has a header component. This component is customizable to better match the style of your app and the vision you have for your everboarding guides.
Note: These settings are controlled on the account level, not the guide level. That means the settings you select will apply to all guides in your library.
Change your header style
The sidebar header can be controlled in Customize branding settings, in the component tab.
There are various header styles:
Control your progress bar and more
You can also control the presence and style of the progress bar in your guides. This will show your users how much progress they have made through the current guide. Often handy when you have multiple step groups in one guide.
The final part of the header you can control is if there is a secondary title present. This data is pulled from the name of the step group.
Toggle visibility
Always
By default, the toggle will be set to "Always" show. That means a user who has a sidebar-eligible guide of any kind can access their guides from the sidebar.
This is ideal for companies who use Bento for onboarding and everboarding and want users to have easy access to previous guides.
What will cause toggle to show
If you have any CYOA guides
If you have any current or completed onboarding guides
If you have any current or completed sidebar contextual guides
If you have any saved announcements
What will not cause the toggle to show:
If you only have embedded contextual guides (i.e. empty states)
If you only have tooltips
If you only have announcements which were dismissed
Active Guides
Active guides include onboarding and sidebar contextual guides. Active means the guide is not completed!
This is ideal for companies who use Bento for onboarding and everboarding and want users to have easy access to in-progress or not-started guides.
What will cause toggle to show
If you have any CYOA guides
If you have any current onboarding guides
If you have any current sidebar contextual guides
If you have any saved announcements
What will not cause the toggle to show:
If you only have embedded contextual guides (i.e. empty states)
If you only have tooltips
If you only have announcements which were dismissed
If you only have onboarding and sidebar contextual guides that are completed
Active Onboarding Guides
This is ideal for companies who only want the sidebar to show up for customers in onboarding but not ones who are in everboarding.
What will cause toggle to show
If you have any current onboarding guides
If you have any saved announcements
What will not cause the toggle to show:
If you only have embedded contextual guides (i.e. empty states)
If you only have tooltips
If you only have announcements which were dismissed
If you have completed onboarding guides
If you have sidebar contextual guides that are targeted via visual tag, "show in guide list" or "embedded"
Never
We don't recommend this, but offer it for companies who are building their own custom toggle and want to trigger Bento to open on click.
However, if your user saves an announcement, the toggle will appear with a bookmark icon until they dismiss the announcement. "Save for later" is a call-to-action that you control so if you never offer it on announcements, then the toggle will also never appear.
What will cause toggle to show
If you have any saved announcements
What will not cause the toggle to show:
If you only have embedded contextual guides (i.e. empty states)
If you only have tooltips
If you only have announcements which were dismissed
If you have completed onboarding guides
If you have sidebar contextual guides that are targeted via visual tag
Sidebar visibility
If you want this level of control, let us know we have to turn on the feature flag for you.
Bento default:
Sidebar will auto-open for page targeted guides as well as the first time an onboarding guide is viewed.
When Bento guide CTAs take users to other pages in your product the sidebar will pop-open and follow the user
Never auto-open the sidebar:
The sidebar will still be accessible but it will never auto-open, the user will need to press the toggle to open it.
This minimizes disruption for your users
Never open the sidebar
This completely hides the sidebar and the toggle for all guide types.
Customizing Bento toggle
If you want to custom what the Bento toggle looks like or have your own toggle open the Bento sidebar, read more here.