CSS customization of the Embedded Widget

How do i customize Embedded widget to closely match my website colors?

Embedded widget does not use iFrame and is just another DOM element on your web page allowing to completely style it by using CSS residing within your website styles.

We recommend using Google Chrome Dev Tools inspect tool to find element you would like to style.

 

Here are all of the elements of the Embedded Widget available to be styled:

 

 

div#lhnHocButton div.lhnHocChatBtnCont {
    background-color: #999999;
}
div#lhnHocButton.lhnround div.lhnHocChatBtnCont {
    background-color: transparent;
}
div#lhnHocButton div.lhnHocChatBtn {
    background-color: #999999;
}

div#lhnHocButton div.lhnHocChatBtn_border {
    border: 4px solid #1997AF;
}

div#lhnHocButton div.lhnHocChatBtnShadow {
    box-shadow: -2px 3px 8px 1px #A0A0A0;
}

div#lhnHocButton div.lhnHocFrontBubble {
    background-color: #ffffff;
}

div#lhnHocButton div.lhnHocFrontBubble:before {
    border-color: #ffffff transparent transparent #ffffff;
}

div#lhnHocButton.lhnround div.lhnHocFrontBubble:after {
    border-color: transparent #ffffff #ffffff transparent;
}
div#lhnHocButton div.lhnHocChatTalk {
    background-color: #999999;
}

#lhnHelpOutCenter div.lhnRadioGroup input:checked + span {
    background-color: #e0e0e0;
    color: white;
}

div#lhnHocButton div.lhnHocBackBubble {
    background-color: #e0e0e0;
}

div#lhnHocButton div.lhnHocBackBubble:after{
    border-color: #e0e0e0 #e0e0e0 transparent transparent;
}

div#lhnHocInvite div.lhnHocInviteCont{
    background-color: #999999;
    color: #FFFFFF;
}
div#lhnHocInvite div.lhnHocInviteButton{
    border: 1px solid #ffffff;
    background-color: #f0f0f0;
    color: #999;
}
div#lhnHocInvite div.lhnHocInviteButton.lhnstart{
    background-color: #ffffff;
    color: #999;
}

#lhnHelpOutCenter button.lhnFormButton,
#lhnHelpOutCenter button.form_submit {
    background-color: #999999;
    color: white;
}
#lhnHelpOutCenter button.lhnFormButton:hover,
#lhnHelpOutCenter button.form_submit:hover {
    background-color: #666666;
}

#lhnHelpOutCenter div.lhnWindow-header {
    color: white;
    background-color: #999999;
}

#lhnHelpOutCenter div.lhnCustomerMessage div.lhnWindow-message {
    background-color: #999999;
    color: white;
}
#lhnHelpOutCenter div.lhnCustomerMessage div.lhnWindow-message:after {
    border-color: transparent transparent transparent #999999;
}
#lhnHelpOutCenter div.lhnOperatorMessage div.lhnWindow-message a{
    color: #999999;
}
#lhnHelpOutCenter div.lhnWindow-chat_input button {
    background-color: #999999;
    color: white;
}
#lhnHelpOutCenter div.lhnWindow-chat_input button:hover {
    background-color: #666666;
}

#lhnHelpOutCenter div.lhnPrompt button.lhnFormButton{
    border: 2px solid #999999;
}
#lhnHelpOutCenter div.lhnPrompt button.lhnFormButton.lhnPromptDecline{
    background-color: #ffffff;
    color: #999999;
}

#lhnHelpOutCenter div.lhnChatActionsMenu img{
    background-color: #999999;
}

/* Jump Logic */
#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption{
    color: #999999;
}
#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption:hover{
    background-color: #999999;
    color: #ffffff;
}



If you would like to replace the avatar image shown in chat window header with your company logo, please use this CSS:

.lhnWindow-header-avatar--img {
background-image: url(https://......png) !important;
}

 


Replace https://......png with actual URL for your logo

Leave a comment?

0 Comments
Login
REGISTER WITH EMAIL

Related articles