Advanced button integration

Table of content

Do not forget to change the URL of your LiveAgent and button IDs in the below code examples.

Use elements on your website to start a chat or contact form

In case you do not want to use the visual functionality of LiveAgent buttons (floating, image, HTML), you can use any element on your site to start chat or contact form. To achieve this you have to:

1. Create a chat button

2. Modify "Button design"
- select "Custom html" style
- click "Customize design"
- change html code to "<span></span>" so button is not visible.

3. Save the button and get the integration code which will look like this:

<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'//localhost.lc/LiveAgent/scripts/track.js',
function(e){ LiveAgent.createButton('6522fc2b', e); });
</script>

Change the code so it looks like this (remember to use correct URLs and button ID):

<script type="text/javascript">
var chatButton;
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'//localhost.lc/LiveAgent/scripts/track.js',
function(e){ chatButton = LiveAgent.createButton('6522fc2b', e); });
</script>

4. Now you can simulate click on the button by calling following JavaScript:

chatButton.onClick();

e.g.:

<h2 class="alt" onclick="chatButton.onClick();">Start chat</h2>

How to start a chat or open a pre-chat form automatically when website is loaded

This can be useful if you want to start a chat or open a pre-chat form immediately when customer loads your website or specific page. In such case, customer does not have to click on a chat button which you have inserted in your website. All he needs to do is to visit your website using a specific link and chat or pre-chat form will be started automatically (depends on the fact if you have pre-chat form enabled in your chat button). For example this can be used if you want to send such link to a customer via email.

1. Follow same steps (1-3) from 'advance button integration' above.

2. Place the following code on the same page as you have your customized chat button inserted.

<script>
window.onload = function(e){ 
  var url = new URL(window.location.href);
  var directChat = url.searchParams.get("directChat");
  if (directChat != null) {
    chatButton.onClick();
  }
}
</script>

3. Add an URL parameter to the link of the page on which you have codes inserted.

https://URL-OF-YOUR-WEBSITE/?directChat

That's all. When above link is called chat starts or pre-chat form is displayed automatically.

Display a chat button or contact form ONLY on specific page

To achieve this, you'd need to customize JavaScript code of your chat button / contact form with a condition to make sure the button will be displayed only on specific page. So for example if you'd like to display the widget only on /pricing page, you could add a condition like this into the code:

<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://YOUR-LA.ladesk.com/scripts/track.js',
function(e){
if (window.location.pathname.indexOf('pricing') > 0 ) {
    LiveAgent.createButton('6522fc2b', e);
}});
</script>

Do NOT display a chat button or contact form on specific pages

In opposite to the above example would be the case where you want to HIDE widgets from specific pages like /pricing, /signup, /login. In this case, you can simply change the condition in the code like this:

<script type="text/javascript">
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://YOUR-LA.ladesk.com/scripts/track.js',
function(e){
if (window.location.pathname.indexOf('pricing') < 0 && window.location.pathname.indexOf('signup') < 0 && window.location.pathname.indexOf('login') < 0) {
    LiveAgent.createButton('6522fc2b', e);
}});
</script>