Start Facebook Livechat upon clicking a link instead of autoload?

Question

FB has launched Livechat API a few months ago. After adding the following coding a small icon will pop up on the bottom right hand corner.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat" page_id="PAGE_ID"></div>

That means, it will auto load when visitors visiting the website.

My question is that is it possible to click on a link to open this live chat instead of autoload?

<a href="#">Click here to start FB livechat!</a>   // something like this

Answer 1

Wrap the FB.init in a button click event. That way it won't init the chat element until you have clicked something else.

Plain javascript method:

<script>
  var narf = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat" page_id="PAGE_ID"></div>
<button onclick="narf();">Start Chat</button>

jQuery method:

<script>
  $(function() {
      $("#openchat").click(function(){
          FB.init({
              appId            : 'your-app-id',
              autoLogAppEvents : true,
              xfbml            : true,
              version          : 'v2.11'
          });
      });
  });
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat" page_id="PAGE_ID"></div>
<button id="openchat">Start Chat</button>

Delayed XFBML parse method in standard javascript (as noted by CBroe):

<script>
  var narf = function() {
      FB.XFBML.parse(document.getElementById('chat-wrapper'));
  };
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : false,
      version          : 'v2.11'
    });
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<div id="chat-wrapper">
    <div class="fb-customerchat" page_id="PAGE_ID"></div>
</div>
<button onclick="narf();">Start Chat</button>