You might want to implement additional logic in your application that is triggered if the Bento API indicates that your user DOES or DOES NOT have an active, launched guide.

The Bento snippet triggers the following DOM Events on the browser's document object to indicate whether the user has or does not have an active, launched guide in Bento:

Controlling your app based on whether a guide is available

Conditionally hide pages / elements when there is no guide

• bento-noGuideFound
  • This indicates that the Bento JS snippet has initialized successfully, but the user does not have an active, launched onboarding guide.
  • This event is useful if, say, you want to:
    • Hide elements if the user does not have an onboarding guide
    • Redirect the user away from the onboarding page if they are directed there by default
  • Example usage:

Conditionally show pages / elements based on guide load

• bento-onGuideLoad

  • This indicates that the Bento JS snippet has initialized successfully, and that there is an active, launched guide to display to the user. Often, events will fire in pairs: once for onboarding guides, and once for contextual guides.
  • This event is useful if you want to:
    • Trigger certain elements to be displayed only if the user has an onboarding guide (i.e. an "Onboarding" tab in your nav)
    • Trigger redirecting the user to the onboarding guide
    • Hide an element on the page if the guide found is set to only display in another component style (i.e. hide the inline component style if the only active guide is meant to be shown in the sidebar component style)
    • Display a custom progress indicator for the user’s current active guide
  • Example usage:

  NOTE: This event fires with an additional detail object in the event payload describing the guide. The details object will tell you whether the active guide is complete or incomplete. It will also indicate if the guides loaded are contextual guides or onboarding guides.

  For customers with guide-specific component style targeting enabled, the event will also include the embedType property. The value of that property is null if the guide can be shown anywhere, 'inline' if only for the inline component, or 'sidebar' for sidebar-only.

  The event payload appears like so:

  event: {
  	type: 'bento-onGuideLoad', 
  	// ... other typical 'Event' payload key/value pairs
  	detail: {
  		isComplete: true, // or false. Indicates whether the guide is has incomplete steps or is complete
  		formFactor: null, // or 'inline' or 'sidebar'.
  		isOnboarding: true, // indicates if it's an onboarding or contextual guide
  		// the following properties list the names of the steps in the users
  		// current guide which satisfy each condition
  		allSteps: ['The first step', 'Another Step', 'Third Step', 'Last Step'],
  		completedSteps: ['The first step'],
  		skippedSteps: ['Another Step'],
  		viewedSteps: ['The first step', 'Another Step', 'Third Step'],
  	}
  }
  

• Example usage with using guide-specific event payload:

• Example usage with guide/component targeting:

• Example usage with onboarding guide targeting: