Calls to action are the primary way making in-product experiences actionable versus just educational. Bento offers a range of CTA types, and will automatically default your CTA styles, layout, and even copy, based on the guide and step type.
From there, you can customize to your heart's content:
CTA Colors
Style customizations are difficult: not enough flexibility, and it's hard to get designs to look integrated or native. Too much flexibility, and you run the risk of looking inconsistent.
By and large, we rely on great defaults at the organization level. Selectively, we'll add the ability to create deeper customizations.
Guide calls-to-action (CTAs) default to your brand colors. But you can now choose from a set of options to offer more visual weight, or to adapt colors to a background color.
Color choices
Color choices are limited to minimize too much variety, which will make our guides look visually messy and off-brand. Your options are:
Primary brand color, set at the org level
Secondary color, usually a shade of gray which is also used for fills
Guide text color, which is usually inherited from the page. You can override this per guide. Use case: when giving the guide a dark background color, you may want to set text to white.
White
The ability to add up to 3 additional colors
Additional colors
Up to 3 additional colors can be set via Styles. This allows you some flexibility with certain special-snowflake customers.
⚠️ If you delete one of these Additional colors, CTAs will fall back to using your org's primary brand color
Using colors in CTAs
In every guide, you can click the CTA which will open its editing menu. The primary purpose here is to set the CTA functionality and copy.
From here, you can choose style and modify its color
Solid
Outline
Link
CTA Actions
Bento enables you to give your users guidance so they can take action. But how to frame that action can be subjective.
Out of the box, Bento sets default actions (and language) based on your Step Type. Modal-announcements come with the default "Save for later" functionality.
If you want to override these changes, simply click edit CTA.
Callouts:
One of the most popular changes is to allow your CTA to direct users to a particular URL so they can go take action!
For now, Bento allows a maximum of 2 calls-to-action on a step, so as to not overwhelm your users
You can only have 1 of each type, i.e. you can't add the "Skip" functionality twice on one step.
Don't miss the "Also mark as complete" checkbox in the "Go to link" CTA menu, this will allow a user to go to the link and therefore make the step as complete
CTA layout (cards, announcements, tooltips)
You can find your settings in the Style & Preview tab, below Media options
CTAs can be shown to the left, right, or spaced between for cards and announcements
CTAs can also be shown inline for banners
Here's an example of an embedded card with two CTAs positioned on the left, with the image on the right
And here's a variation with the image on the left, and CTAs "space between"
Global styling
Ensure your Bento button styles meet your design system. Head to the styles tab and play with all the variables
