Can I use my own custom chat button?

How to use your own custom button

1. Visit Chat » Settings » Advanced.
2. Check the "Never Show Click to Chat Button" checkbox.
3. Make your graphic in some photo editing software or just style it in CSS wherever you want it on your page.
4. Follow the API calls below on this page. Those functions will fire if an operator is available to chat or not, so you would show/hide your custom chat button depending on this functions firing.
5. Finally, have your chat button call LO.page(); when clicked on.

How the Chat Events Work

Lucky Orange has a few javascript hooks that you can use to implement custom behavior. For example, if a chat operator is logged in to Lucky Orange and is marked as "available to chat" then normally a chat button appears at the bottom right of the visitor's screen.

But, under the hood, Lucky Orange will also attempt to call lo_chat_agent_available(). You can implement that function with whatever logic you want. For instance, you could choose to write code that plays a sound, or animates an element across the screen. If the function doesn't exist, Lucky Orange won't call it. Make sure you implement these functions somewhere on your page before the Lucky Orange tracking code.

Initiate a chat with an operator

You can page an operator and initiate a chat by using the following function:

LO.page();

lo_chat_agent_available()

This function is called if any operators are available to chat.

function lo_chat_agent_available () {
  // Place your code here
}

lo_chat_agent_unavailable()

This function is called if there is no chat operator logged in and available to chat.

function lo_chat_agent_unavailable () {
  // Place your code here
}

lo_chat_ended_by_operator()

This function is called when an operator ends a chat session.

function lo_chat_ended_by_operator () {
  // Place your code here
}

lo_chat_ended_by_visitor()

This function is called when a visitor ends a chat session.

function lo_chat_ended_by_visitor () {
  // Place your code here
}

lo_chat_initiated()

This function is called if a user clicks the "click to chat" button or responds to an "ask to chat" request.

function lo_chat_initiated (asked_to_chat) { 
  if (asked_to_chat) { 
    // Fired when a user initialized a chat but was first asked to chat by an operator.
  } 
  else { 
    // Fired when a user initiated a chat on their own by clicking the "Chat with an Operator" button.
  } 
}

Triggering the Away Form

You can also trigger the showing of the away form by calling the following function:

LO.away_form();

Examples

Trigger chat if operators are available, or show the away form if they are not.

<!-- Place this before your Lucky Orange tracking code -->
<script>
  window.loChatAvailable = true
  function loInitiateChat () {
    window.loChatAvailable ? LO.page() : LO.away_form()
  }

  function lo_chat_agent_unavailable () {
    window.loChatAvailable = false
  }

  function lo_chat_agent_available () {
    window.loChatAvailable = true
  }
</script>

<!-- You can add onclick="loInitiateChat()" to any element on the page -->
<a href="javascript:void(0);" onclick="loInitiateChat()">Chat with us</a>