Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
InoculateIT
Experienced
Topic Author
Posts: 85
Joined: 08 Jun 2010, 15:04

Script in front?

06 Nov 2021, 07:06

I have installed Facebook Chatboot on my site and its working perfect :)
I just got a little problem I don't know how to fix :D

Its like the script is going behind the page...
I have added the code in footer
Image

The code:
Code
<!-- Messenger Chatplugin Code -->
    <div id="fb-root"></div>

    <!-- Your Chatplugin code -->
    <div id="fb-customer-chat" class="fb-customerchat">
    </div>

    <script>
      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", "000000000000");
      chatbox.setAttribute("attribution", "biz_inbox");

      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v12.0'
        });
      };

      (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/da_DK/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
The spelling mistakes has been inserted automatically of consideration to the people who find a great pleasure to search for it...
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Script in front?

07 Nov 2021, 00:50

The problem here, is that you are adding the Facebook chat container into the X3 footer, and the X3 footer is hidden under the page content until it gets revealed on scroll. Basically the facebook chat container should be added directly to the website <body> instead. Instead of adding to the footer, I would add a tweak and add it into Settings > Custom > Custom Javascript instead:
Code
document.body.insertAdjacentHTML('beforeend', '<div id="fb-root"></div><div id="fb-customer-chat" class="fb-customerchat"></div>');
var chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute("page_id", "168967309886881");
chatbox.setAttribute("attribution", "biz_inbox");
window.fbAsyncInit = function() {
  FB.init({
    xfbml            : true,
    version          : 'v12.0'
  });
};
(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/da_DK/sdk/xfbml.customerchat.js';
  js.crossorigin="anonymous";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Tested successfully!
Image
The Facebook chat is better and more useful than the Chatra plugin I added a while ago. I will probably use it myself soon. Not sure about making a "plugin" out of it though, as there are some options in the code including language.
 
User avatar
InoculateIT
Experienced
Topic Author
Posts: 85
Joined: 08 Jun 2010, 15:04

Re: Script in front?

07 Nov 2021, 03:00

Thanks!!!
The spelling mistakes has been inserted automatically of consideration to the people who find a great pleasure to search for it...
 
BDV
Posts: 4
Joined: 29 Feb 2016, 17:06

Re: Script in front?

12 Nov 2021, 07:57

It`s working well...but Is it possible to display this plug-in only on one page, for example in contact ?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Script in front?

12 Nov 2021, 09:29

BDV wrote:It`s working well...but Is it possible to display this plug-in only on one page, for example in contact ?
Since X3 works like a SPA (single-page application), once you load something into X3, it remains, until removed by javascript. The simple solution is to load it from the contact page, and then hide it for all pages except the contact page. Add the Javascript code in the contact Page > Advanced > Page Javascript:
Image
And add to Page > Advanced > CSS:
Code
#fb-root { display: block; }
The navigate to Settings > Custom > Custom CSS and add:
Code
#fb-root { display: none; }
Facebook will load when navigating to the contact page. Then it will get hidden when navigating away, and will display again when going back to the contact page.
 
BDV
Posts: 4
Joined: 29 Feb 2016, 17:06

Re: Script in front?

12 Nov 2021, 17:29

This is great solution , thanks Karl !