Google Tag Manager + Facebook Messenger not working

Question

I try to implent the Facebook Messenger code to my GTM.

After importing and changing, it doesn't show up. Can anyone see whats wrong with my code?

Code:

<!-- FACEBOOK MESSENGER CHAT BOX -->
<script>
  // We create the DIV dynamically to work correctly with Tag Manager
  var chatDiv = document.createElement('div');
  chatDiv.className = 'fb-customerchat';
  chatDiv.setAttribute('page_id', '1417984138420288'); // Facebook Page ID goes here
  document.body.appendChild(chatDiv);

  // Initialise Facebook SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '276246456505554', // Facebook App ID goes here
      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/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

A screenshot of the GTM

Answer 1

You need to go into the Facebook Page Settings and change the Location and Age restrictions to All, otherwise when it tries to check if you are in the right country or older than 18 and can't access that info due to some users privacy or logged in settings, it just defaults to not displaying the messenger bubble.