title: How to use facebook messenger chat plugin with custom button click?
body: <p>(Basically I want to implement the facebook messenger chat plugin with my own button. Right now It's opening the messenger dialog. but it takes much time to initialize the SDK. it should open the dialog quickly when I click the button)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;div id="fb-root"&gt;&lt;/div&gt;
  
  &lt;div id="fb-customer-chat" class="fb-customerchat"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      var chatbox = document.getElementById("fb-customer-chat");
      chatbox.setAttribute("page_id", "XXXXXXXXXXXX");
      chatbox.setAttribute("attribution", "biz_inbox");
  
      (function (doc, tagName, id) {
          var js,
              fjs = doc.getElementsByTagName(tagName)[0];
          if (doc.getElementById(id)) return;
          js = doc.createElement(tagName);
          js.id = id;
          js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
          fjs.parentNode.insertBefore(js, fjs);
      })(document, "script", "facebook-jssdk");
      window.fbAsyncInit = function () {
          FB.init({
              xfbml: true,
              version: "v14.0",
          });
      };
      window.addEventListener("messengerDialog", function (event) {
          event.detail === "open" ? FB.CustomerChat.showDialog() : FB.CustomerChat.hideDialog();
      });
  &lt;/script&gt;
  
  
  
  openMessengerDialog() {
    window.dispatchEvent(
     new CustomEvent('messengerDialog', { detail: 'close' })
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="openMessengerDialog()"&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>