title: How to Customize Facebook Customer Chat Plugin (beta)
body: <p>I know the Customer Chat Plugin is only in beta mode, but I would love to use it if I can. After looking over the <a href="https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin" rel="nofollow noreferrer">docs</a>, I can't seem to find a way to customize the functionality of the chat widget.</p>
  
  <p><strong>Here's what I want to do:</strong></p>
  
  <ul>
  <li>Show and hide the widget programmatically (javascript)</li>
  <li>Tap into close event of widget to hide the whole widget instead of just minimizing the chat window.</li>
  <li>Toggle between more than one widget</li>
  </ul>
  
  <p><strong>Background:</strong></p>
  
  <p>Website is a marketplace of sellers, and I want to be able to give them all a personal chat feature that connects consumers with the sellers. </p>
  
  <p><strong>Previous attempts:</strong></p>
  
  <ul>
  <li>Hide and show widget by targeting <code>#fb-root</code> and applying <code>display: none;</code> or <code>display: block;</code>. This works okay, but still really hacky and doesn't solve problem of knowing when to trigger hiding and showing (usually on a button click "chat now", but I also want the widget to hide when closed/minimized).</li>
  <li>Tried loading two widgets at same time, but one the first one ever loads, and even if the second one did load, I wouldn't have the ability to only target one at a time due to my id DOM selector.</li>
  </ul>
  
  <p>index.html (inside head):</p>
  
  <pre><code>&lt;script&gt;
      window.fbAsyncInit = function() {
          FB.init({
              appId            : 'first-app-id',
              autoLogAppEvents : true,
              xfbml            : true,
              version          : 'v2.12'
          });
      };
      (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'));
  &lt;/script&gt;
  
  &lt;script&gt;
      window.fbAsyncInit = function() {
          FB.init({
              appId            : 'second-app-id',
              autoLogAppEvents : true,
              xfbml            : true,
              version          : 'v2.12'
          });
      };
      (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'));
  &lt;/script&gt;
  </code></pre>
  
  <p>index.html (inside body):</p>
  
  <pre><code>&lt;div class="fb-customerchat"
       page_id="first-page-id"
       logged_in_greeting="Hello, my name is Kevin :)"
       logged_out_greeting="Hey, you are not logged in! You should log in."&gt;
  &lt;/div&gt;
  &lt;div class="fb-customerchat"
       page_id="second-page-id"
       logged_in_greeting="Hello, my name is Kevin again :)"
       logged_out_greeting="Hey, you are not logged in! You should log in."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions, tips, or hacks are greatly appreciated.</p>
  
  <p>UPDATE:</p>
  
  <p>I have confirmed that toggling between more than one widget is impossible at this point. However, it should be possible to do the other two things. Because it's just a beta release, custom event handling and such is not supported. I will wait for the official release.</p>