JavaScript SDK

Installing the SDK

It is very simple to install the javascript SDK on your website. Before installing you will need an application id and application secret for the javascript SDK. Once you obtained your application id and application secret please add the javascript code to your website:

<script type="text/javascript">
  window.lhnJsSdkInit = function () {
    lhnJsSdk.setup = {
      application_id: "YOUR APPLICATION ID",
      application_secret: "YOUR APPLICATION SECRET"
    };
  };

  (function (d, s) {
    var newjs, lhnjs = d.getElementsByTagName(s)[0];
    newjs = d.createElement(s);
    newjs.src = "https://developer.livehelpnow.net/js/sdk/lhn-jssdk-current.min.js";
    lhnjs.parentNode.insertBefore(newjs, lhnjs);
  }(document, "script"));
</script>


Optional SDK Settings

Please note all options below should be defined within the window.lhnJsSdkInit function declaration.

When using the javascript SDK you have the ability to customize some options directly on your page. For example, the local dictionary being used and some visitor and window options. Please see the example below for both.

lhnJsSdk.dictionary = {
  agentConnecting: "Connecting to agent",
  callbackMenu: "Callback",
  callbackTitle: "Request a callback",
  cancel: "Cancel",
  chatBoxPlaceholder: "Your message",
  chatMenu: "Chat",
  chatTitle: "Conversation",
  email: "Email",
  emailTranscript: "Email transcript to",
  emailSuccess: "Chat transcript has been emailed to",
  endChat: "End Chat",
  endChatConfirm: "Are you sure you want to end the current chat?",
  inviteCancel: 'Dismiss',
  inviteStart: 'Chat now',
  knowledgeMenu: "FAQ",
  knowledgeSearch: "",
  knowledgeTitle: "Search Knowledge",
  livechat: "LIVE CHAT",
  livechat_offline: "GET HELP",
  newChatTitle: "New conversation",
  offlineTitle: "Leave a message",
  remoteAssistance: "The agent is requesting access to view your desktop",
  send: "Send",
  startChat: "Start Chat",
  submit: "Submit",
  surveyTitle: "Survey",
  ticketMenu: "Ticket",
  ticketTitle: "Submit a ticket",
  uploadFile: "Upload File",
  uploadFileSuccess: "File has been successfully uploaded"
};
lhnJsSdk.options = {
  custom1: "Some value<br />Blah Blah", //custom1 value -- 350 character limit
  custom2: "Another value", //custom2 value -- 350 character limit
  custom3: "One more value", //custom3 value -- 350 character limit
  dept: 12345, //passing of department id
  autoinvite: {
    message: "Auto invite message", //the message of the auto invite
    enabled: true, //if the auto invite in enabled or not
    delay: 15 //the delay of the invite in seconds
  },
  chatSurveyId: 12345, //the survey id you would like to use
  chatWindowId: 12345, //the chat window id you would like to use
  callbackWindowId: 12345, //the callback window id you would like to use
  kb_categories: [1, 2, 3], //the categories you would like to restrict the kb search to
  tracking: true, //if the visitor should be tracked or not
  hideButtonWhenOpen: true, //if the button should hide when the embedded window is open
  embedArticle: true, //set to true to show KB article directly in HOC window or false to open on KB site
  sound: "http://url.com/to/customsound.wav", //can supply a custom audio file to play for visitor notifications or set to empty string ("") to disable sound
  invite_as_chat: false //will show invitation message as a chat message. This will bypass any prechat setup
};

You can also pre supply any data you already know. The keys will need to match the CRM mapping defined in the form customization pages in the Admin Panel. All keys would be lowercase with spaces becoming underscores. For example we will use the EMail and Full name mappings below:

lhnJsSdk.fieldData = {
  email: "user@domain.com", //mapping to the EMail CRM field
  full_name: "Customer Name", //mapping to the Full name CRM field.
  auto_submit: false //set to true to auto submit the pre chat form with supplied info
}

You may add _readonly to the end of any key to prevent the customer from being able to modify the supplied value.



SDK Callback Functions

The following functions will be called if declared:

function lhnJsSdkReady(){
  // This function will be called when sdk is done loading and ready
}

function lhnJsSdkEmbeddedOpened(){
  // This function will be called when the embedded window is opened
}

function lhnJsSdkEmbeddedClosed(){
  // This function will be called when the embedded window is closed
}

function lhnStatusUpdate(){
  // This function will be called when the online/offline status of the department or account changes
}
*lhnJsSdk.isOnline variable will provide current online/offline status

function lhnJsSdkInviteReceived(message, delay, type){
  // This function will be called when a new chat invitation is received.
}

function lhnJsSdkInviteAccepted(){
  // This function will be called when a chat invitation is accepted.
}

function lhnJsSdkInviteRejected(){
  // This function will be called when a chat invitation is rejected.
}

function lhnJsSdkSmsChatShown(){
  // This function will be called when the sms chat is launched from the chat window.
}

function lhnJsSdkPreChatShown(){
  // This function will be called when the prechat form is shown.
}

function lhnJsSdkPreChatSubmitted(){
  // This function will be called when the prechat form is submitted.
}

function lhnJsSdkChatStarted(){
  // This function will be called when the chat has begun.
}

function lhnJsSdkChatNewMessage(message_id, message, message_type){
  // This function will be called when a new chat message is received.
}

function lhnJsSdkChatTimeout(message){
  // This function will be called when a chat timeout option is triggered.
}

function lhnJsSdkChatEnded(chat_session_id){
  // This function will be called when chat has been ended
}

function lhnJsSdkOfflineShown(){
  // This function will be called when the offline form is shown.
}

function lhnJsSdkOfflineSubmitted(){
  // This function will be called when the offline form is submitted.
}

function lhnJsSdkSurveyShown(){
  // This function will be called when a survey has been shown
}

function lhnJsSdkSurveySubmitted(){
  // This function will be called when a survey has been submitted
}

function lhnPromo(message){
  // This function will be called when a promo is received
}

function lhnJsSdkKbSearch(search_term){
  // This function will be called when a kb search is occuring
}

function lhnJsSdkCallbackShown(){
  // This function will be called when a callback form is shown
}

function lhnJsSdkCallbackSubmitted(){
  // This function will be called when a callback form is submitted
}

function lhnConversion(conversion_id, conversion_value){
  // This function will be called when a conversion is triggered
}

/* Only for Help Bot Chats */
function lhnJsSdkBotInputReceived(question, answer){
  // This function will be called when a Help Bot question is answered
}


SDK General Functions

Open the embedded window using a text link or custom element/graphic:

lhnJsSdk.openHOC(); // Will open to first tab or last active tab
lhnJsSdk.openHOC('c'); // Will open to the chat window tab
lhnJsSdk.openHOC('kb'); // Will open to the knowledge lookup tab
lhnJsSdk.openHOC('kb', {search_term: "some text"}); // Will open to the knowledge lookup
         tab and search the passed term
lhnJsSdk.openHOC('cb'); // Will open to the callback form tab


Embed Chat

To include the chat on your website you will need to create a container element with a unique id attribute. You should also place this on all pages of your website so chats are not lost while a visitor navigates your site. Once you have the containing element, you can now add the following javascript code to your website, replacing element_id with the id of the container element and window_id with the chat window id:

function lhnJsSdkReady(){
  lhnJsSdk.embedChat("element_id", window_id);
}

Please note: You will need to provide all CSS for returned elements. Only HTML is provided


Embed Knowledge Base Search

To include the knowledge base search on your website you will need to create a container element with a unique id attribute. You can now add the following javascript code to your website, replacing id with the id of the container element:

function lhnJsSdkReady(){
  lhnJsSdk.embedKbLookup("element_id");
}

Please note: You will need to provide all CSS for returned elements. Only HTML is provided


Embed Knowledge Base Article

To embed a knowledge base article on your website you will need to create a container element with a unique id attribute. You can now add the following javascript code to your website, replacing article_id with the id of the article you want to embed and element_id with the id of the container element:

function lhnJsSdkReady(){
  lhnJsSdk.embedKbArticle(article_id, "element_id");
}

Please note: You will need to provide all CSS for returned elements. Only HTML is provided


Embed Callback Form

To embed a callback form on your website you will need to create a container element with a unique id attribute. You can now add the following javascript code to your website, replacing element_id with the id of the container element and window_id with the callback window id:

function lhnJsSdkReady(){
  lhnJsSdk.embedCallback("element_id", window_id);
}

Please note: You will need to provide all CSS for returned elements. Only HTML is provided


Display a custom invitation message

To display a custom message you will need to call the following command. There are 3 params needed in the call. The first is the message you would like to send, the second is the delay before showing and the third is if it should play a sound.

lhnJsSdk.showInvite("invitation message", 3, true);

Conversion Tracking

You can configure automatic conversion tracking within the Admin Panel of your account, or you can push an conversion manually. To push a conversion manually use the following javascript code on your website, replacing conversion_id with the id of the conversion and 100.00 with the actual value of the conversion:

lhnJsSdk.track_conversion("conversion_id", "100.00");