Traditional user onboarding relies on pop-ups: a tooltip here and a modal there and very quickly, your app can feel like a chorus of voices competing for attention. Meanwhile, new users are confronted with completely empty pages that don't help or motivate them to take action.
Bento allows you to embed components, ranging from full-page onboarding guides to bite-sized contextual guides, directly into a webpage.
Here's an example of a carousel that offers actionable inspiration
Or a card that provides context and motivation
Or a banner that handles an empty state
Popular use-cases:
Empty state
Inspiration
Key information not to be dismissed or hidden
Create your embedded guide:
Like all Bento guides, your path to creating one starts in your Library, behind the "Create New" button.
After you select "Contextual guide" you'll be able to pick your layout:
You can create manually where you will be asked to place the guide in your product and add content.
Or you can create one with AI using a help article, just walking through your product or loom transcript to create set of steps. (Recommend giving this a try, it is so cool!)
After you're done placing and customizing the component, you'll be taken back into Bento to build content. This way, non-technical users can easily adapt content without worrying about CSS!
Customizations:
Targeting (who gets it)
Priority (though inline guides always show to any user who qualifies)
Launch window (if you want to set and forget)
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.