What you get out of the box
Bento is a component added to your page and will automatically inherit styling from your app including:
Font type
Font sizes
Font weights
Spacing
Note: Bento inherits the root setting from your app
Styling
Colors
Font sizes
Visual tags
Sidebar (style, header, toggle)
Advanced (mobile, custom CSS) <- growth plan only
These apply consistently across all guide types.
Guide specific styles apply to the various guide types. Broken down by:
Checklists
Tooltips
Empty states (cards)
Announcements (modals and banners)
As you change styles, you will see the change reflected in the preview. Be sure to toggle between the different preview screens to see how the changes impact different guides and different implementations (inline vs. sidebar)
Advanced styling
Reach out if you want access to the Custom CSS feature which allows you to override any element of the page, from changing the styling of each button to even changing the position or look and feel of the progress bar. CSS is only available on the growth plan.
If you want to override your inherited font, you can do that with CSS. As long as the font is defined in your app, on the page, you can pass the font name to Bento via CSS and we will showcase it.
font-family: 'font-name';
Frequently asked questions
How do I hide Bento on certain pages? Read more here
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
Can I customize my buttons?
Currently you can use custom CSS. Out of the box functionality is coming soon.
Can I change the text or icon of the visual tag
Absolutely! Read more here