CSS Customization

In order to enhance the visual design of the Webchat, there is the possibility to apply custom CSS. You will have to add the style to your embeded Webchat or just link a CSS file to it.

There are several classes that you need to take in consideration if you want to further customize the Webchat elements or message types. The classes are the following:

webchat-root
webchat
webchat-toggle-button
webchat-toggle-button-disabled
webchat-unread-message-badge
webchat-unread-message-preview-text
webchat-teaser-message-root
webchat-teaser-message-bubble
webchat-teaser-message-header
webchat-teaser-message-header-title
webchat-teaser-message-header-logo
webchat-teaser-message-header-close-button
webchat-teaser-message-action-buttons
webchat-teaser-message-button-container
webchat-teaser-message-button
webchat-header-bar
webchat-header-logo-name-container
webchat-header-logo
webchat-header-cognigy-logo
webchat-header-title
webchat-header-close-button
webchat-header-back-button
webchat-header-minimize-button
webchat-header-delete-all-conversations-button
webchat-chat-history
webchat-scroll-to-bottom-button
webchat-log-ai-agent-notice-text
webchat-queue-updates
webchat-chip-conversation-ended
webchat-input
webchat-input-message-container
webchat-input-message-label
webchat-input-text-active
webchat-input-stt-active
webchat-input-button-speech
webchat-input-button-speech-active
webchat-input-button-speech-background
webchat-input-menu-form
webchat-input-message-input
webchat-input-button-add-attachments
webchat-input-drag-and-drop-file-text
webchat-input-button-send
webchat-input-get-started-button
webchat-input-persistent-menu-button
webchat-input-persistent-menu
webchat-input-persistent-menu-item
webchat-input-persistent-menu-item-container
webchat-privacy-notice-root
webchat-privacy-notice-message
webchat-privacy-notice-markdown-container
webchat-privacy-notice-actions
webchat-privacy-notice-accept-button
webchat-privacy-policy-link
webchat-homescreen-root
webchat-homescreen-content
webchat-homescreen-header
webchat-homescreen-header-logo
webchat-homescreen-header-cognigy-logo
webchat-homescreen-close-button
webchat-homescreen-title
webchat-homescreen-buttons
webchat-homescreen-button-container
webchat-homescreen-button
webchat-homescreen-actions
webchat-homescreen-send-button
webchat-homescreen-previous-conversation-button
webchat-prev-conversations-root
webchat-prev-conversations-content
webchat-prev-conversations-item
webchat-prev-conversations-send-button
webchat-prev-conversations-actions
webchat-chat-options-root
webchat-chat-options-container
webchat-chat-options-action-btns-root
webchat-chat-options-action-btns-title
webchat-chat-options-action-btns-wrapper
webchat-chat-options-action-button-container
webchat-chat-options-action-button
webchat-rating-widget-root
webchat-rating-widget-title
webchat-rating-widget-content-container
webchat-rating-widget-thumbs-up-button
webchat-rating-widget-thumbs-down-button
webchat-rating-widget-comment-input-field-container
webchat-rating-widget-comment-input-field-label
webchat-rating-widget-comment-input-field
webchat-rating-widget-send-button
webchat-tts-option-root
webchat-chat-options-tts-option-label
webchat-chat-options-tts-option-toggle
webchat-chat-options-footer
webchat-chat-options-footer-link
webchat-chat-options-footer-link-text
webchat-delete-conversation-container
webchat-delete-conversation-title
webchat-delete-conversation-button
webchat-delete-confirmation-cancel-button
webchat-delete-confirmation-confirm-button
webchat-delete-conversation-text
webchat-delete-all-conversation-text
webchat-information-message-root
webchat-information-message-content
webchat-modal-root
webchat-modal-header
webchat-modal-title
webchat-modal-close-button
webchat-modal-close-icon
webchat-modal-divider-wrapper
webchat-modal-divider
webchat-modal-body
webchat-modal-footer
webchat-toggle-button-root
webchat-message-row
webchat-avatar
chat-bubble
webchat-chat-typing-indicator
webchat-quick-reply-template-root
webchat-quick-reply-template-replies-container
webchat-quick-reply-template-button
webchat-template-button-image
webchat-buttons-template-root
webchat-buttons-template-replies-container
webchat-buttons-template-button
webchat-carousel-template-root
webchat-carousel-template-frame
webchat-carousel-template-title
webchat-carousel-template-content
webchat-carousel-template-subtitle
webchat-carousel-template-button
webchat-media-template-image-container
webchat-media-template-image
webchat-media-template-video
webchat-media-template-audio
webchat-media-template-files-container
webchat-media-template-file
webchat-list-template-root
webchat-list-template-header
webchat-list-template-header-content
webchat-list-template-header-title
webchat-list-template-header-subtitle
webchat-list-template-header-button
webchat-list-template-element
webchat-list-template-element-title
webchat-list-template-element-subtitle
webchat-list-template-element-button
webchat-list-template-global-button
adaptivecard-wrapper
webchat-plugin-date-picker
webchat-plugin-date-picker-header
webchat-plugin-date-picker-content
webchat-plugin-date-picker-footer
webchat-plugin-date-picker-weekdays
flatpickr-day.selected

If you want to be sure that the custom CSS that you apply will be shown, you will have to add some other selectors to those classes, for the Webchat we will use the attribute selectors:

[data-cognigy-webchat-root] [data-cognigy-webchat] [data-cognigy-webchat-toggle]

This way we asure specificity of the classes in our script.

Webchat Elements Customization

Below are the examples for customizing the Webchat Widget. The code snippets illustrate the syntax and basic design changes—you can modify them as needed. Note that some nested components or properties may not take effect due to the Webchat widget’s structure. Always keep accessibility in mind, especially when adjusting colors, fonts, or backgrounds.

For examples of customizing messages of different types, see the Webchat Message Customization section below.

Webchat Container

webchat-root
This is the root
containingthe webchat, not much to customize here.

[data-cognigy-webchat-root].webchat-root {

}

webchat
This class is the main Webchat component that can be customized, you can add size like height or width in it.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat {
    width: 500px;
    height:500px;
}

Webchat Toggle

webchat-toggle-button
This is the button to open the Webchat. If you want to modify its background color you have to set the "background-image" to none.

[data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {
    background-image: none;
    background-color: rgb(5, 5, 131);
}

webchat-toggle-button-disabled
This is the disabled state of the button that opens the Webchat. If you want to modify its background color you have to set the "background-image" to none.

[data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button-disabled {
    background-image: none;
    background-color: rgba(170, 170, 170, 1);
}

Webchat Unread and Teaser Message

webchat-unread-message-badge
This is the unread message count which is diplayed next to the webchat-toggle-button, when the user retreived an unread message from Cognigy.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-unread-message-badge {
    background-color: 'white';
}

webchat-unread-message-preview-text
This is the text in the teaser message and unread message preview bubble. You can change the font, text color, or any other text properties.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-unread-message-preview-text {
    color: white;
    font-size: 0.875rem;
}

webchat-teaser-message-root
The root class for the teaser message, used for customizing the alingnment and position of the teaser message.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-root {
    padding: 10px;
    right: 10px;
    bottom: 75px;
}

webchat-teaser-message-root
The class for the teaser message, used for customizing the look of the teaser message bubble.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-bubble {
    width: 400px;
    background-color: red;
}

webchat-teaser-message-header
The header of the teaser message contining the logo, title and the close button.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-header {
    gap: 20px;
    margin: 10px;
}

webchat-teaser-message-header-title
The title of the teaser message displayed at the top of the teaser message bubble.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-header-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: rgb(5, 5, 131);
}

webchat-teaser-message-header-logo
The logo displayed in the header of the teaser message.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-header-logo {
    border: 2px solid rgb(5, 5, 131);
}

webchat-teaser-message-header-close-button
The close button displayed in the header of the teaser message.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-header .webchat-teaser-message-header-close-button {
    border: 2px solid rgb(5, 5, 131);
}

webchat-teaser-message-action-buttons
This class that is used to adjust the position and alignment of the postback buttons displayed in the teaser message.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-action-buttons {
    border: 2px solid rgb(232 232 245);
    margin: auto;
    padding: 20px;
    border-radius: 15px;
}

webchat-teaser-message-button-container
This container holds the button(s) displayed in the teaser message. You can adjust the layout and spacing.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-button-container {
    justify-content: space-between;
    padding-top: 10px;
}

webchat-teaser-message-button
This is the button that is displayed below the teaser message bubble and inside webchat-teaser-message-button-container.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-button {
    background-color: rgb(5, 5, 131);
    color: white;
}

Webchat Header Elements

webchat-header-bar
The header bar of the Webchat, here you can change color, it also contains other components like the header logo and header title.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar {

    background: rgb(5, 5, 131);
}

webchat-header-logo-name-container
The container for the header logo and title, you can modify the spacing and alignment between them.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-logo-name-container {
    gap: 25px;
}

webchat-header-logo
The custom logo shown in the webchat header of chat log screen. You can customize, for example, its size and border properties.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-logo-name-container .webchat-header-logo {
    width: 32px;
    height: 32px;
    border: 2px solid red;
}

webchat-header-cognigy-logo
The default Cognigy logo shown in the webchat header of chat log screen, when no custom logo URL is provided. You can customize, for example, its size and border properties.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-logo-name-container .webchat-header-cognigy-logo {
    width: 32px;
    height: 32px;
    border: 2px solid red;
}

The default Cognigy logo shown in the conversation list items of previous conversation screen, when no custom logo URL is provided. You can customize, for example, its size and border properties.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-prev-conversations-item .webchat-header-cognigy-logo{
    width: 32px;
    height: 32px;
    margin-left: 12px;
    border: 2px solid red;
}

webchat-header-title
The text that is in the header, you can modify the font as you wish.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-title {
    font-size: 1.25rem;
}

webchat-header-close-button
The close button shown in the webchat header bar and in the connection lost overlay dialog. You can customize its appearance, size, and hover effects, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-close-button {
    background-color: red;
    padding: 8px;
    border-radius: 4px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-close-button svg {
    width: 20px;
    height: 20px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-close-button svg path {
    fill: black
}

webchat-header-back-button
The back button shown in the webchat header. You can customize its appearance, size, and icon color, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-back-button {
    background-color: red;
    border-radius: 4px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-back-button svg path {
    width: 20px;
    height: 20px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-back-button svg path {
    fill: black;
}

webchat-header-minimize-button
The minimize button shown in the webchat header. You can customize its appearance, size, and icon color.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-minimize-button {
    background-color: red;
    border-radius: 4px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-minimize-button svg {
    width: 20px;
    height: 20px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-minimize-button svg path {
    fill: black;
}

webchat-header-delete-all-conversations-button
The icon button to delete all conversations in the previous conversations header.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-delete-all-conversations-button {
    background-color: red;
    border: 2px solid #666;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-delete-all-conversations-button svg path{
    fill: black;
}

Chat Log

webchat-chat-history
This is the element where all the messages of the chat are are shown, you could change its color for example.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-chat-history {

    background-color: rgb(48, 48, 48);
}

webchat-scroll-to-bottom-button
The button that appears when scrolled up in chat history to scroll to bottom. You can customize its appearance, position, and hover effects.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-scroll-to-bottom-button {
    background-color: red;
    color: white;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
}

webchat-log-ai-agent-notice-text
The notice text shown at the top of the chat log to indicate the user that they are chatiing with AI Agent. You can style its font, color, and background.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-log-ai-agent-notice-text {
    background: #eaf6ff;
    color: #0055ff;
    font-size: 1rem;
}

webchat-queue-updates
The queue updates message shown when the chat is in queue mode. You can style its background, color, spacing, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-queue-updates {
    background: #fffced;
    color: #6b5000;
    border: 1px solid #ffc400;
    border-radius: 8px;
}

webchat-chip-conversation-ended
The chip shown when the conversation has ended. You can style its background, color, and border. Please note that you need to include the div in the selector to adjust the chip styles.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chip-conversation-ended div {
    background: #e0e0e0;
    color: #666;
    font-size: 0.95rem;
    padding: 10px;
}

Webchat Input Fields

webchat-input
The input at the footer of the Webchat, it contains some other components like the text input, menu and buttons. Careful to modify the height here since it will influence the input menu

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input {
   background: rgb(5, 5, 131);
}

webchat-input-message-container
The container for the message input and its label.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-message-container {
    background: #f8f8f8;
    padding: 8px 0;
    border-radius: 8px;
}

webchat-input-message-label
The floating label for the message input.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-message-label {
    color:rgb(209, 22, 22);
    font-style: italic;
    font-size: 14px;
}

webchat-input-menu-form
The form that will take care of submit the message, you can modify the borders for example.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-menu-form {

    border-bottom-color: rgb(5, 5, 131);
}

webchat-input-message-input
The text input where you can write your messages, you can change how the font looks like.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-message-input {

   color: white;
}

webchat-input-button-add-attachments
The button to open the file attachment section, you can not change the icon but you can customize the position, size and background.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-add-attachments {

    border-radius: 20px;
    background-color: white;
}

webchat-input-drag-and-drop-file-text
The text for drag and drop file upload, you can modify the font.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-drag-and-drop-file-text {
    color: white;
}

webchat-input-button-send
The button to send the message, you can not change the icon but you can customize the position, size and background.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-send {

    border-radius: 20px;
    background-color: white;

}

webchat-input-get-started-button
The button to initiate the first interaction in the Webchat. You can customize its appearance, size, and background.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-get-started-button {

    border-radius: 10px;
    background-color: rgb(0, 123, 255);
}

webchat-input-text-active
The complete input area at the bottom of the webchat when text input is focused.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input.webchat-input-text-active {
    border-bottom: 2px solid #0055ff;
    background-color: #f5faff;
}

webchat-input-stt-active
The complete input area at the bottom of the webchat when when speech-to-text is active.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input.webchat-input-stt-active {
    background-color: #eaf6ff;
    border-bottom: 2px solid #00cc66;
}

webchat-input-button-speech
The speech-to-text button in the input area. You can style its color or icon.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-speech {
    background-color: #cfcfcf;
    border-radius: 50%;
    border: 2px solid black;
}

webchat-input-button-speech-active
The speech-to-text button when active.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-speech-active {
    box-shadow: 0 0 8px #00cc66;
    border-radius: 50%
}

webchat-input-button-speech-background
The animating background for the speech-to-text button, when it is active.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-speech-background {
    background-color: #41cc00;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

Persistent Menu

webchat-input-persistent-menu-button
This class is used to style the persistent menu icon. You can customize the size, color, and background.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu-button {
    background-color: #ffffff;
    color: #000000;
    font-size: 16px;
}

webchat-input-persistent-menu
This class is used to style the persistent menu container, which includes the title and menu items. You can adjust the layout, background color, and padding.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

webchat-input-persistent-menu-item
This class is used to style individual items in the persistent menu. You can customize the background color, font, and padding.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu-item {
    background-color: #f0f0f0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

webchat-input-persistent-menu-item-container
This class is used to style the container that holds the persistent menu items. You can adjust the layout, spacing, and border.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu-item-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    margin: 5px;
}

Privacy Notice

webchat-privacy-notice-root
The root container for the privacy screen of the webchat.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-root {
    border-radius: 20px;
    border: 2px solid rgb(5, 5, 131);
    padding: 20px;
}

webchat-privacy-notice-message
The root container for the privacy text content.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-message {
    background-color: rgb(227, 227, 251);
}

webchat-privacy-notice-markdown-container
The markdown container of the privacy text content.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-markdown-container > p {
    color: rgb(227, 227, 251);
}

To change the font-family of the privacy notice text, you need to target the p tag inside webchat-privacy-notice-message like the following

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-message p {
  font-family: Arial, Helvetica, sans-serif;
}

webchat-privacy-notice-actions
The container for the action items of the privacy screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-actions {
    background-color: rgb(227, 227, 251);
    padding: 20px;
}

webchat-privacy-notice-accept-button
The privacy submit button in the privacy screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-accept-button {
    background-color: rgb(5, 5, 131);
}

webchat-privacy-policy-link The privacy policy link in the privacy screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-policy-link {
   color: rgb(227, 227, 251);
}

To change the font-family of the privacy policy link text, you need to target the p tag inside webchat-privacy-policy-link like the following

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-policy-link p {
  font-family: Arial, Helvetica, sans-serif;
}

Home Screen

webchat-homescreen-root
The root container for the homescreen of the webchat.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-root {
    border-radius: 20px;
    border: 2px solid rgb(5, 5, 131);
    padding: 20px;
}

webchat-homescreen-content
This is the main content area of the homescreen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content {
    background-color: black;
}

webchat-homescreen-header
The header section of the homescreen, containing the logo and close button.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-header {
    margin: 10px;
}

webchat-homescreen-header-logo
The logo shown in the homescreen header when a custom logo URL is provided. You can customize its size, border, and background, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content .webchat-homescreen-header-logo {
    width: 40px;
    height: 40px;
    border: 2px solid #0055ff;
    background-color: #f5faff;
}

webchat-homescreen-header-cognigy-logo
The default Cognigy logo shown in the homescreen header when no custom logo URL is provided.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content .webchat-homescreen-header-cognigy-logo {
    width: 40px;
    height: 40px;
    border: 2px solid #41cc00;
    background-color: #f8f8f8;
}

webchat-homescreen-buttons
The container for conversation starter buttons on the homescreen. You can adjust spacing, layout, position, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content .webchat-homescreen-buttons {
    margin-top: 24px;
    padding: 16px;
}

webchat-homescreen-close-button
The close button in the homescreen header.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-close-button {
    border: 2px solid white !important;
    padding: 10px !important;
}

webchat-homescreen-title
The title displayed on the homescreen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-title {
    font-size: 24px;
    color: red !important;
}

webchat-homescreen-button-container
The container for the conversation starter buttons on the homescreen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-button-container {
    padding: 10px;
}

webchat-homescreen-button
Individual buttons on the homescreen (like for starting a new conversation).

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-button {
    background-color: rgb(5, 5, 131) !important;
    color: black;
    border-radius: 5px;
}

To change the font-family of the homescreen starter button labels, you need to target the span tag inside webchat-homescreen-button like the following

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-button span {
  font-family: Arial, Helvetica, sans-serif;
}

webchat-homescreen-actions
The container for any actions on the homescreen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-actions {
    margin-top: 15px;
}

webchat-homescreen-send-button
The button to send a new message from the homescreen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-send-button {
    background-color: rgb(5, 5, 131) !important;
    color: white;
}

webchat-homescreen-previous-conversation-button
The button to view previous conversations from the homescreen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-previous-conversation-button {
    background-color: rgb(5, 5, 131) !important;
}

Previous Conversation Screen

webchat-prev-conversations-root
The root container for the previous conversations screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-root {
    padding: 20px;
}

webchat-prev-conversations-content
The container for the list of previous conversations.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-content {
    padding: 0px;
}

webchat-prev-conversations-item
An individual item in the previous conversations list.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-item {
    background-color: rgb(5, 5, 131);
}

webchat-prev-conversations-send-button
The button to start a new conversation from the Previous conversations screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-send-button {
    background-color: rgb(5, 5, 131) !important;
}

webchat-prev-conversations-actions
The container for actions at the bottom of the previous conversations screen. You can adjust its background, padding, and layout.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-actions {
    background: #f5faff;
    border-top: 2px solid red;
}

Chat Options Screen

webchat-chat-options-root
The root container for the chat options.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-root {
    padding: 20px;
}

webchat-chat-options-container
The container that holds all chat options.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-container {
    border: 2px solid rgb(5, 5, 131);
}

Chat Options Postback section

webchat-chat-options-action-btns-root
The container for quick reply buttons and its title inside the chat options screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-btns-root {
    justify-content: space-between;
    padding: 10px;
}

webchat-chat-options-action-button-container
The container for the set of quick reply buttons in the chat options screen

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-button-container {
    justify-content: space-around;
    padding: 10px;
}

webchat-chat-options-action-btns-title
The title for the quick reply buttons in the chat options screen

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-btns-title {
    font-size: 1.125rem;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(5, 5, 131);
}

webchat-chat-options-action-btns-wrapper
The wrapper for the postback buttons in the chat options screen. You can adjust layout, spacing, background, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-btns-wrapper {
    background: #f5faff;
    padding: 12px;
    border-radius: 8px;
}

webchat-chat-options-action-button
An individual quick reply button in the chat options screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-button {
    background-color: rgb(5, 5, 131) !important;
    color: white;
}

Rating Widget

Please note that this rating widget is used in rating section of the Chat Options screen and also in the rating screen that displays as a result of Request Rating Flow Node

webchat-rating-widget-root
The root container for the rating widget that includes the rating title, thumbs up/down button, text area and submit button.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-root {
    padding: 20px;
}

webchat-rating-widget-title
The title of the rating widget.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-title {
    font-size: 1.25rem;
    color: rgb(5, 5, 131);
}

webchat-rating-widget-content-container
The container for the rating widget's thumbs up/down buttons.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-content-container {
    justify-content: space-between;
    padding: 10px;
}

webchat-rating-widget-thumbs-up-button
The thumbs-up button for the rating widget.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-thumbs-up-button {
    background-color: #00cc66 !important;
}

webchat-rating-widget-thumbs-down-button
The thumbs-down button for the rating widget.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-thumbs-down-button {
    background-color: #cc0000 !important;
}

webchat-rating-widget-comment-input-field-container
The container for comments input field with label in the rating widget.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-comment-input-field-container {
  background: #cc0000;
}

webchat-rating-widget-comment-input-field-label
The label for comments input field in the rating widget.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-comment-input-field-label {
    font-size: 1.25rem;
}

webchat-rating-widget-comment-input-field
The input field for comments in the rating widget.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-comment-input-field {
    font-family: Arial, Helvetica, sans-serif !important;
}

webchat-rating-widget-send-button
The button to send the rating/comment.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-send-button {
    background-color: rgb(5, 5, 131) !important;
}

Chat Options TTS section

webchat-tts-option-root
The container for the Text-to-Speech toggle option in chat options. You can adjust its layout, background, spacing, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-tts-option-root {
    background: #f5faff;
    padding: 12px 20px;
    border-radius: 8px;
}

webchat-chat-options-tts-option-label
The label for the TTS toggle option. You can style its font, color, spacing, etc.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-tts-option-label {
    font-size: 1rem;
    color: #0055ff;
    font-weight: bold;
    margin-right: 12px;
}

webchat-chat-options-tts-option-toggle
The toggle button for TTS option. You can style its size, color, and border.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-tts-option-toggle {
    width: 40px;
    height: 24px;
    background: #eaf6ff;
    border: 2px solid #0055ff;
}

Chat Options Footer

webchat-chat-options-footer
The footer container for the chat options screen. You can style its background, padding, and border.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-footer {
    background: #f5faff;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

webchat-chat-options-footer-link
The link displayed at the footer of the chat options screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-footer-link {
    text-decoration: underline;
    padding: 10px;
}

webchat-chat-options-footer-link-text
The text for the footer link in chat options screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-footer-link-text {
    font-size: 0.875rem;
    font-family: Arial, Helvetica, sans-serif;
}

Delete Conversations Modal

webchat-delete-conversation-container
The container for delete conversation in chat options screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-delete-conversation-container {
    padding: 20px;
    text-align: center;
}

webchat-delete-conversation-title
The title of delete conversation setting in chat options screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-delete-conversation-title {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

webchat-delete-conversation-button
The delete button style inside the chat options screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-delete-conversation-button {
    padding: 8px 16px;
    margin: 5px;
    border-radius: 4px;
}

webchat-delete-confirmation-cancel-button
The cancel button in delete confirmation dialog.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-delete-confirmation-cancel-button {
    background-color: #f5f5f5;
    color: #333;
}

webchat-delete-confirmation-confirm-button
The confirm button in delete confirmation dialog.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-delete-confirmation-confirm-button {
    background-color: #dc3545;
    color: white;
}

webchat-delete-conversation-text
The warning text in delete conversation dialog.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-delete-conversation-text {
    color: #666;
    margin: 10px 0;
}

webchat-delete-all-conversation-text
The warning text for deleting all conversations in delete dialog.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-delete-all-conversation-text {
    color: #dc3545;
    font-weight: bold;
}

Maintenance Mode Screen

webchat-information-message-root The information message container when the webchat is in maintenance mode. You can adjust the position background

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-information-message-root {
    background-color: #c5c5c5;
    align-items: flex-start;
}

webchat-information-message-content The information message text and icon container when the webchat is in maintenance mode. You can adjust the alignment of the maintenance icon and text, for example

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-information-message-container {
    flex-direction: row;
    gap: 30px;
}

Generic Modal

webchat-modal-root
The root container for all modals. You can customize the overall appearance of modal windows.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-root {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}

webchat-modal-header
The header section of all modal windows.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-header {
    background-color: #f5f5f5;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

webchat-modal-title
The title text in modal headers.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-title {
    font-size: 1.125rem;
    color: #333;
    font-weight: bold;
}

webchat-modal-close-button
The close button in modal headers.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-close-button {
    background-color: transparent;
    border: none;
    color: #666;
}

webchat-modal-close-icon
The icon within the modal close button.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-close-icon {
    font-size: 20px;
    color: #666;
}

webchat-modal-divider-wrapper
The wrapper for modal dividers.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-divider-wrapper {
    padding: 10px 0;
}

webchat-modal-divider
The divider line in modals.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-divider {
    border-top: 1px solid #ddd;
}

webchat-modal-body
The main content area of modals.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-body {
    padding: 15px;
    background-color: white;
}

webchat-modal-footer
The footer section of modals.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-footer {
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
}

Generic Toggle Field

webchat-toggle-button-root
The root of the reusable toggle switch field in the Webchat screens. (Example, the toggle switch of 'Enable TTS' field in chat-options screen)

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-toggle-button-root {
    background-color: #000000;
    height: 25px;
    width: 50px;
}

webchat-toggle-button-inner-circle The inner circle of the reusable toggle switch fields in the Webchat screens.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-toggle-button-inner-circle {
   background-color: aliceblue;
    width: 15px;
    height: 15px;
    margin: 3px;
}

Webchat Message Customization

Our Webchat includes built-in message templates such as Quick Replies, Galleries, Media, and Lists, etc. These elements can also be customized further to better match your design guidelines. Below are examples of the classes you can use to modify them.

Generic Message Styling

The classes 'bot', 'user' and 'agent' are used as helper classes that give us the possibility to customize the messages from the different sources distinctly.

webchat-message-row
The message container in the chat log, regardless of the source, that includes both the message header (logo, timestamp, source name) and the message bubble.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row {
    padding: 12px;
    background-color: #e8e8e8;
    border-radius: 10px;
}

webchat-message-row + bot
The container in the chat log for bot messages, that includes both the message header (logo, timestamp, source name) and the message bubble.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.bot {
    padding: 12px;
    background-color: #e8e8e8;
    border-radius: 10px;
}

webchat-message-row + user
The container in the chat log for user messages, that includes both the message header (logo, timestamp, source name) and the message bubble.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.user {
    padding: 12px;
    background-color: #a5a5a5;
    border-radius: 10px;
}

webchat-message-row + agent
The container in the chat log for agent messages, that includes both the message header (logo, timestamp, source name) and the message bubble.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.agent {
    padding: 12px;
    background-color: #c2c2c2ff;
    border-radius: 10px;
}

webchat-avatar
The avatar that appears in the messahe header for incoming messages.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-avatar {
    width: 35px;
    height: 35px;
    border: 2px solid green;
}

webchat-avatar + bot
The avatar that appears in the messahe header for only incoming bot messages.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-avatar.bot {
    width: 35px;
    height: 35px;
    border: 2px solid black;
}

webchat-avatar + agent
The avatar that appears in the message header for only incoming agent messages.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-avatar.agent {
    width: 35px;
    height: 35px;
    border: 2px solid red;
}

chat-bubble The text bubbles for messages of type or Text or Quick Reply or similar, regardless of the source.

 [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row .chat-bubble {
    background-color: red;
    width: 500px;
}

chat-bubble + user The text bubbles for user messages.

 [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.user .chat-bubble {
    background-color: red;
    width: 500px;
    font-size: 1rem;
}

chat-bubble + bot The text bubbles for messages of type or Text or Quick Reply or similar from the bot.

 [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.bot .chat-bubble {
    background-color: red;
    width: 500px;
}

chat-bubble + agent The text bubbles for messages of type or Text or Quick Reply or similar from an agent.

 [data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.agent .chat-bubble {
    background-color: red;
    width: 500px;
}

webchat-chat-typing-indicator
The typing indicator bubble for incoming messages. you can change the background color, for example.

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-typing-indicator {
    background: rgb(5, 5, 131);
}

Quick Replies

webchat-quick-reply-template-root
This class contains the whole Quick Reply element, including the text bubble and the action buttons.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-root {
    width: 500px;
    height: 500px;
}

To customize the chat bubble of only the quick reply messages, use the chat-bubble selector like below

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-root .chat-bubble {
    background-color: red;
    font-size: 2rem;
}

webchat-quick-reply-template-replies-container
This is the element holding all Quick Replie buttons. You can change the way they are shown, e.g. as a column.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-replies-container {
  display: flex;
  flex-direction: column;
}

webchat-quick-reply-template-button
This is the style of the Quick Reply button element, all of them will be modified.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-replies-container .webchat-quick-reply-template-button {
    color: black;
    background-color: white;
    border: 2px solid black;
}

webchat-template-button-image
This class modifies the style of the images inside the quick reply buttons. The default border-top-left-radius and border-bottom-left-radius of the images inside the button is 19px. You can override that with the help of this class.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-replies-container .webchat-template-button-image {
    background-color: black;
    border-radius: 10px;
}

Text with Buttons

webchat-buttons-template-root
The container for the message of type Text with Buttons.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-buttons-template-root {
    width: 500px;
    height: 500px;
}

To customize the chat bubble of only the Text with Buttons messages, use the chat-bubble selector like below

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-buttons-template-root .chat-bubble {
    background-color: red;
    font-size: 2rem;
}

webchat-buttons-template-replies-container
The class to customize the list of buttons in the Text with Buttons message. You can change the way they are displayed, e.g. as a column.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-buttons-template-replies-container {
    display: flex;
    flex-direction: column;
}

webchat-buttons-template-button
The class of a single button inside Text With Buttons action list. The styling will take effect for all buttons in all Text with Buttons action list.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-buttons-template-root .webchat-buttons-template-button {
    background-color: #fffffe;
    color: #2d334a;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-buttons-template-root .webchat-buttons-template-button:hover {
    outline: 2px solid black;
}

Gallery

webchat-carousel-template-root
The container of the Gallery message content. Here you can adjust its padding, for example.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-root {
  padding: 20px;
}

webchat-carousel-template-frame The individual card inside the Gallery message.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-frame {
  width: 200px;
}

webchat-carousel-template-title
The title of the card in the Gallery message.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-title {
    color: blue;
    top: 10px;
}

webchat-carousel-template-content
The content of the card below the image in a card.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-content {
    background: #e3f6f5;
    height: 200px;
}

webchat-carousel-template-subtitle
The text content of the card, below the gallery image.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-subtitle {
  color:white;
}

webchat-carousel-template-button
The Button at the bottom of the card, containing a URL.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-button {
  color: #272343;
  background: #ffd803;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-button:hover {
  background: #cfb000;
}

Media

webchat-media-template
The media element can be of three forms: Image, Video or Audio. You can modify its container or put some animations on it

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-image-container {
  padding: 20px;
    border: 1px solid black;
    border-radius: 10px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-image {
  border-radius: 0;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-video > div {
  border-radius: 5px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-audio > div{
  border: 1px solid red;
  border-radius: 20%;
}

File Attachments

webchat-media-template
Add styles for the container containing group of file attachments

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-files-container {
  padding: 20px;
  border: 1px solid black;
  border-radius: 10px;
}

webchat-media-template-file Add styles for individual file attachment in the message

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-file {
  background-color: white;
  font-size: 1rem;
}

List

webchat-list-template-root
The container element of the List, you can remove the border-radius or background, for example.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-root {
  border-radius: 0;
}

webchat-list-template-header
This is the header element, which is above all other componets of the list.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header {
  heigth: 200px;
}

webchat-list-template-header-content
The content of the header, here you can center all elements for example.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-content {
  text-align: center;
}

webchat-list-template-header-title
The title of the header element.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-title {
  color: green;
}

webchat-list-template-header-subtitle
The subtitle of the header element.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-subtitle {
  color: green;
}

webchat-list-template-header-button
This is the button inside the header, it can look better if you add some hovering effects.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-button {
  background: #ffd803;
  color: #272343;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-button:hover {
  background: #cfb000;
}

webchat-list-template-element
The element that contains a single list element

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element {
  background: #e3f6f5;
}

webchat-list-template-element-title
The title of every list element.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element-title {
  color: yellow;
}

webchat-list-template-element-subtitle
The subtitle of every list element.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element-subtitle {
  color: yellow;
}

webchat-list-template-element-button
This is the button inside every list element, adding some hovering effects or animation can make it look better.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element-button {
  border-color: #ffd803;
  background-color: #fffffe;
  color: #272343;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element-button:hover {
  background-color: #cfb00071;
}

webchat-list-template-global-button
This is the global button of the list template,you could change, for example, its background color and also add custom hover effects.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-global-button {
  background-color: #cfb00071;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-global-button:hover {
  background-color: #39801071;
}

Adaptive Cards

adaptivecard-wrapper The container element of Adaptive Card message. You can customize the width, for example.

[data-cognigy-webchat-root] [data-cognigy-webchat] .adaptivecard-wrapper {
  width: 300px;
}

Date Picker

webchat-plugin-date-picker
The container element of the Date picker screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker {
    background-color: #d3d3d3;
}

webchat-plugin-date-picker-header
The header of the Date picker screen.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker-header {
    background-color: linear-gradient(185deg,#36b96e,#2c6caf);
}

webchat-plugin-date-picker-content
The content container element of the Date picker screen, below the header.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker-content {
    box-shadow: 0 0 70px #ff99d7 inset;
}

webchat-plugin-date-picker-footer
The footer element of the Date picker plugin, give it a custom look with padding.

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker-footer {
  padding: 1em 3em;
}

webchat-plugin-date-picker-weekdays
The Weekdays of the calendar can be customized with e.g. uppercase labels.

[data-cognigy-webchat-root] [data-cognigy-webchat] .flatpickr-weekday {
  text-transform: uppercase;
}

webchat-plugin-date-picker-footer
The look and feel of the selected date can be changed.

[data-cognigy-webchat-root] [data-cognigy-webchat] .flatpickr-day.selected {
  background: #28c8ef;
  color: hsla(0, 0%, 100%, 0.95);
  font-weight: bold;
  font-size: 1.375rem;
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS Customization

Webchat Elements Customization

Webchat Container

Webchat Toggle

Webchat Unread and Teaser Message

Webchat Header Elements

Chat Log

Webchat Input Fields

Persistent Menu

Privacy Notice

Home Screen

Previous Conversation Screen

Chat Options Screen

Chat Options Postback section

Rating Widget

Chat Options TTS section

Chat Options Footer

Delete Conversations Modal

Maintenance Mode Screen

Generic Modal

Generic Toggle Field

Webchat Message Customization

Generic Message Styling

Quick Replies

Text with Buttons

Gallery

Media

File Attachments

List

Adaptive Cards

Date Picker

FilesExpand file tree

css-customization.md

Latest commit

History

css-customization.md

File metadata and controls

CSS Customization

Webchat Elements Customization

Webchat Container

Webchat Toggle

Webchat Unread and Teaser Message

Webchat Header Elements

Chat Log

Webchat Input Fields

Persistent Menu

Privacy Notice

Home Screen

Previous Conversation Screen

Chat Options Screen

Chat Options Postback section

Rating Widget

Chat Options TTS section

Chat Options Footer

Delete Conversations Modal

Maintenance Mode Screen

Generic Modal

Generic Toggle Field

Webchat Message Customization

Generic Message Styling

Quick Replies

Text with Buttons

Gallery

Media

File Attachments

List

Adaptive Cards

Date Picker