Interface ChatCustomElementProps

This is the React component for people injecting a web chat with a custom element.

It provides said element any class or id defined on itself for styling. It then calls ChatContainer with the custom element passed in as a property to be used instead of generating an element with the default properties for a floating chat.

interface ChatCustomElementProps {
    className?: string;
    config: PublicConfig;
    id?: string;
    onAfterRender?: (instance: ChatInstance) => void | Promise<void>;
    onBeforeRender?: (instance: ChatInstance) => void | Promise<void>;
    onViewChange?: (event: BusEventViewChange, instance: ChatInstance) => void;
    renderUserDefinedResponse?: RenderUserDefinedResponse;
    renderWriteableElements?: Partial;
}

Hierarchy (View Summary)

Properties

className?: string

An optional classname that will be added to the custom element.

config: PublicConfig

The config to use to load web chat. Note that the "onLoad" property is overridden by this component. If you need to perform any actions after web chat been loaded, use the "onBeforeRender" or "onAfterRender" props.

id?: string

An optional id that will be added to the custom element.

onAfterRender?: (instance: ChatInstance) => void | Promise<void>

This function is called after the render function of web chat is called. This function can return a Promise which will cause web chat to wait for it before rendering.

onBeforeRender?: (instance: ChatInstance) => void | Promise<void>

This function is called before the render function of web chat is called. This function can return a Promise which will cause web chat to wait for it before rendering.

onViewChange?: (event: BusEventViewChange, instance: ChatInstance) => void

An optional listener for "view:change" events. Such a listener is required when using a custom element in order to control the visibility of the web chat main window. If no callback is provided here, a default one will be used that injects styling into the app that will show and hide the web chat main window and also change the size of the custom element so it doesn't take up space when the main window is closed.

You can provide a different callback here if you want custom behavior such as an animation when the main window is opened or closed.

Note that this function can only be provided before web chat is loaded. After web chat is loaded, the event handler will not be updated.

renderUserDefinedResponse?: RenderUserDefinedResponse

This is the function that this component will call when a user defined response should be rendered.

renderWriteableElements?: Partial

This is the render function this component will call when it needs to render a writeable element.

MMNEPVFCICPMFPCPTTAAATR