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 and suggestions on how to achieve this. If you are a front-end 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 and 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:
css
1.teneo-web-chat {
2 --light-fg-color: #ffffff;
3 --light-bg-color: #eceff1;
4 --light-border-color: #c9c9c9;
5 --dark-fg-color: #263238;
6 --dark-bg-color: #7b7b7b;
7 --primary-color: #4e8cff;
8 --secondary-color: #6c757d;
9 --danger-color: #dc3545;
10 --success-color: #28a745;
11 --warning-color: #ffc107;
12 --warning-fg-text-color: #d19d00;
13 --info-color: #17a2b8;
14 --expired-color: #a9a9a9;
15 --text-link-color: #007bff;
16 --user-input-bg-color: #f4f7f9;
17 --user-input-fg-color: #565867;
18 --spinner-color: var(--light-border-color);
19 --sendicon-fg-color: var(--dark-fg-color);
20 --uploadicon-fg-color: var(--dark-fg-color);
21 --asricon-fg-color: var(--dark-fg-color);
22 --ttsicon-fg-color: var(--dark-fg-color);
23 --asricon-active-color: var(--danger-color);
24 --ttsicon-active-color: var(--danger-color);
25 --launch-button-bg-color: var(--primary-color);
26 --launchicon-fg-color: var(--light-fg-color);
27 --callout-fg-color: var(--user-input-fg-color);
28 --callout-bg-color: var(--light-fg-color);
29 --callout-close-button-fg-color: var(--secondary-color);
30 --header-bg-color: var(--primary-color);
31 --header-fg-color: var(--light-fg-color);
32 --chat-window-bg-color: #ffffff;
33 --bot-message-fg-color: var(--dark-fg-color);
34 --bot-message-bg-color: var(--light-bg-color);
35 --agent-message-fg-color: var(--light-fg-color);
36 --agent-message-bg-color: #47b2fd;
37 --user-message-fg-color: var(--light-fg-color);
38 --user-message-bg-color: var(--primary-color);
39 --bot-typing-indicator-fg-color: var(--secondary-color);
40 --bot-typing-indicator-bg-color: var(--bot-message-bg-color);
41 --agent-typing-indicator-fg-color: var(--agent-message-fg-color);
42 --agent-typing-indicator-bg-color: var(--agent-message-bg-color);
43 --user-typing-indicator-fg-color: var(--user-message-fg-color);
44 --user-typing-indicator-bg-color: var(--user-message-bg-color);
45 --buttons-title-color: var(--dark-fg-color);
46 --button-fg-color: var(--light-fg-color);
47 --button-bg-color: var(--primary-color);
48 --card-bg-color: var(--light-fg-color);
49 --card-link-color: var(--text-link-color);
50 --link-button-fg-color: var(--text-link-color);
51 --link-button-bg-color: var(--light-fg-color);
52 --link-button-border-color: var(--light-border-color);
53 --clickablelist-title-color: var(--dark-fg-color);
54 --clickablelist-bg-color: var(--light-fg-color);
55 --clickablelist-fg-color: var(--dark-fg-color);
56 --clickablelist-selected-bg-color: var(--bot-message-bg-color);
57 --clickablelist-selected-fg-color: var(--dark-fg-color);
58 --quickreply-fg-color: var(--primary-color);
59 --quickreply-bg-color: var(--light-fg-color);
60 --quickreply-border-color: var(--primary-color);
61 --quickreply-expired-color: var(--expired-color);
62 --lightbox-overlay-color: rgba(0, 0, 0, 0.8);
63 --lightbox-image-background-color: #ffffff;
64 --modal-overlay-color: rgba(0, 0, 0, 0.5);
65 --carousel-ctrl-panel-bg-color: var(--primary-color);
66 --carousel-ctrl-panel-fg-color: var(--light-fg-color);
67 --carousel-ctrl-panel-active-color: var(--secondary-color);
68 --carousel-ctrl-panel-disabled-color: var(--expired-color);
69 --link-preview-background-color: var(--light-bg-color);
70 --link-preview-text-color: var(--dark-fg-color);
71 --link-preview-image-background-color: var(--dark-bg-color);
72 --table-border-color: var(--light-border-color);
73 --table-title-text-color: var(--dark-fg-color);
74 --table-title-background-color: var(--light-bg-color);
75 --table-header-text-color: var(--primary-color);
76 --table-header-background-color: var(--light-bg-color);
77 --table-body-odd-text-color: var(--dark-fg-color);
78 --table-body-odd-background-color: var(--light-bg-color);
79 --table-body-even-text-color: var(--dark-fg-color);
80 --table-body-even-background-color: var(--light-bg-color);
81 --table-footer-text-color: var(--secondary-color);
82 --table-footer-background-color: var(--light-bg-color);
83 --form-background-color: var(--light-bg-color);
84 --form-title-text-color: var(--dark-fg-color);
85 --form-subtitle-text-color: var(--dark-fg-color);
86 --form-caption-text-color: var(--info-color);
87 --form-label-text-color: var(--dark-fg-color);
88 --form-input-background-color: var(--user-input-bg-color);
89 --form-submit-text-color: var(--user-input-bg-color);
90 --form-submit-background-color: var(--success-color);
91 --form-cancel-text-color: var(--user-input-bg-color);
92 --form-cancel-background-color: var(--danger-color);
93 --form-reset-text-color: var(--dark-fg-color);
94 --form-reset-background-color: var(--warning-color);
95
96 --primary-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
97}
98Specificity
Teneo Web Chat uses data attributes and attribute selectors. When overriding a color or a Teneo Web Chat class, you may need to increase specificity 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:
css
1// button drop shadow
2.twc-launch-button:hover {
3 box-shadow: 0 0px 27px 1.5px rgba(0, 0, 0, 0.2);
4}
5
6// increase size of the icon slightly
7.twc-launch-button:hover .twc-launch-button__open-icon {
8 transform: scale(1.1);
9}
10In 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. |
Callout
When the launch button is visible, the Show callout api can be used to display a callout message above the launch button. When a user clicks the callout message, the chat window will be opened.
The details of the callout are contained in a div with class twc-callout.
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 response. A single engine response can result in multiple messages being added to the message list. For example, if a response from the engine contains an answer text and some buttons, this will result in two separate messages being added to 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. |
| Upload button | Optional button that can be made visible using the showUploadButton configuration setting or using the Show upload button api call. The button is contained in a div with class twc-user-input__button. When the upload button is disabled using the Disable upload button api, a class twc-disabled is added. The div contains a button element which in turn contains the upload icon SVG. The icon can be configured using the uploadIconUrl configuration setting or using the Set upload icon api call. Note that for the icon both plain URL's and data URL's are supported. |
| TTS button | Optional button that can be made visible using the showTtsButton configuration setting or using the Show tts button api call. The button is contained in a div with class twc-user-input__button. When the tts button is disabled using the Disable tts button api, a class twc-disabled is added. The div contains a button element which in turn contains the TTS icon SVG. The icon can be configured using the ttsIconUrl configuration setting or using the Set tts icon api call. Note that for the icon both plain URL's and data URL's are supported. If no callback has been registered for this event, once clicked, the button will have a twc-active class and it will remain active until the button is clicked again, reading out every message as it comes in. No class is added if a callback is registered. |
| ASR button | Optional button that can be made visible using the showAsrButton configuration setting or using the Show asr button api call. The button is contained in a div with class twc-user-input__button. When the asr button is disabled using the Disable asr button api, a class twc-disabled is added. The div contains a button element which in turn contains the upload icon SVG. The icon can be configured using the asrIconUrl configuration setting or using the Set asr icon api call. Note that for the icon both plain URL's and data URL's are supported. If no callback has been registered for this event, once clicked, the button will have a twc-active class and it will remain active until the voice recognition signals the end of the recording. No class is added if a callback is registered. |
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 here: 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.
| Style in button definition | 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 be 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 an 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 messages but show a spinner animation instead of text. Just like text messages, the alignment and look of the typing indicator depend 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.
Modal messages
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.
Image messages
Images added to the message history using an Image message can be enlarged by clicking on them (if an image_url is provided). When clicked, a div with id twc-lightbox is added below the input area. This div is semi-transparten and overlays the viewport. It contains a wrapper span which contains the image with the image_url wrapped in an href. When the image or the div is clicked, the div is removed.