Plugins

Plugins are currently the main mechanism to alter and extend the functionality of SDK. They are currently a few types of plugins, each one of the plugin relates to a certain part of the SDK.

WelcomePlugin

The welcome page is rendered by the WelcomePlugin, if you wish to change the welcome page, you can create your own plugin. The WelcomePlugin should return a React component, the component receives a callback function called close that should be called once the introduction has completed.

Example:

const myCustomWelcome: WelcomePlugin = {
    Component: ({ close }) => {
        return (
            <div>
                <button value='I want to get support :)' onClick={close}></button>
            </div>
        );
    },
};

LoginPlugin

The login page is rendered by the LoginPlugin, if you wish to change the login page, you can create your own plugin. The LoginPlugin should return a React component, the component receives 3 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 are able to enhance the timeline capabilities and render your own custom components, by providing new TimelineItemPlugin(s). For this plugin, you have to provide 2 additional parameters, in addition to the Component/render parameter.

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	Determinate on 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. Should other timeline item be grouped with this one. The items will still only be grouped if sent be 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,
};