Beacon API Docs
  • Beacon - Installation
  • Beacon - Usage
    • Beacon Usage - Overview
    • Usage in a Next.js Environment
    • Open and Close Programmatically
  • Native Routing in Beacon
    • Vanilla JS - Native Routing Example
    • React JS - Native Routing Example
    • Vue JS - Native Routing Example
    • Angular JS - Native Routing Example
  • Loading User Data into BeaconBar
  • Loading Session Data into Beacon Bar
  • Callbacks in Beacon
    • Add Callbacks in Beacon
    • Remove Callbacks in Beacon
    • React Example for Callbacks
  • Trigger smart journeys From Your App
  • Execute Command From Your App
  • Open Help Docs From Your App
  • Emitting Events to Beacon
  • Listening to events from Beacon Bar
    • Adding event listeners in Beacon
    • Removing event listeners in Beacon
    • React Example for Event Listeners in Beacon
  • List of events emitted by Beacon Bar
  • Implementing Content Security Policy (CSP) for Beacon Integration
Powered by GitBook
On this page

Trigger smart journeys From Your App

Smart Journeys in the @beacon.li/bar package allow you to guide users through predefined experiences or workflows within your app. You can trigger these journeys programmatically to provide users with interactive and informative steps.

Triggering a Smart Journey

To trigger a Smart Journey from your app, you can use the Beacon.startJourney method. This method takes two parameters:

  1. journeyId (string): The unique identifier of the journey you want to trigger.

  2. type (string, optional, default: 'main'): The type of the journey, which can be 'main', 'pinned', or 'closed'.

Here's how to use it:

import { Beacon } from '@beacon.li/bar';
Beacon.startJourney('journeyId', 'main');

In the example above, we are triggering the Smart Journey with the ID 'journeyId' and specifying it as a 'main' type journey. This will initiate the predefined experience associated with that journey.

Journey Types

  • Main: A 'main' type journey is typically the primary or main experience you want to guide users through. In this, user will see the journey in a full-size beacon bar in a pop-up/modal.

  • Pinned: A 'pinned' type journey can be used to highlight specific steps or content to the user, typically by pinning it to the Beacon widget for easy access. In this, user will see the journey in a chat-window-size beacon bar in the bottom right corner.

  • Closed: A 'closed' type journey can be used to show only in the BeaconBar onClick of it users can see the pinned view. In this, user will see the journey as the first command in the beacon bar whenever they invoke the bar.

Use Cases

  • Use Smart Journeys to onboard new users and help them get started with your app.

  • Provide step-by-step tutorials or guides for specific features or workflows.

  • Highlight important announcements, promotions, or updates using pinned journeys.

By incorporating Smart Journeys into your app using @beacon.li/bar, you can deliver a more guided and informative experience to your users, increasing user engagement and satisfaction.

PreviousReact Example for CallbacksNextExecute Command From Your App

Last updated 1 year ago