灯塔

安装

npm install @beacon.li/bar

或

yarn add @beacon.li/bar

使用量

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

Beacon.load('ORG_ID');

下一个.js

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

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

正在装入用户数据

参数

• 用户编号(字符串):- 用户唯一的标识符——可以是电子邮件或数据库id
• 元数据(对象):- 含有要传递到灯塔栏的用户数据的对象
• authDetails (object QQ函数 QQ字符串) (可选) :- 用户的认证符号,参见 认证用户

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

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

认证用户( authDetails)

如果为您的 Org 启用了 auth, 请将用户的符号作为第三个参数 loadUser。它接受一个符号 调用(建议),静态符号对象,或赤裸访问符号字符串.

调用回话

在装入时会重新调用回调,在访问符即将过期时也会再次调用回调(如果没有刷新符) 返回)或刷新失败。 一个失败的呼叫在认证被清除之前被重审了三次 .

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

Beacon.loadUser(userId, {name: 'John Doe'}, async () => {
    const res = await fetch('/api/beacon-token');
    return res.json();
    // {accessToken, accessTokenExpiresAt?, refreshToken?, refreshTokenExpiresAt?}
});

静态符号

Beacon.loadUser(userId, {}, {accessToken, accessTokenExpiresAt, refreshToken, refreshTokenExpiresAt});

注销

撤销服务器上的符号,清除本地认证状态并卸下栏.

await Beacon.logout();

原生路线

香草联署材料

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

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

反应

在路由器中您的主要孩子组件中:

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]);

阴道

在您的主要组件中:

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);
            });
        })
    }
}

角质

在您的主要部分:

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);
        });
    }
}

在方案上开放和关闭

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

Beacon.open();

Beacon.close();

回电

添加回调

添加多次召回会取代旧的

参数

• 键(字符串) :- 调用键
• 回调( 函数) : - 要执行的回调函数
  • 签名 : -( 用户ID, 元数据) :
  • userId (字符串)(默认:信标-匿名) :- 期间通过的独特标识符 loadUser
  • 元数据( 对象)( 默认 : ) : - 元数据对象在 loadUser

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

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

删除回调

参数

• 键(字符串) :- 调用键

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

Beacon.removeCallback('your_callback_key');

反应示例

以反应和回调来操纵状态

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])
}

触发智能之旅

从您的应用程序触发智能出行

参数

• riveId (字符串) : -- 旅程的编号
• 类型 (字符串)(可选)(默认:主) :- 旅行类型(主要、被钉住、封闭)

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

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

执行命令

从应用程序执行命令

参数

• 命令Id(字符串):- 命令的编号

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

Beacon.executeCommand('commandId');

打开帮助文档

打开应用程序中的帮助文件

参数

• 帮助DocId (字符串): -- 帮助文件的编号
• 类型 (字符串)(可选) (默认:默认) :- 帮助文件的类型( 默认, 最大)

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

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

纪念事件

将自定义事件释放到灯塔酒吧,并在规则和旅程中使用

参数

• 事件Name (字符串) : -- 活动名称 (只允许字母(a-zA-Z0-9),下划线( )和连字符(-))
• 属性(对象)(可选) :- 要随事件一起传递的属性

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

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

聆听灯塔事件

听听灯塔公司发布的不同分析事件

添加事件听众

参数

• 函数
  • 签名 : -( 事件Name, 属性, userId) QQ
    • 事件Name (字符串) : -- 活动名称
    • 属性(对象) :- 事件传递的属性
    • userId (字符串)(默认:信标-匿名) :- 期间通过的独特标识符 loadUser

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

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

})

删除事件倾听器

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

Beacon.removeEventListener(func);

以反应和事件倾听器处理状态的示例

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);
        }
    }, [])
}

灯塔公司公布的事件清单

聊天和经纪人

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

Beacon.openChat({message: 'Hi', source: 'chat', autoSend: true, active: true}); // source: chat | home | bar
Beacon.openNewChat({message: 'Hi', source: 'chat', autoSend: true});
Beacon.openThread({sessionId: 'SESSION_ID', query: ''});
Beacon.minimizeChat();
Beacon.closeChat();
Beacon.startNewChat();
await Beacon.endChatSession('SESSION_ID');   // ends the session, does not close the chat
const thread = Beacon.getCurrentChatThread();

const answer = await Beacon.runAgent({
    agentRouterId: 'AGENT_ID',
    query: 'Summarise my last order',
    sessionId: 'SESSION_ID',                  // optional
    callBack: text => {},                     // streamed text
});

Beacon.hideChatInvoker();
Beacon.showChatInvoker();

UI 自定义

Beacon.setThemeColor('#1a73e8', '#e8f0fe');   // primary, secondary
Beacon.overrideUiConfig({/* partial org uiConfig */});

社区支助方案

确保Beacon(我们的第三方JavaScript)在您的网络应用上的适当功能,同时保护您的用户 有必要纳入列出的最低限度内容安全政策规则 见下文.

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;