Bento comes out of the box with 5 toggle styles (Progress ring, text, etc) but some apps may want to control the navigation element that opens the sidebar.
In those cases, you can add a small line of code to your navigation element to tell Bento's sidebar to open.
Tell Bento when to open the sidebar
Once your engineers have added navigation (wherever appropriate), they can fire an event to Bento that triggers the Bento sidebar to open:
How to dispatch a custom event to Bento
const event = new CustomEvent( 'event-name', {detail: {some: 'data', to: 'include'}} ); document.dispatchEvent(event);
Toggling the sidebar open and closed
The Bento embeddable listens for two events to handle programmatically opening and closing the sidebar:
bento-sidebarOpen- This event is used to tell Bento to open the sidebarbento-sidebarClose- This event is used to tell Bento to close the sidebar
Examples:
// open the Bento sidebar
const event = new CustomEvent('bento-sidebarOpen'); document.dispatchEvent(event);
// close the Bento sidebar
const event = new CustomEvent('bento-sidebarClose'); document.dispatchEvent(event);
Suppress the Bento default toggle
After implementing this change, you should go into Branding settings and select "Never" under toggle visibility as your toggle style.
More info on toggle visibility and customization here.
Please note: if a user saves a guide or announcement for later, the Bento toggle will re-appear, with a small, bookmark icon. This is so your users can re-access those saved guides.