Styling Teneo Web Chat

To modify the look & feel of Teneo Web Chat to your needs, you can provide a custom CSS stylesheet and overwrite the styles used by Teneo Web Chat. This page provides hints an suggestions on how to achieve this. If you are a frontend web designer, this is the page for you.

Be sure to familiarize yourself with the various message types that are supported by Teneo Web Chat before you continue.

Colors and fonts

The quickest way to change the look & feel of Teneo Web Chat is by modifying the colors and font to match your brand. All colors used by Teneo Web Chat are defined using CSS custom properties (variables).

Here's the list of CSS variables used by Teneo Web Chat as well as the font definition:

.teneo-web-chat {
  --light-fg-color: #ffffff;
  --light-bg-color: #eceff1;
  --light-border-color: #c9c9c9;
  --dark-fg-color: #263238;
  --primary-color: #4e8cff;
  --secondary-color: #6c757d;
  --danger-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --warning-fg-text-color: #d19d00;
  --info-color: #17a2b8;
  --expired-color: #a9a9a9;
  --text-link-color: #007bff;
  --user-input-bg-color: #f4f7f9;
  --user-input-fg-color: #565867;
  --spinner-color: var(--light-border-color);
  --sendicon-fg-color: var(--dark-fg-color);
  --launch-button-bg-color: var(--primary-color);
  --launchicon-fg-color: var(--light-fg-color);
  --header-bg-color: var(--primary-color);
  --header-fg-color: var(--light-fg-color);
  --chat-window-bg-color: #ffffff;
  --bot-message-fg-color: var(--dark-fg-color);
  --bot-message-bg-color: var(--light-bg-color);
  --agent-message-fg-color: var(--light-fg-color);
  --agent-message-bg-color: #47b2fd;
  --user-message-bg-color: var(--primary-color);
  --user-message-fg-color: var(--light-fg-color);
  --buttons-title-color: var(--dark-fg-color);
  --button-fg-color: var(--light-fg-color);
  --button-bg-color: var(--primary-color);
  --card-bg-color: var(--light-fg-color);
  --card-link-color: var(--text-link-color);
  --link-button-fg-color: var(--text-link-color);
  --link-button-bg-color: var(--light-fg-color);
  --link-button-border-color: var(--light-border-color);
  --clickablelist-title-color: var(--dark-fg-color);
  --clickablelist-bg-color: var(--light-fg-color);
  --clickablelist-fg-color: var(--dark-fg-color);
  --clickablelist-selected-bg-color: var(--bot-message-bg-color);
  --clickablelist-selected-fg-color: var(--dark-fg-color);
  --quickreply-fg-color: var(--primary-color);
  --quickreply-bg-color: var(--light-fg-color);
  --quickreply-border-color: var(--primary-color);
  --quickreply-expired-color: var(--expired-color);

  --primary-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font: -apple-system-body;
}

CSS custom properties are only supported on modern browsers. To modify colors on older browsers, you can use the inspector in your browser to find the class that you wish to override.

Specifity

Teneo Web Chat uses data attributes and attribute selectors. When overriding a color or a Teneo Web Chat class, you may need to increase specifity by using the !important rule or by specifying multiple classes.

Teneo Web Chat container

When Teneo Web Chat is initialized, a container div with the class teneo-web-chat is added to the page. When the chat window is minimized, this div contains the launch button. Once the chat window is opened, the launch button will be removed and the div will be populated with the chat window.

All class names used inside the Teneo Web Chat container are prefixed with twc-.

Launch button

The launch button (when visible) is a button element with the class twc-launch-button. The style changes slightly when hovered.

The following styles are used to trigger the hover animation:

// button drop shadow
.twc-launch-button:hover {
  box-shadow: 0 0px 27px 1.5px rgba(0, 0, 0, 0.2);
}

// increase size of the icon slightly
.twc-launch-button:hover .twc-launch-button__open-icon {
  transform: scale(1.1);
}

In addition to the class twc-launch-button, the launch button also has one of these classes:

  • twc-closed
    This class is available if Teneo Web Chat was initialized but the user has not opened the chat window yet or if the chat window was closed using the close button or the Reset api.
  • twc-minimized
    This class is available if the chat window was minimized using the minimize button or using the Minimize api.

Currently the twc-closed or twc-minimized classes are not used for any styling of the launch button however. Also note that these classes act independently of the engine session state. In other words, if an engine session expires after 10 minutes of inactivity, the button class will not change.

The launch button div contains a single element:

Element Description
Icon The icon shown in the launch button has the class twc-launch-button__open-icon. The standard icon used in the launch button is an svg image. The icon can be changed using the launchIconUrl configuration setting or using the Set launch icon api call. Both 'plain' URL's and data URL's are supported.

Chat window

The chat window (when visible) is displayed in a div with the class twc-chat-window. The standard width is 370 pixels and the maximum height is 590 pixels, but on mobile devices the chat window is shown full screen and as a result dimensions may differ.

Chat window elements

The chat window consists of three main elements: a header, the message list and the user input area.

Chat window header

The header div has the class twc-header. It contains the following elements:

Element Description
Title icon Div with class twc-header__img. The icon used can be changed using the titleIconUrl configuration setting or using the Set launch icon api call. Both plain URL's and data URL's are supported.
Title text Div with class twc-header__title. The title text can be changed using the title configuration setting or using the Set chat window title api call.
Minimize button Button element with class twc-header__minimize-button. The minimize icon used in the button can be changed using the minimizeIconUrl configuration setting. Both plain URL's and data URL's are supported.
Close button (optional) Button element with class twc-header__close-button. The close button can be configured using the showCloseButton and the closeIconUrl configuration settings. Note that for the icon both plain URL's and data URL's are supported.

Message list

The message list is contained in a div with class twc-message-list. This div will be populated with messages as the conversation between the user and the bot progresses.

Be aware that a message is not the same as an engine repsonse. A single engine response can result in multiple messages being added to the message list. For example, if a response from engine contains an answer text and some buttons, this will result in two separate messages being added the the message list; a message containing the answer text and a message containing the buttons.

More detail about specific message types will be provided in the Messages paragraph below.

Input area

The bottom of the chat window contains div with a form with class twc-user-input. When the input box is disabled using the Disable user input api, a class twc-disabled is added.

The input area contains the following elements:

Element Description
Input field A textarea field with class twc-user-input__text. When the input field gets focus, a class twc-active is added to its parent element.
Submit button A div with class twc-user-input__button. It contains a button element which in turn contains the send icon svg. The icon can be configured using the sendIconUrl configuration setting or using the Set send icon api call. Note that for the icon both plain URL's and data URL's are supported.

Spinner

In addition to the three elements above that are always visible, a 'spinner' element can be shown temporarily. While Teneo Web Chat is waiting for Teneo to come back with a response, a div with the class twc_spinner will be added right above the input area, showing a 'spinner' animation. As soon as a response is received, the div containing the spinner is removed.

Messages

As mentioned above, the message list will be populated with messages as the conversation progresses. Each message that is added to the message list is wrapped in a div with the class twc-message. In this paragraph we will highlight a few things that are important to know when working with messages.

Depending on the type of message (text, card, video etc), the contents of the message div will vary. It is best to use your browser's inspector to inspect the message that you wish to adjust.

Message authors

In addition to the class twc-message each message that is added to the message list has an extra class to denote the author type of the message. Possible classes are twc-user, twc-bot and twc-agent. This class is used to change the color and alignment of the message.

Text messages

Text messages are used to display the bots answer text or the text entered by the user or the agent. By default they only contain a 'bubble' containing the text, but they can contain additional elements:

Element Description
Dateline Optional line of text that can be shown above the text bubble. Can for example be used to display a time stamp or the name of the agent, bot or user. The dateline can be added using the Teneo Web Chat JavaScript api. Specifically the Add message and the On new message api's.
Avatar Optional avatar image that will be shown next to the message. Avatars can be added globally using the botAvatarUrl, userAvatarUrl and the agentAvatarUrl configuration settings or per message using the Add message and the On new message api. For the icons, both plain URL's and data URL's are supported.
Text The user's input text, the bot's answer text or the input of the agent, displayed in a text bubble. Note that the text can contain basic html tags, like links, strong, em etc.

Styles of buttons and quick replies

Buttons and quick replies can have different styles. Note that the name of the class used in the html differs from the name of the style defined in the button definition.

Quick replies with different styles

Style in button defintion CSS class
primary twc-primary
secondary twc-secondary
success twc-success
danger twc-danger
warning twc-warning
info twc-info

Expired and selected messages

Buttons, clickable lists and quick replies can only be interacted with when they are the last message in the list. When a user clicks on a button or when a new message is added to the message list, the clickable elements will disabled. The parent div (which contains the clickable elements) will get an extra class twc-expired once they are disabled.

Additionally, when a user clicks on a button, a quick reply or a clickable list item, the clicked item will get a class twc-selected.

Combo messages

The combo message is a special type of message. It combines multiple message types in a single message. The combo message consists of a unordered list (ul) element where each message that is part of the combo is included in a list (li) element. Apart from that, the classes used for messages displayed in a combo message are the same as they would be displayed normally.

Typing indicators

Typing indicators are temporary messages that look like text message but show a spinner animation instead of text. Just like text messages, the alignment and look of the typing indicator depends on the author type.

Typing indicators can only be adding using the Show typing indicator api. A typing indicator is automatically removed as soon as a new message from the same author type is added to the message list, but they can also be removed using the Hide typing indicator api. Just like text messages, typing indicators can contain a dateline and an avatar.

Typing indicator example

Modal messages appear on top of the chat window by overlaying a semi-transparent div with class twc-modal over the chat window. The size of this div is the same as the size of the chat window. This overlay div in turn contains a div with class twc-modal-content which holds the actual content of the modal message.

Was this page helpful?