Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Basic configuration

Overview

WebChat allows for basic configuration of webChat look and feel, and behavior via configuration settings. You can override any of the default configuration values.

There are 2 ways to configure Flex UI:

  • Configuration object
  • React defaultProps API

What can you do with basic configuration?

Basic configuration allows you to do simple customizations to WebChat display options and behavior. With a fiew lines of code you can make changes like:

  • Show hide logo in the header
  • Change 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 / hide typing indicator or message read receipt

and much more.

Configuration object

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.

WebChat default configuration

const defaultConfiguration: Config = {
    language: "en-US",
    disableLocalStorage: false,
    available: true,
    colorTheme: {
        baseName: "BlueMediumTheme"
    },
    componentProps: {
        MessagingCanvas: {
            avatarCallback: (identity: string) => SessionActions.getAgentAvatar(identity),
            showTrayOnInactive: true
        },
        MessageCanvasTray: {
            onButtonClick: () => Actions.invokeAction("RestartEngagement")
        }
    },
    tokenServerUrl: "https://iam.twilio.com/v1/Accounts/{accountSid}/Tokens",
    flexWebChannelsUrl: "https://flex-api.twilio.com/v1/WebChannels",
    context: {
        friendlyName: "Anonymous"
    },
    startEngagementOnInit: true,
    sdkOptions: {
        chat: {}
    }
};

WebChat basic configuration properties

Variable name Type Description

accountSid

string here

flexFlowSid

string here

chatFriendlyName

string Friendly name to use for created chat channels

logLevel

string

Specificity of log output

0 – 'trace'

1 – 'debug'

2 – 'info'

3 – 'warn'

4 – 'error'

5 – 'silent'

tokenServerUrl

string Taken server URL

flexWebChannelsUrl

string Flex webChannels URL

context

json object Context object

colorTheme

json object Theme configuration

language

string not used currently

disableLocalStorage

boolean Configuration to disable local storage

startEngagementOnInit

boolean pre-engagement form on/off

componentProps

json object

Represents defaultProps of each component in WebChat

Example:

componentProps: {

MessagingCanvas: {

avatarCallback:(identity:string)=>SessionActions.getAgentAvatar(identity),

showTrayOnInactive:true},

MessageCanvasTray: {onButtonClick:()=>Actions.invokeAction("RestartEngagement")

}

},

sdkOptions

json object Tailor SDK parameters
{
voice: {},
worker: {},
chat: {},
insights: {}
}

preEngagementConfig

json object pre-engagement form

React default props API

You may also configure default properties for components using the React defaultprops API.

componentProps: { [Component Name]: { [Prop Name]: [PropValue] } }

Examples of setting props for Components:

FlexWebChat.MainHeader.defaultProps.showImage = true;

This example sets logo to be shown in the main header

Component props

You can find the full list of WebChat components here. Below are the lists of component-specific props for the following components:

MainContainer

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

EntryPoint

Prop Name Type Description
hideTaglineWhenExpanded boolean

Tells if the tagline has to be hidden when expended

isEntryPointExpanded boolean

Represents if entrypoint is expanded.

iconClosed string

Represents icon to be shown when not expanded. Example: "MessageBold"

iconExpanded string

Represents icon to be shown when expanded. Example: "ArrowDown"

tagline string

tagline content

MainHeader

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");

}

MessagingCanvas

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

PredefinedMessage

PredefinedMessage represents an initial automated message, shown in the chat

    • body - content of the message
    • author - name of the author
    • isFromMe - whether it appears as message from the current user or not

Turning the PredefinedMessage off:

FlexWebChat.MessagingCanvas.defaultProps.predefinedMessage = false;

memberDisplayOptions

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:

{

  yourDefaultName: 'You',

  theirDefaultName: 'Agent',

  yourFriendlyNameOverride: false,

  theirFriendlyNameOverride: false

}

MessageListItem

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

MessageInput

Prop Name Type Description
areaStyle string
returnKeySendsMessage boolean Whether pressing the return key should send a message
useLocalState boolean

If set to true, it keeps the message value in the local component state, instead of the Redux state. Please set it to false if you want to set the input value using the "SetInputText" action.

MessageCanvasTray

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
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.