derbysoft-all-in-one-help-widget

All In One Help Widget

中文文档

Installation

Using NPM:

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

Documentation

Basic usage

You can use AllInOneHelpWidget constructor to initial all the widgets and render the action button.

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

Or you can create an instance and call methods to initial widgets.

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

// Create an instance
const allInOneHelpWidget = new AllInOneHelpWidget();

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

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

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

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

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

// Render action button
allInOneHelpWidget.render();

Options

You can pass an object type options to config AllInOneHelpWidget.

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

Option	Description	Default value
parentEl	Parent container of the component button	document.body
position	Location of component buttons	AllInOneHelpWidget.Position.BOTTOM_RIGHT
locale	Languages applied within components	"en-US"

Widget options

You can config the widget when initialing.

Option	Description	Default value
id	Injected into the id of the plugin	undefined
enabled	If true, the plugin will be injected into the page	false
activated	Only KnowledgeBase has this option, if it is false, the KnowledgeBase option button will be disabled.	false

Other instance methods

activateKnowledgeBase

Activate the KnowledgeBase option button.

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

deactivateKnowledgeBase

Disable the KnowledgeBase option button.

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

replaceParentEl

Replace the parent container of a component button.

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

updatePosition

Replace the position of the component button.

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

updateLocale

Replace the language applied within the component.

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