I have to refresh page for FB messenger widget to show on web page

Question

I have been trying to add FB Messaging Widget to my site. All works fine on MS Edge but I have to hard (CTRL + F5) refresh the page when viewing the page on Chrome and my Android Phone. If I leave the page and come back to it again I have to once again hard refresh the page for it to show up. Your help would be appreciated.

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
    appId            : '2107772995957885'
      xfbml            : true,
      version          : 'v3.2'
    });
  };
  (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#xfbml=1&version=v2.12&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat" attribution=setup_tool page_id="123456789" logged_in_greeting="Hi, Thanks for visiting our site. If you have a question, please ask here." logged_out_greeting="Hi, Thanks for visiting our site. Log into FB to ask a question." greeting_dialog_display="fade" greeting_dialog_delay="10" theme_color="#ff7e29"></div>