All In One Help Widget

English Document

安装

使用 NPM:

$ npm install derbysoft-all-in-one-help-widget

文档

基本使用

可以使用AllInOneHelpWidget的构造函数来初始化所有的组件，并且渲染按钮。

import AllInOneHelpWidget from 'derbysoft-all-in-one-help-widget';

new AllInOneHelpWidget({
    [AllInOneHelpWidget.GoogleAnalytics]: {
        id: 'GOOGLE_ANALYTICS_ID',
        enabled: true
    },
    [AllInOneHelpWidget.Smartlook]: {
        id: 'SMART_LOOK_ID',
        enabled: true
    },
    [AllInOneHelpWidget.ProductTours]: {
        id: 'PRODUCT_TOURS_ID',
        enabled: true
    },
    [AllInOneHelpWidget.KnowledgeBase]: {
        id: 'KNOWLEDGE_BASE_ID',
        enabled: true
    },
    [AllInOneHelpWidget.Feedback]: {
        id: 'FEED_BACK_ID',
        enabled: true
    }
}).render();

也可以创建AllInOneHelpWidget实例，并调用方法来初始化各个组件。

// 引入 AllInOneHelpWidget
import AllInOneHelpWidget from 'derbysoft-all-in-one-help-widget';

// 创建实例
const allInOneHelpWidget = new AllInOneHelpWidget();

// 初始化 GoogleAnalytics
allInOneHelpWidget.initGoogleAnalytics({
    id: 'GOOGLE_ANALYTICS_ID',
    enabled: true
});

// 初始化 Smartlook
allInOneHelpWidget.initSmartlook({
    id: 'SMART_LOOK_ID',
    enabled: true
});

// 初始化 Feedback
allInOneHelpWidget.initFeedback({
    id: 'FEED_BACK_ID',
    enabled: true
});

// 初始化 KnowledgeBase
allInOneHelpWidget.initKnowledgeBase({
    id: 'KNOWLEDGE_BASE_ID',
    enabled: true
});

// 初始化 ProductTours
allInOneHelpWidget.initProductTours({
    id: 'PRODUCT_TOURS_ID',
    enabled: true
});

// 渲染按钮
allInOneHelpWidget.render();

配置项

可以传入一个Object类型的配置项来配置AllInOneHelpWidget

const allInOneHelpWidget = new AllInOneHelpWidget({
    parentEl: document.body,
    position: AllInOneHelpWidget.Position.BOTTOM_RIGHT,
    locale: "en-US"
});

| 配置项 | 描述 | 默认值 | |:---------|:---------|:-----------------------------------------| | parentEl | 组件按钮的父容器 | document.body | | position | 组件按钮的位置 | AllInOneHelpWidget.Position.BOTTOM_RIGHT | | locale | 组件内应用的语言 | "en-US" |

组件配置项

可以在初始化时配置小组件。

| 配置项 | 描述 | 默认值 | |:-----------|:------------------------------------------------------|:----------| | id | 注入到组件的id | undefined | | enabled | 如果为true, 该组件将被注入到页面中 | false | | activated | 只有KnowledgeBase有此选项, 如果为false, KnowledgeBase选项按钮将被禁用 | false |

其他实例方法

activateKnowledgeBase

激活KnowledgeBase选项按钮

const allInOneHelpWidget = new AllInOneHelpWidget();
allInOneHelpWidget.activateKnowledgeBase();

deactivateKnowledgeBase

禁用KnowledgeBase选项按钮

const allInOneHelpWidget = new AllInOneHelpWidget();
allInOneHelpWidget.deactivateKnowledgeBase();

replaceParentEl

替换组件按钮的父容器

const allInOneHelpWidget = new AllInOneHelpWidget();
allInOneHelpWidget.replaceParentEl(ducument.body);

updatePosition

替换组件按钮的位置

const allInOneHelpWidget = new AllInOneHelpWidget();
allInOneHelpWidget.updatePosition(AllInOneHelpWidget.Position.BOTTOM_RIGHT);

updateLocale

替换组件内应用的语言

const allInOneHelpWidget = new AllInOneHelpWidget();
allInOneHelpWidget.updateLocale('en-US');