Customization options for the Embedded Widget

Changing appearance

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

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

Here are some of the elements of the Embedded Widget, please do not copy and paste these styles to be used on your website, they are provided just as a guidance for your webmaster.

Chat button

div#lhnHocButton.lhnround {
    right: 60px !important; //Moves the button to be 60px off the right hand side of the web page
}

div#lhnHocButton.lhnround div.lhnHocChatBtnCont {
    zoom: 80%; //making the chat button smaller by 20%
    box-shadow: 0 2px 2px #888888; // adding shadows
    background-color: #BE45CD; //changing the color
    background-color: transparent;//or making it transparent
}

div#lhnHocButton div.lhnHocChatBtn {
    background-color: #BE45CD;//changing inner layer of the round chat button color
}

Chat window

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

#lhnHelpOutCenter div.lhnWindow-header {
    color: white; //Title font color
    background-color: #BE45CD; //Title background color
}

#lhnHelpOutCenter button.form_submit, #lhnHelpOutCenter button.lhnFormButton {
    background-color: #BE45CD; //Button color (start chat, submit ticket, etc. buttons)
}

#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption:hover{
    background-color: #BE45CD; //styling hover color for Chat Bot presented option selection
}

//Styling Chat Bot options selection
#lhnHelpOutCenter div.jumplogic .lhnOptions .lhnOption {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0.5;
    font-size: 14px;
    line-height: 18px;
    padding: 5px;
    border-radius: 6px;
    background-color: rgb(232, 234, 253);
    color: rgb(13, 28, 140);
    display: inline-block;
    margin: 5px;
}

For additional styles please see this article.

Changing Labels

To change default labels/text shown within the embedded widget you will need to modify the Embedded widget code to include dictionary as shown below.

window.lhnJsSdkInit = function () {
....

lhnJsSdk.controls = [{
....
}];
 

lhnJsSdk.dictionary = { 
          agentConnecting: "Connecting to agent",
          callbackMenu: "Callback",
          callbackTitle: "Request a callback",
          cancel: "Cancel",
          chatMenu: "Chat",
          chatTitle: "Conversation",
          email: "Email",
          endChat: "End Chat",
          endChatConfirm: "Are you sure you want to end the current chat?",
          inviteCancel: 'Dismiss',
          inviteStart: 'Chat now',
          knowledgeMenu: "FAQ",
          knowledgeTitle: "Search Knowledge",
          livechat: "LIVE CHAT",
          livechat_offline: "GET HELP",
          newChatTitle: "New conversation",
          offlineTitle: "Leave a message",
          send: "Send",
          startChat: "Start Chat",
          submit: "Submit",
          surveyTitle: "Survey",
          ticketMenu: "Ticket",
          ticketTitle: "Submit a ticket"
        };

};

Please note the specific location where dictionary object (green font in the example) must be added within Embedded Widget code. Location is very important.

After the dictionary object is added you are free to modify its values such as changing "New conversation" to "New chat", etc.

Please see LiveHelpNow Embedded JS SDK for more info.