@beacon.li/bar

Beacon Bar

Installation

npm install @beacon.li/bar

OR

yarn add @beacon.li/bar

Usage

import {Beacon} from '@beacon.li/bar';

Beacon.load('ORG_ID');

Next.js

import {Beacon} from '@beacon.li/bar';

if (typeof window !== 'undefined') {
    Beacon.load('ORG_ID');
}

Loading User Data

Params

• userId (string) :- The unique identifier of the user can be email or database id
• metaData (object) :- The object containing the user data to be passed to the Beacon Bar

import {Beacon} from '@beacon.li/bar';

Beacon.loadUser(userId, {
    name: 'John Doe',
    isPremiumUser: true,
    currentPlan: 'Premium'
})

Native Routing

Vanilla JS

import {Beacon} from '@beacon.li/bar';

Beacon.setRouter(url => {
    // your logic here
});

React

in your main child component of your router:

import {Beacon} from '@beacon.li/bar';
import {useHistory} from 'react-router-dom';
import {useEffect} from 'react';

const history = useHistory();

useEffect(() => {
    Beacon.setRouter(path => {
        history.push(path);
    });
}, [history]);

Vue

in your main component:

import {Beacon} from '@beacon.li/bar';
import {useRouter} from 'vue-router';
import {onMounted} from 'vue';

export default {
    setup() {
        const router = useRouter();
        onMounted(() => {
            Beacon.setRouter(path => {
                router.push(path);
            });
        })
    }
}

Angular

In your main component:

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {Beacon} from '@beacon.li/bar';

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

    constructor(private router: Router) {
    }

    ngOnInit() {
        Beacon.setRouter((path: string) => {
            this.router.navigateByUrl(path);
        });
    }
}

Open and Close programmatically

import {Beacon} from '@beacon.li/bar';

Beacon.open();

Beacon.close();

Callbacks

Add Callbacks

Adding callback multiple times will replace the old one

Params

• key (string) :- The key of the callback
• callback (function) :- The callback function to be executed
  • Signature :- (userId, metaData) => {}
  • userId (string) (default: beacon-anonymous) :- The unique identifier passed during loadUser
  • metaData (object) (default: {}) :- The metaData object passed during loadUser

import {Beacon} from '@beacon.li/bar';

Beacon.addCallback('your_callback_key', (userId, metaData) => {
    // your logic here
});

Remove Callbacks

Params

• key (string) :- The key of the callback

import {Beacon} from '@beacon.li/bar';

Beacon.removeCallback('your_callback_key');

React Example

Example react fragment to manipulate state with react and callbacks

import {Beacon} from '@beacon.li/bar';
import {useEffect, useState} from 'react';

function Component() {
    const [state, setState] = useState(false);

    useEffect(() => {
        const callback = (userId, metaData) => {
            setState(true);
        }
        Beacon.addCallback('your_callback_key', callback);

        return () => {
            Beacon.removeCallback('your_callback_key');
        }
    }, [setState])
}

Trigger smart journeys

Trigger smart journeys from your app

Params

• journeyId (string) :- The id of the journey
• type (string) (optional) (default: main) :- The type of the journey (main, pinned, closed)

import {Beacon} from '@beacon.li/bar';

Beacon.startJourney('journeyId', 'main');

Execute command

Execute command from your app

Params

• commandId (string) :- The id of the command

import {Beacon} from '@beacon.li/bar';

Beacon.executeCommand('commandId');

Open Help Docs

Open help docs from your app

Params

• helpDocId (string) :- The id of the help doc
• type (string) (optional) (default: default) :- The type of the help doc (default, max)

import {Beacon} from '@beacon.li/bar';

Beacon.openHelpDoc('helpDocId', 'default');

## Emitting Events

Emit custom events to Beacon Bar and use them in rules and journeys

**Params**

* eventName (string) :- The name of the event _(only alphanumeric (a-zA-Z0-9), underscore (\_) and hyphen (-) allowed)_
* attributes (object) (optional) :- The attributes to be passed with the event

```javascript
import {Beacon} from '@beacon.li/bar';

Beacon.trackEvent('event_name', {
    // your attributes here
});

Listening to events from Beacon Bar

Listen to different analytical events emitted by Beacon Bar

Adding event listener

Params

• function
  • Signature :- (eventName, attributes, userId) => {}
    • eventName (string) :- The name of the event
    • attributes (object) :- The attributes passed with the event
    • userId (string) (default: beacon-anonymous) :- The unique identifier passed during loadUser

import {Beacon} from '@beacon.li/bar';

Beacon.addEventListener((eventName, attributes, userId) => {

})

Removing event listener

import {Beacon} from '@beacon.li/bar';

Beacon.removeEventListener(func);

Example react fragment to manipulate state with react and event listener

import {Beacon} from '@beacon.li/bar';
import {useEffect} from 'react';

function Component() {
    useEffect(() => {
        const listener = (eventName, attributes, userId) => {
            // your logic here
        }

        Beacon.addEventListener(listener);

        return () => {
            Beacon.removeEventListener(listener);
        }
    }, [])
}

List of events emitted by Beacon Bar

Event Name	Attributes	Description
barInvoked		When the Beacon Bar is invoked
actionClicked	_id, label, query, hasSearch	When an action is clicked on the Beacon Bar
helpClicked	_id, label, query, hasSearch	When an help doc is clicked on the Beacon Bar
requestCommandClicked	hasSearch, label	When a request new command is clicked on the Beacon Bar
feedbackClicked	hasSearch, label	Feedback command clicked on Beacon Bar

CSP

To ensure proper functionality of Beacon, our third-party JavaScript, on your web app while safeguarding your users against XSS vulnerabilities, it is necessary to include the minimal set of Content Security Policy (CSP) rules listed below.

script-src: https://*.beacon.li;
frame-src: https://*.beacon.li;
img-src: https://*.beacon.li;
media-src: https://*.beacon.li;
connect-src: https://*.beacon.li;
style-src: https://*.beacon.li;