Support Center > Knowledge Base> Article: CSS customization of the Embedded Widget

CSS customization of the Embedded Widget

Article ID: 92931 Email Print
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; }




Related articles

Article Details
Views: 537 Created on: Sep 11, 2017
Date updated: Sep 11, 2017
Posted in: Embedded Widget
Tagged: css


Poor Outstanding