One of the easiest ways to integrate actions in Bento with actions in your own app is via an event. Bento's CTAs (bottom of the step, special analytics) and inline buttons both support this.
Popular use cases
Open a modal in your app (that doesn't have a unique URL)
Animate an element on the page.
We recommend using CTAs because their clicks are tracked in analytics.
[Eng required] Receiving these events
To respond to these events, you'll need to add a document listener in your application javascript.
document.addEventListener('bento-buttonClicked', function(e) { if (e.detail.message === 'my-event-name') { // take action here } });If you're using react hooks, you'd want to use the normal react useCallback/useEffect paradigm:
const bentoClickHandler = React.useCallback((e) => { if (e.detail.message === 'my-event-name') { // take action here } }, [ /* any dependencies used in the function */ ]); useEffect(() => { document.addEventListener('bento-buttonClicked', bentoClickHandler); return () => { document.removeEventListener('bento-buttonClicked', bentoClickHandler); } }, [bentoClickHandler]);