CSS customization of the Embedded Widget

Article ID: 92931  

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

Answer

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.

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

 

/* Live Chat button/tab styles */

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

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

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

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

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

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

/* Post chat survey radio butons styles */ .lhnRadioGroup input:checked + span { background-color: #e0e0e0; color: white; } #lhnHocButton .lhnHocBackBubble { background-color: #e0e0e0; } #lhnHocButton .lhnHocBackBubble:after{ border-color: #e0e0e0 #e0e0e0 transparent transparent; }
/* Live Chat invitation styles */ #lhnHocInvite .lhnHocInviteCont{ background-color: #999999; color: #FFFFFF; } #lhnHocInvite .lhnHocInviteButton{ border: 1px solid #ffffff; background-color: #f0f0f0; color: #999; } #lhnHocInvite .lhnHocInviteButton.start{ background-color: #ffffff; color: #999; }
/* pre chat submission/survey submission/etc button styles */ .lhnFormButton { background-color: #999999; color: white; } .lhnFormButton:hover { background-color: #666666; }
/* window header */ .lhnWindow-header { color: white; background-color: #999999; }
/*chat message from customer styles */ .lhnCustomerMessage .lhnWindow-message { background-color: #999999; color: white; } .lhnCustomerMessage .lhnWindow-message:after { border-color: transparent transparent transparent #999999; }

/* Live Chat send message button styles */ .lhnWindow-chat_input button { background-color: #999999; color: white; } .lhnWindow-chat_input button:hover { background-color: #666666; } .lhnPrompt .lhnFormButton{ border: 2px solid #999999; } .lhnPrompt .lhnFormButton.lhnPromptDecline{ background-color: #ffffff; color: #999999; } .lhnChatActionsMenu img{ background-color: #999999; }




Article Details
Views: 538 Created on: Sep 11, 2017