Advanced widgets integrations

Quick navigation

• Using elements on the website to call a widget
• Starting a chat/opening a pre-chat form automatically when the website is loaded
• Display contact widgets ONLY on specific pages
• Do NOT display contact widgets on specific pages
• Display chat button only to customers from a specific country

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

Using elements on the website to call a widget

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

1. Create a chat or a contact button
2. Open the button's settings and set it to "Custom HTML" style
3. Navigate to the "Online button" section and change the HTML code to <span></span> so the button will not be visible
4. Save the button and copy 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,
   'https://mycompany.ladesk.com/scripts/track.js',
   function(e){ LiveAgent.createButton('1234abcd', e); });
   </script>
   

5. Adjust the code so it looks like this (remember to use the correct URL 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, 
   'https://mycompany.ladesk.com/scripts/track.js',
   function(e){
     chatButton = LiveAgent.createButton('1234abcd', e);
   });
   </script>
   

6. Now you can simulate clicking on the button by calling the following JavaScript:

   chatButton.onClick();
   

   e.g.:

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

Starting a chat/opening a pre-chat form automatically when the website is loaded

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

1. Follow steps 1-5 from the advanced 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 the following URL parameter to the link of the page on which you inserted the codes:

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

That's all. When the above link including the URL parameter is called, the chat starts or the pre-chat form is displayed automatically.

Display a chat button or contact form ONLY on specific pages

To achieve this, you'd need to customize the JavaScript code of your chat/contact button/form with a condition to make sure the widget will be displayed only on a specific page. For example, if you'd like to display the widget only on the /pricing page, you can 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://mycompany.ladesk.com/scripts/track.js',
function(e){
  if (window.location.pathname.indexOf('/pricing') > 0 ) {
    LiveAgent.createButton('1324abcd', 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://mycompany.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('1234abcd', e);
  }
});
</script>

Display chat button only to customers from specific country

This code fetches the user's country based on their IP address using the free ipapi service to detect visitors location based on their IP address. It checks whether the returned country code is 'US', and if yes, the chat button code will be executed and button displayed.

<script type="text/javascript">
  // Fetch the user's country based on their IP address
  fetch('https://ipapi.co/json/')
    .then(response => response.json())
    .then(responseData => {
      const countryCode = responseData.country;

  // 'US' is the country code for USA
      if (countryCode === 'US') { 
   // chat button code
        (function(d, src, c) {
          var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=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://mycompany.ladesk.com/scripts/track.js', function(e){ LiveAgent.createButton('1234abcd', e); });
        }
    })
    .catch(error => {
      console.error('Error fetching IP data:', error);
    });
</script>