Configure the Flex WebChat 2.0 UI
Info
This guide is for Flex UI 1.x.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x.x or you are starting out, we recommend that you build with Webchat 3.0.
You can change the Flex WebChat 2.0 look, feel, and behavior via configuration settings. You can override any of the default configuration values.
There are two ways to configure the Flex UI:
Basic configuration allows you to do simple customizations to WebChat display options and behavior. With a few lines of code you can make changes like:
-
Show or hide the logo in the header
-
Change the properties of any WebChat component
-
Pass context for routing or to be displayed to an agent
-
Configure how the author of the message is displayed
-
Show or hide a typing indicator or message read receipt
and much more.
In the configuration object, you can define default properties to WebChat Components (listed below) and also configure properties that are not tied to specific Components.
_25const defaultConfiguration: Config = {
_25 disableLocalStorage: false,
_25 baseName: "BlueMediumTheme"
_25 avatarCallback: (identity: string) => SessionActions.getAgentAvatar(identity),
_25 showTrayOnInactive: true
_25 onButtonClick: () => Actions.invokeAction("RestartEngagement")
_25 tokenServerUrl: "https://iam.twilio.com/v1/Accounts/{accountSid}/Tokens",
_25 flexWebChannelsUrl: "https://flex-api.twilio.com/v1/WebChannels",
_25 friendlyName: "Anonymous"
_25 startEngagementOnInit: true,
Variable name | Type | Description |
---|
accountSid | string | The identifier for the Twilio account to which you want to connect the Webchat instance. |
flexFlowSid | string | The unique identifier for the Flex Flow that will handle messages. |
chatFriendlyName | string | Friendly name to use for created chat channels |
available | boolean | Chat service availability. It sets whether to display the EntryPoint or not |
logLevel | string | Specificity of log output 0 - 'trace'
1 - 'debug'
2 - 'info'
3 - 'warn'
4 - 'error'
5 - 'silent' |
context | json object | Context object. Metadata that gets passed to backend about the request |
colorTheme | json object | Theme configuration |
disableLocalStorage | boolean | Configuration to disable local storage |
preEngagementConfig | json object | pre-engagement form |
startEngagementOnInit | boolean | pre-engagement form on/off |
componentProps | json object | Represents defaultProps of each component in WebChat. See above for an example |
sdkOptions
| json object | Tailor SDK parameters
{ voice: {}, worker: {}, chat: {}, insights: {} } |
markdownSupport | json object | Disabled by default. Config object needs to be enabled for Chat Markdown Support:
{ enabled: true } |
tokenServerUrl | string | Token server URL |
flexWebChannelsUrl | string | Flex WebChannels URL |
You may also configure default properties for components using the React defaultprops API.
_10componentProps: { [Component Name]: { [Prop Name]: [PropValue] } }
Examples of setting props for Components:
_10FlexWebChat.MainHeader.defaultProps.showImage = true;
This example sets logo to be shown in the main header
You can find the full list of WebChat components here. Below are the lists of component-specific props for the following components:
Prop Name | Type | Description |
---|
startEngagementOnInit | boolean | pre-engagement form on, on chat startup |
height | string | Height of the expanded webchat |
width | string | Width of the expanded webchat |
bottom | string | Distance from webchat bottom to the bottom of the screen |
right | string | Distance from webchat right side to right edge of the screen |
Prop Name | Type | Description |
---|
hideTaglineWhenExpanded | boolean | Tells if the tagline has to be hidden when expended |
iconClosed | string | Represents icon to be shown when not expanded. Example: "MessageBold" |
collapsedIconAriaProps | AriaProps | Collapsed icon aria props. |
openedIconAriaProps | AriaProps | Opened icon aria props. |
iconExpanded | string | Represents icon to be shown when expanded. Example: "ArrowDown" |
tagline | string | tagline content |
Prop Name | Type | Description |
---|
titleText | string | Override header title of the expanded webchat |
imageUrl | string | Override header logo of the expanded webchat |
showTitle | boolean | Should the title be displayed in the header |
showImage | boolean | Should the logo be displayed in the header |
closeCallback | Function | A callback to trigger when close button is clicked. Example:
closeCallback: () => { Actions.invokeAction("MinimizeChat"); } |
Prop Name | Type | Description |
---|
PredefinedMessage | json object | Represents an initial automated message, shown in the chat. See below for an example. |
avatarCallback | (identity: string) => string | Callback function to return avatar URL of a member |
memberDisplayOptions | json object | Allows to override chat participant names, e.g. setting agent to Agent and customer to Customer. See an example below. |
messageStyle | string | Defines the visual style of the message area. Options are "Rounded", "Squared", and "Minimal" |
showReadStatus | boolean | Controls if message read indicator will be shown |
showTypingIndicator | boolean | Controls if [SomeOne] is typing will be shown |
showWelcomeMessage | boolean | Controls if welcome message will be shown at the beginning of the conversation |
welcomeMessageText | CompiledTemplate | Text displayed as a welcome message |
showTrayOnInactive | boolean | Display message tray component, indicating that the chat is no longer active whenever channel status is inactive |
charLimit | number | Identifies character limit for a single message |
inputDisabledReason | string | A reason on why the input element is disabled |
autoInitChannel | MessagingCanvas.autoInitChannel | Should the component automatically initialize chat channel if not initialized already. |
PredefinedMessage represents an initial automated message, shown in the chat
-
body - content of the message
-
authorName - name of the author
-
isFromMe - whether it appears as message from the current user or not
Turning the PredefinedMessage
off:
_10FlexWebChat.MessagingCanvas.defaultProps.predefinedMessage = false;
Allows to override chat participant names, e.g. setting agent to Agent and customer to Customer.
Example of setting a default message author instead of using member friendlyName:
_10 yourDefaultName: 'You',
_10 theirDefaultName: 'Agent',
_10 yourFriendlyNameOverride: false,
_10 theirFriendlyNameOverride: false
Prop Name | Type | Description |
---|
useFriendlyName | boolean | Override chat participant name with a friendly name |
messageStyle | string | Visual style of the individual message. Options are "Rounded", "Squared", and "Minimal" |
authorName | string | A custom author name to be used |
useFriendlyName | boolean | Use friendlyName as author name instead of custom authorName |
avatarUrl | | Url to the avatar of the author |
message | | An object which represents a single message. |
Prop Name | Type | Description |
---|
showButton | boolean | Display a 'Start new chat' button in the tray |
onButtonClick | () => void | A handler for a 'Start new chat' button click |