Facebook Customer Chat issue with Turbolinks 5 on Rails

Author: totycosCreated Jan 14, 2021Updated May 22, 2021

Every time I change pages, fb-root generates a new fb_dialog without removing the old one. Here is my code:

application.js

// Load Facebook SDK for JavaScript 

function FBInit() {
  FB.init({
    appId      : '<XXXXXXXXXX',
    xfbml      : true,
    version    : 'v9.0'
  });
};

$(document).ready(function(){
  $.getScript( "https://connect.facebook.net/fr_FR/sdk/xfbml.customerchat.js", FBInit);
});

$(document).on('turbolinks:load', function(event){
  if (typeof FB !== "undefined" && FB !== null) {
    FB.XFBML.parse();
  }
});

$(document).on("turbolinks:before-cache", function() {
    $('[data-turbolinks-no-cache]').remove();
});

application.html.erb

<body> 
          <!-- Facebook Customer chat Plugin -->
          <div id="fb-root" data-turbolinks-permanent></div>

          <div class="fb-customerchat" data-turbolinks-no-cache attribution=setup_tool page_id="XXXXXXXXX"
            theme_color="#0A7CFF" greeting_dialog_display="hide" logged_in_greeting="Salut, tu peux me poser des questions et faire des remarques ici    "
            logged_out_greeting="Salut, tu peux me poser des questions et faire des remarques ici   ">
          </div>

Source: turbolinks/turbolinks

View original on GitHub View discussion on GitHub