Plugins

Plugins are currently the main mechanism to alter and extend the functionality of SDK. Each plugin relates to a certain part of the SDK.

LoginPlugin

The login page is rendered by the LoginPlugin. If you'd like to change the login page, you can create your plugin. The LoginPlugin should return a React component. This component receives three parameters from the SDK:

Name	Type	Description
isLoggedIn	boolean	Indicates whether you're logged in or not
login	(token: string: boolean, loginType: string) => Promise	The login function to call once you have a token
partner	string	Your partner string

Example:

const myCustomLogin: LoginPlugin = {
    Component: ({ login, isLoggedIn, partner }) => {
        const token = partner + '5'; // Custom token

        return (
            <div>
                <button value='Login' onClick={() => login(token, "MyCustomLogin")}></button>
            </div>
        );
    },
};

TimelineItemPlugin

You can enhance the timeline capabilities and render your custom components by providing new TimelineItemPlugin(s). For this plugin, you need to provide two additional parameters in addition to the Component/render parameter.

TimelineItemPlugins can appear in the messages timeline in two different ways:

1. The expert or the system sent an item with the same name as the plugin name
2. There is usage of sendMessage with messageType as the plugin name

Name	Type	Description
canRender	(item: TimelineItem) => boolean	A function that checks whether the plugin can render the timeline item
Component (deprecated)	ComponentType	A React component that will be rendered, receives all Timeline item props. Since React versions will not be the same, some features (like React Hooks) won't work. We recommend using render for plugins.
render	(targetElement: HTMLDivElement, data: TimelineItemComponentProps) => void	A function for rendering a timeline item with no dependency on technology. You can use vanilla js, jquery, mount a React/Angular/Vue root, and more. We recommend using this method to avoid instead of Component to avoid React version mismatches that could easily break.
canBeSkipped	(item: TimelineItem) => boolean	Determine which situations the flow of the item can be skipped via the message box
shouldBeContained?	() => boolean;	Optional. Should this component be wrapped by a TimelineItem container. Default is false.
shouldGroup?	(item: TimelineItem<any>) => boolean;	Optional. Whether other timeline items are grouped with this one. The items will still only be grouped if sent by the same sender. Default is false.

Example:

const CustomComponent: props => {
    return (
        <div>
            <h1>Happy birthday</h1>
            Happy birthday to you, user number {props.timelineId}, we hope you are happy.
        </div>
    );
};

// Using custom render field
const birthdayTimelineItem: TimelineItemPlugin = {
    canRender: item => item.contentType === 'BirthdayComponent',
    canBeSkipped: item => false
    render: (element, props) => {
        ReactDOM.render(<CustomComponent {...props} />, element);
    },
};

// Using React Component field
const birthdayTimelineItem: TimelineItemPlugin = {
    canRender: item => item.contentType === 'BirthdayComponent',
    canBeSkipped: item => false
    Component: CustomComponent,
};