You can easily customize the unified window yourself by using these classes and examples. Classes are broken up into "blocks" and "elements". Below, you can find a definitive list of all the classes available for use to customize the window.
Naming convention
lpc — general namespace for the customization classes
block — a component of the window
element — a specific item within a block
modifier — defines the appearance, state, or behavior of a block or element (for example, maximized vs. minimized):
lpc_block_modifier or lpc_block__element_modifier
Window
The primary container for all elements.
Available modifiers:
maximized minimized slider-open
.lpc_window {
}
Maximized Header
.lpc_maximized-header {
}
.lpc_maximized-header__close-button {
}
.lpc_maximized-header__close-button-asset {
}
.lpc_maximized-header__minimize-button {
}
.lpc_maximized-header__minimize-button-asset {
}
.lpc_maximized-header__slider-button {
}
.lpc_maximized-header__slider-button-asset {
}
.lpc_maximized-header__text-wrapper {
}
.lpc_maximized-header__text {
}
.lpc_maximized-header__icon {
}
.lpc_maximized-header__icon-asset {
}
.lpc_maximized-header__menu-button {
}
.lpc_maximized-header__menu-button-asset {
}
Minimized Header
.lpc_minimized-header {
}
.lpc_minimized-header__close-button {
}
.lpc_minimized-header__close-button-asset {
}
.lpc_minimized-header__text-wrapper {
}
.lpc_minimized-header__text {
}
.lpc_minimized-header__icon {
}
.lpc_minimized-header__icon-asset {
}
.lpc_minimized-header__maximize-button {
}
.lpc_minimized-header__maximize-button-asset {
}
.lpc_minimized-header__notification-counter {
}
Body
Full area below the header.
Available modifiers: maximized slider-open
.lpc_body {
}
Layout
The area between the header and the footer.
.lpc_layout {
}
Banner Image
Top banner logo.
.lpc_banner-image-area {
}
.lpc_banner-image-area__image-wrapper {
}
.lpc_banner-image-area__image {
}
.lpc_banner-image-area__link {
}
Hero Image
Hero image of the window.
.lpc_hero-image-area {
}
.lpc_hero-image-area__image-wrapper {
}
.lpc_hero-image-area__image {
}
History spinner
The loading icon when waiting for the conversation history to be retrieved.
.lpc_history-spinner {
}
Transcript
Transcript area.
.lpc_transcript {
}
Message Area
Element entry into transcript.
Available modifiers: agent visitor system visitor-fs avatar-shown avatar-hidden.
.lpc_message-area {
}
.lpc_message-area__timestamp {
}
.lpc_message-area__avatar {
}
.lpc_message-area__indicator {
}
Message
A received message in the window, whether agent or visitor (see modifiers).
Available modifiers: agent visitor system card visitor-fs avatar-shown avatar-hidden.
.lpc_message {
}
.lpc_message__text {
}
Message Tail
Available modifiers: agent visitor system visitor-fs.
.lpc_message-tail {
}
.lpc_message-tail__border {
}
Typing Indication
Typing indicator.
Available modifiers: agent.
.lpc_typing-indication {
}
Action Menu
Menu which is accessed with the footer action button. Appears in keyboard area.
.lpc_menu {
}
.lpc_menu__item {
}
.lpc_menu__banner {
}
Composer
Area in which the user composes their messages.
.lpc_composer {
}
.lpc_composer__text-area {
}
.lpc_composer__text-area-wrapper {
}
.lpc_composer__menu-button {
}
.lpc_composer__menu-button-asset {
}
.lpc_composer__send-button {
}
.lpc_composer__send-button-asset {
}
.lpc_composer__file-attachment-button {
}
.lpc_composer__file-attachment-button-asset {
}
.lpc_composer__emoji-button {
}
.lpc_composer__emoji-button-asset {
}
Slider
Area where a widget is loaded when opened, including its header.
.lpc_slider {
}
.lpc_slider__body {
}
Slider Header
.lpc_slider-header {
}
.lpc_slider-header__minimize-button {
}
.lpc_slider-header__minimize-button-asset {
}
.lpc_slider-header__refresh-button {
}
.lpc_slider-header__refresh-button-asset {
}
.lpc_slider-header__text {
}
Confirmation Dialog
Prompt for user interaction.
.lpc_confirmation-dialog {
}
.lpc_confirmation-dialog__confirm-button {
}
.lpc_confirmation-dialog__cancel-button {
}
.lpc_confirmation-dialog__title {
}
Card
Structured Content card.
Available modifiers: horizontal vertical.
.lpc_card {
}
.lpc_card__button {
}
.lpc_card__image {
}
.lpc_card__map {
}
.lpc_card__text {
}
For information on formatting, see the notes on structured content in the Conversation Builder documentation here.
Survey Area Wrapper
Used to define survey common styles. Primarily background for the survey.
.lpc_survey-area-wrapper {
}
Survey Area
Survey Area of the window.
Available modifiers: logo.
.lpc_survey-area {
}
.lpc_survey-area__question-wrapper {
}
.lpc_survey-area__question-label {
}
.lpc_survey-area__question-content {
}
.lpc_survey-area__header {
}
.lpc_survey-area__disclaimer {
}
.lpc_survey-area__previous-button {
}
.lpc_survey-area__cancel-button {
}
.lpc_survey-area__next-button {
}
.lpc_survey-area__submit-button {
}
.lpc_survey-area__close-button {
}
Device Types
To specify different device type CSS, chain the below selectors to the above class names. If no device type class is chained, it will apply to all devices.
.lpc_desktop
.lpc_mobile
.lpc_tablet
Tips and Best Practices
Overriding styles
To actually override the existing styles of a block or an element, it is suggested to use the !important property for each style.
For example:
.lpc_desktop.lpc_window_maximized {
width: 400px !important;
}
In the unlikely case that !important does not override the style, we suggest using #lpChat as a parent selector so there will be more priority.
#lpChat .lpc_desktop.lpc_window_maximized {
width: 400px !important;
}
To override the existing styles of a border for each element for maximized window, we suggest using the following CSS rule:
.lpc_window_maximized button:focus, input:focus, textarea:focus, select:focus, a:focus, div:focus {
outline: red 2px solid !important;
}
To override border style for minimized window use the following CSS rule:
.lpc_window_minimized button:focus, input:focus, textarea:focus, select:focus, a:focus, div:focus {
outline: red 2px solid !important;
}