diff --git a/docs/css-customization.md b/docs/css-customization.md index 60cfb312..26941653 100644 --- a/docs/css-customization.md +++ b/docs/css-customization.md @@ -376,7 +376,7 @@ The persistent input menu items, where you can modify it borders, and fonts for } ``` -* *webchat-toggle-button* +* *webchat-toggle-button* This is the button to open the Webchat, if you want to modify its color you have to set the "background-image" to none. ```CSS [data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button { @@ -386,7 +386,7 @@ This is the button to open the Webchat, if you want to modify its color you have } ``` -* *webchat-unread-message-preview* +* *webchat-unread-message-preview* This is the message bubble which is diplayed next to the *webchat-toggle-button*, when the user retreived an unread message from Cognigy. ```CSS .webchat-unread-message-preview { @@ -394,7 +394,7 @@ This is the message bubble which is diplayed next to the *webchat-toggle-button* } ``` -* *webchat-unread-message-badge* +* *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. ```CSS [data-cognigy-webchat-root] .webchat-unread-message-badge { @@ -402,7 +402,7 @@ This is the unread message count which is diplayed next to the *webchat-toggle-b } ``` -* *webchat-unread-message-preview-text* +* *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. ```CSS [data-cognigy-webchat-root] .webchat-unread-message-preview-text { @@ -411,7 +411,7 @@ This is the text in the teaser message and unread message preview bubble. You ca } ``` -* *webchat-teaser-message-root* +* *webchat-teaser-message-root* The root class for the teaser message, used for customizing the overall look of the teaser message box. ```CSS [data-cognigy-webchat-root] .webchat-teaser-message-root { @@ -420,7 +420,7 @@ The root class for the teaser message, used for customizing the overall look of } ``` -* *webchat-teaser-message-header-title* +* *webchat-teaser-message-header-title* The title of the teaser message displayed at the top of the teaser message bubble. ```CSS [data-cognigy-webchat-root] .webchat-teaser-message-header-title { @@ -430,7 +430,7 @@ The title of the teaser message displayed at the top of the teaser message bubbl } ``` -* *webchat-teaser-message-header-logo* +* *webchat-teaser-message-header-logo* The logo displayed in the header of the teaser message. You can replace the logo image URL. ```CSS [data-cognigy-webchat-root] .webchat-teaser-message-header-logo { @@ -438,7 +438,7 @@ The logo displayed in the header of the teaser message. You can replace the logo } ``` -* *webchat-teaser-message-button-container* +* *webchat-teaser-message-button-container* This container holds the button(s) displayed in the teaser message. You can adjust the layout and spacing. ```CSS [data-cognigy-webchat-root] .webchat-teaser-message-button-container { @@ -447,7 +447,7 @@ This container holds the button(s) displayed in the teaser message. You can adju } ``` -* *webchat-teaser-message-button* +* *webchat-teaser-message-button* This is the button that is displayed below the teaser message bubble and inside *webchat-teaser-message-button-container*. ```CSS [data-cognigy-webchat-root] .webchat-teaser-message-button { @@ -456,8 +456,8 @@ This is the button that is displayed below the teaser message bubble and inside } ``` -* *webchat-homescreen-root* -The root container for the homescreen of the webchat. +* *webchat-homescreen-root* +The root container for the homescreen of the webchat. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-root { border-radius: 20px; @@ -466,7 +466,7 @@ The root container for the homescreen of the webchat. } ``` -* *webchat-homescreen-content* +* *webchat-homescreen-content* This is the main content area of the homescreen. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-content { @@ -474,7 +474,7 @@ This is the main content area of the homescreen. } ``` -* *webchat-homescreen-header* +* *webchat-homescreen-header* The header section of the homescreen, containing the logo and close button. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-header { @@ -482,7 +482,7 @@ The header section of the homescreen, containing the logo and close button. } ``` -* *webchat-homescreen-close-button* +* *webchat-homescreen-close-button* The close button in the homescreen header. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-close-button { @@ -491,7 +491,7 @@ The close button in the homescreen header. } ``` -* *webchat-homescreen-title* +* *webchat-homescreen-title* The title displayed on the homescreen. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-title { @@ -500,7 +500,7 @@ The title displayed on the homescreen. } ``` -* *webchat-homescreen-button-container* +* *webchat-homescreen-button-container* The container for the conversation starter buttons on the homescreen. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-button-container { @@ -508,7 +508,7 @@ The container for the conversation starter buttons on the homescreen. } ``` -* *webchat-homescreen-button* +* *webchat-homescreen-button* Individual buttons on the homescreen (like for starting a new conversation). ```CSS [data-cognigy-webchat-root] .webchat-homescreen-button { @@ -525,7 +525,7 @@ To change the font-family of the homescreen starter button labels, you need to t } ``` -* *webchat-homescreen-actions* +* *webchat-homescreen-actions* The container for any actions on the homescreen. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-actions { @@ -533,7 +533,7 @@ The container for any actions on the homescreen. } ``` -* *webchat-homescreen-send-button* +* *webchat-homescreen-send-button* The button to send a new message from the homescreen. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-send-button { @@ -542,7 +542,7 @@ The button to send a new message from the homescreen. } ``` -* *webchat-homescreen-previous-conversation-button* +* *webchat-homescreen-previous-conversation-button* The button to view previous conversations from the homescreen. ```CSS [data-cognigy-webchat-root] .webchat-homescreen-previous-conversation-button { @@ -550,7 +550,7 @@ The button to view previous conversations from the homescreen. } ``` -* *webchat-prev-conversations-root* +* *webchat-prev-conversations-root* The root container for the previous conversations screen. ```CSS [data-cognigy-webchat-root] .webchat-prev-conversations-root { @@ -558,7 +558,7 @@ The root container for the previous conversations screen. } ``` -* *webchat-prev-conversations-content* +* *webchat-prev-conversations-content* The container for the list of previous conversations. ```CSS [data-cognigy-webchat-root] .webchat-prev-conversations-content { @@ -566,7 +566,7 @@ The container for the list of previous conversations. } ``` -* *webchat-prev-conversations-item* +* *webchat-prev-conversations-item* An individual item in the previous conversations list. ```CSS [data-cognigy-webchat-root] .webchat-prev-conversations-item { @@ -574,7 +574,7 @@ An individual item in the previous conversations list. } ``` -* *webchat-prev-conversations-send-button* +* *webchat-prev-conversations-send-button* The button to start a new conversation from the Previous conversations screen. ```CSS [data-cognigy-webchat-root] .webchat-prev-conversations-send-button { @@ -582,7 +582,7 @@ The button to start a new conversation from the Previous conversations screen. } ``` -* *webchat-chat-options-root* +* *webchat-chat-options-root* The root container for the chat options. ```CSS [data-cognigy-webchat-root] .webchat-chat-options-root { @@ -590,7 +590,7 @@ The root container for the chat options. } ``` -* *webchat-chat-options-container* +* *webchat-chat-options-container* The container that holds all chat options. ```CSS [data-cognigy-webchat-root] .webchat-chat-options-container { @@ -598,7 +598,7 @@ The container that holds all chat options. } ``` -* *webchat-chat-options-action-btns-root* +* *webchat-chat-options-action-btns-root* The container for quick reply buttons and its title inside the chat options screen. ```CSS [data-cognigy-webchat-root] .webchat-chat-options-action-btns-root { @@ -607,7 +607,7 @@ The container for quick reply buttons and its title inside the chat options scr } ``` -* *webchat-chat-options-action-button-container* +* *webchat-chat-options-action-button-container* The container for the set of quick reply buttons in the chat options screen ```CSS [data-cognigy-webchat-root] .webchat-chat-options-action-button-container { @@ -616,7 +616,7 @@ The container for the set of quick reply buttons in the chat options screen } ``` -* *webchat-chat-options-action-btns-title* +* *webchat-chat-options-action-btns-title* The title for the quick reply buttons in the chat options screen ```CSS [data-cognigy-webchat-root] .webchat-chat-options-action-btns-title { @@ -626,7 +626,7 @@ The title for the quick reply buttons in the chat options screen } ``` -* *webchat-chat-options-action-button* +* *webchat-chat-options-action-button* An individual quick reply button in the chat options screen. ```CSS [data-cognigy-webchat-root] .webchat-chat-options-action-button { @@ -635,7 +635,7 @@ An individual quick reply button in the chat options screen. } ``` -* *webchat-rating-widget-root* +* *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. ```CSS [data-cognigy-webchat-root] .webchat-rating-widget-root { @@ -643,7 +643,7 @@ The root container for the rating widget that includes the rating title, thumbs } ``` -* *webchat-rating-widget-title* +* *webchat-rating-widget-title* The title of the rating widget. ```CSS [data-cognigy-webchat-root] .webchat-rating-widget-title { @@ -652,7 +652,7 @@ The title of the rating widget. } ``` -* *webchat-rating-widget-content-container* +* *webchat-rating-widget-content-container* The container for the rating widget's thumbs up/down buttons. ```CSS [data-cognigy-webchat-root] .webchat-rating-widget-content-container { @@ -661,7 +661,7 @@ The container for the rating widget's thumbs up/down buttons. } ``` -* *webchat-rating-widget-thumbs-up-button* +* *webchat-rating-widget-thumbs-up-button* The thumbs-up button for the rating widget. ```CSS [data-cognigy-webchat-root] .webchat-rating-widget-thumbs-up-button { @@ -669,7 +669,7 @@ The thumbs-up button for the rating widget. } ``` -* *webchat-rating-widget-thumbs-down-button* +* *webchat-rating-widget-thumbs-down-button* The thumbs-down button for the rating widget. ```CSS [data-cognigy-webchat-root] .webchat-rating-widget-thumbs-down-button { @@ -677,7 +677,7 @@ The thumbs-down button for the rating widget. } ``` -* *webchat-rating-widget-comment-input-field* +* *webchat-rating-widget-comment-input-field* The input field for comments in the rating widget. ```CSS [data-cognigy-webchat-root] .webchat-rating-widget-comment-input-field { @@ -685,7 +685,7 @@ The input field for comments in the rating widget. } ``` -* *webchat-rating-widget-send-button* +* *webchat-rating-widget-send-button* The button to send the rating/comment. ```CSS [data-cognigy-webchat-root] .webchat-rating-widget-send-button { @@ -693,7 +693,7 @@ The button to send the rating/comment. } ``` -* *webchat-chat-options-footer-link* +* *webchat-chat-options-footer-link* The link displayed at the footer of the chat options screen. ```CSS [data-cognigy-webchat-root] .webchat-chat-options-footer-link { @@ -702,7 +702,7 @@ The link displayed at the footer of the chat options screen. } ``` -* *webchat-chat-options-footer-link-text* +* *webchat-chat-options-footer-link-text* The text for the footer link in chat options screen. ```CSS [data-cognigy-webchat-root] .webchat-chat-options-footer-link-text {