Skip to content
This repository has been archived by the owner on Feb 11, 2022. It is now read-only.

Customize chatbox

Dominic St-Pierre edited this page Jan 3, 2014 · 1 revision

Customizing the chat box via JavaScript

You can easily configure a set of options via JavaScript. On the /LCSK/chat.js file there is a call to a config function that can accept a configuration object.

$(function () {
    ...
    LCSKChat.config();
    LCSKChat.init();
});

You can change the config method and supply some configuration values, here is an example changing the header title and width of the chat box:

LCSKChat.config({
  headerBackgroundColor: '#FF0000',
  width: 850
});

Here is the available option as of v. 1.5.2:

Name Description Default Value
position CSS position of the chat box fixed
placement Where the chat box should appears bottom-right
headerPaddings CSS padding for the header element 3px 10px 3px 10px
headerBackgroundColor Background color for the header #0376ee
headerTextColor Color for the header text white
headerBorderColor Border color around the header element #0354cb
headerGradientStart Starting color for the gradient #058bf5
headerGradientEnd Ending color for the gradient #015ee6
headerFontSize Size for the header font small
boxBorderColor Color for the chat box border #0376ee
boxBackgroundColor Background color for the chat box white
width Width for the chat box 350
offlineTitle Title when no operator are online Chat is offline, contact us
onlineTitle Title when at least one operator is online Chat with us, we'reonline
waitingForOperator Text when waiting for chat operator Thanks, give us 1min to accept the chat...
emailSent Confirmation of email sent Your email was sent, thanks we'll get back to you asap.
emailFailed Text if email failed Doh! The email could not be sent at the moment.

Sorry about that.
Clone this wiki locally