Interface ChatPanelConfiguration

This configuration allows the ChatPanel to be customized in several ways.

The ChatPanel can have different states. A Expanded Only state or a Full Widget state. When tapping the Full widget (or the collapsed panel) it switches to the Expanded state.

When creating a ChatPanel, choose the style when presenting it:

// Selector target needs to be rendered on the page prior to this
const targetElement = document.querySelector('#myChatPanel');

const myPanel = ChatPanel(
targetElement,
{
client: client,
channelId: 'INSERT_CHANNEL_ID_HERE',
theme: {
// You can specify a base theme to start from
base: 'light',
}
config: {
// You can specify a title for you panel
title: 'John and Leila call',
}
}
);

See

How to apply a configuration?

Hierarchy

  • BasePanelConfiguration
    • ChatPanelConfiguration

Properties

autoScrollOffset?: number

Number of message hidden from the latest one before disabling auto-scroll when looking into older message

Default

1

canSendMessage?: boolean

Allow the user to send message. If false, composer will be hidden

Default

true

collapsedStateOptions: null | DeepPartial<CollapsedStateOptions>
enableAutoScroll?: boolean

Enable the autoscroll when new message are received

Default

true

expandedStateOptions: null | DeepPartial<ExpandedStateOptions>
maxCharactersLimit?: number

Limit of length per chat message (Max 2000)

Default

240

panelSubtitle?: string

Overrides the panel subtitle.

panelTitle: string

Overrides the panel title.

previewBeforeJoin?: boolean

if previewBeforeJoin = true, user will see the chat but will need to click on JOIN to participate

Default

false

shareLinkUrl?: string

Customizes the URL for the channel, user can share this link with other people.