This page includes the release notes related directly to Flex WebChat UI. Visit the Twilio Changelog and select "Flex" to see the Flex Changelog.
release date December 12, 2023
To get started with Webchat 3.0, see the Webchat 3.0 overview. This release is in Public Beta.
Webchat 3.0 works with Flex UI version 2.0.x and later.
This release includes breaking changes from Webchat 2.0. If you want to upgrade from Webchat 2.0, you must migrate to the new version.
release date May 28, 2024
release date September 15, 2023
release date September 15, 2023
release date June 15, 2021
release date May 11, 2021
release date FEB 26, 2021
release date FEB 24, 2021
release date JAN 13, 2021
release date DEC 9, 2020
New versions of dependencies can contain changes in internal APIs that we do not document in release notes. If you're using any undocumented apis of upgraded dependencies, please review your code and update your customizations as needed. Any changes in undocumented api's are not considered breaking changes, however, if you are using them, this might break your customizations.
Example: This version of chat-sdk contains changes in internal API. To access channel attributes, channel.attributes
is supported as per https://media.twiliocdn.com/sdk/js/chat/releases/3.4.0/docs/Channel.html and not channel.state.attributes
.
release date OCT 27, 2020
release date SEP 16, 2020
MessagingCanvas.defaultProps.charLimit = 1000
http://flex.twilio.com?test=true
.
release date SEP 01, 2020
Web Chat UI API Reference for this version of Web Chat UI is available here
release date JUN 23, 2020
true
. It's used to render the notification bar below the main header. You can find out more about the Notifications Framework here
MessageCanvasTray
release date APR 27, 2020
Handlebars Dependency Upgrade: Handlebars provides templating for the strings exposed by Flex UI and Flex WebChat UI. In this release we are upgrading Handlebars to 4.7.3 to fix critical security vulnerabilities exposed in previous versions of Handlebars. This may be a breaking change if you use certain undocumented Handlebars features. You can find more information about this change atthe following link.
release date MAR 04, 2020
release date JAN 16, 2020
MainContainer
max-height set to
80vh
to make webchat accessible from smaller screens.
release date OCT 30, 2019
release date OCT 07, 2019
Markdown
Options | Syntax |
---|---|
Bold | **Bold** |
Italic | *Italic* |
Strikethrough | ~Strikethrough~ |
Bullet list | * List * List * List |
Numbered list | 1. One 2. Two 3. Three |
release date AUG 29, 2019
DynamicForm
email validation now correctly supports 2-chars domains, subdomains.
release date AUG 12, 2019
create-react-app
:
1import 'react-app-polyfill/ie11';2import 'react-app-polyfill/stable';
release date JUL 17, 2019
Aria props properties to the following components to support accessibility:
MessageInput:
sendButtonAriaProps
• AriaProps • Send button aria props (
{ ariaLabel: "Send Message" }
by default).
textAreaAriaProps
• AriaProps • Text area aria props (
{ ariaLabel: "Enter your message here to get help" }
by default)
MessageList:
listContainerAriaProps
• AriaProps • List container aria props (
{ ariaLive: AriaLive.Off }
by default).
EntryPoint:
collapsedIconAriaProps
• AriaProps • Collapsed icon aria props (
{ariaLabel: "Click here to open Web Chat and get help."}
by default).
openedIconAriaProps
• AriaProps • Opened icon aria props (
{ariaLabel: "Hide Chat"}
by default).
Example on how to set aria attributes:
1FlexWebChat.MessageInput.defaultProps.sendButtonAriaProps = {2ariaLabel: "Send Message",3ariaLive: FlexWebChat.AriaLive.Polite4};56FlexWebChat.MessageInput.defaultProps.textAreaAriaProps = {7ariaLabel: "Enter your message here to get help",8ariaLive: FlexWebChat.AriaLive.Assertive9};
theme.Chat.MessageInput.Button
.
Example on how to change the icon for a text:
1appConfig = {2<...>3Chat: {4MessageInput: {5Button: {6borderRadius: "5px",7width: "100px",8fontSize: "18px",9svg: {10display: "none"11},12":after": {13content: '"Send Button text"'14}15}16}17},18<...>
AppState.tryGet
method
@twilio/flex-webchat-ui@2.0.0
release date APR 1, 2019
This major version contains breaking changes
This WebChat version works with any Flex UI version starting from version 1.0.0
MessagingCanvas.
Users will see a character limit notification and message submit will be disabled if the limit is reached. The
SendMessage
action will validate the character limit and fail the action if the limit is reached.
Required
validation in the
pre-engagement form
was fixed. Users will not be able to submit the form if all required fields are not filled.
predefinedMessage
defaultProp to
Messaging
to display and customise a predefined initial message to the user. It is set to be displayed by default, but can be customized or turned off completely. Read more about how predefined message is used in
Installing and using Flex WebChat
sdkOptions.chat
key to configuration object that can be used to pass options to chat SDK during initialization.
Twilio.FlexWebChat.renderWebChat
added to initialize and render WebChat automatically. To create and render WebChat automatically (without configuring anything). Read more about ways to initializing and configure WebChat in
Installing and using Flex WebChat
.
email
type field to the
pre-engagement form
. Data entered in that filed by the user will need to pass email validation to be submitted.
Twilio.Flex
renamed to
Twilio.FlexWebChat
.
Twilio.FlexWebChat.createWebChat
now only creates an instance of WebChat, but does not render it automatically. Use
Twilio.FlexWebChat.renderWebChat
to render automatically (instead of
createWebChat
). Read more about ways to initializing and configure WebChat in
Installing and using Flex WebChat
.
configure()
method from returned
Twilio.Flex.createWebChat
object. Use
manager.configuration
member to set the configuration.
startEngagementOnInit
by default is
true
, and the default
preEngagementConfig
is removed. Read about how to add a pre-engagement form in
Pre-engagement and context
Breaking change: We have changed the following component props of the EntryPoint
component:
hideTaglineWhenExpanded
- choose whether to hide the
tagline
when chat box is expanded.
iconClosed
- name of the icon to be shown when chat box is closed.
iconExpanded
- name of the icon to be shown when chat box is expanded.
tagline
- tagline content.
We have also removed the following EntryPoint props in favour EntryPoint.Container
defined in the colorTheme object:
entryPointStyle
entryPointBorderStyle
entryPointClassName
widgetClassName
entryPointSize
entryPointLocation
bottom
right
background
color
preEngagementConfig.footerLabel
to set it. To style pre-engagement form footer text, use
PreEngagementCanvas.Footer
in
colorTheme object
.
logLevel
by default is set to
error
.
MessageInput
now uses
localState
by default. This will allow the developer to store the message input value in the component state instead of the Redux state.
Please note:
MessageInput.defaultProps.useLocalState
should be set to
false
if there's the intention of changing the input value using the
SetInputText
action.
EngagementStage
setEngagementStage()
method has been removed from returned
Twilio.Flex.createWebChat
object. Engagement stage is determined by configuration and chat state.
We have removed the following unused config options:
Config.canvasBottom
prop
Config.postEngagementConfig
prop
Config.timeoutEngagementConfig
prop
SessionState.sessionData
prop
SessionState.waitingTimeoutSeconds
prop
SessionState.preEngagementReady
prop
@twilio/flex-webchat-ui@1.2.0
release date JAN 11, 2019
message sender
after the chat was completed
1const reducers = combineReducers({2flex: WebchatReducer,3app: appReducer4});56const store = createStore(7reducers,8compose(9applyWebchatMiddleware()10)11);1213FlexWebChat.Manager.create(config, store)14.then(manager => {15ReactDOM.render(16<Provider store={store}>17<FlexWebChat.ContextProvider manager={manager}>18<FlexWebChat.RootContainer />19</FlexWebChat.ContextProvider>20</Provider>,21document.getElementById("container")22);23});
@twilio/flex-webchat-ui@1.1.0
release date DEC 19, 2018
selectItem
type in pre-engagement form by passing the missing value prop to
Select
and fixed the styles for the same.
DynamicFrom
for webchat forms.
startEngagementOnInit
option now disables pre-engagement form
Anonymous
and can be defined through context argument as
friendlyName
field
New GA version of the Flex WebChat UI has been released and is now available on NPM
New configuration options required in the application configuration:
accountSid
- Account SID where Flex is running
flexFlowSid
- Flex Flow SID created at onboarding for chat
startEngagementUrl
and
serviceBaseUrl
main
field in package.json.
Theming was reworked and config parameters changed. User now has 4 distinct levels available to theme their application.
BlueMediumTheme
is chosen automatically.
colorTheme:"DarkTheme"
or
colorTheme: {name: "DarkTheme"}
. Available themes are
MediumTheme
,
DarkTheme
,
BlueMediumTheme
and
BlueDarkTheme
. A predefined theme specifies base colors used and also whether the theme is considered light or dark, which influences text and hover colors unless they are specifically changed.
Overriding all or a selection of colors and/or the lightness of the theme that was set by the predefined theme (note, specifying predefined theme was not compulsory, but in BllueMediumTheme
was then used as default).
colors - variables base1
..base11
are colors provided by the predefined theme that set the tone of the theme. User can override all (preferred) or some of those colors. User can also override any of the theme independent hardcoded colors like for example the red color of hangup button.
Available colors to override are:
base1, base2, base3, base4, base5, base6, base7, base8, base9, base10, base11, defaultButtonColor, lightTextColor, darkTextColor, buttonHoverColor, tabSelectedColor, connectingColor, disconnectedColor, notificationBackgroundColorInformation, notificationBackgroundColorSuccess, notificationBackgroundColorError, notificationBackgroundColorWarning, notificationIconColorError, notificationIconColorWarning, userAvailableColor, userUnavailableColor, errorColor,
color -> component css props
mapping result in final theme where each component has a set of color specific css props. Should this not suffice there is a final step of providing
overrides
property that allows for overriding any parts of this result. Documenting that object is beyond the scope of this changelog, it is easiest to just monitor that object in debugger and decide on what parameters to change.
Examples:
1// Picks the default blue dark theme2config.colorTheme = "BlueDarkTheme";3// Picks dark theme, changes all of its base colors to new ones and tells the system that we still expect it to take the theme as dark (light parameter)4config.colorTheme = {5name: "DarkTheme",6colors: {7base1: "blue",8base2: "orange",9base3: "yellow",10base4: "black",11base5: "white",12base6: "pink",13base7: "red",14base8: "blue",15base9: "brown",16base10: "black",17base11: "white"18},19light: false;20}