Facebook messenger button

Site URL: https://owlhealings.com/

Hi there, 

On my website I am using Weglot translation service which is working great! 

However when I want to also add the Facebook Messenger button it doesn't show up, even though I chose through facebook settings to have their button on the left side and weglot is on the right hand side....

Does anyone here know how I can, in a simple way, have both of the buttons at once?. 

These are the codes I am using atm (they are both just copied and pasted from the website I want to add):

For weglot: 

<link rel="alternate" hreflang="sv" href="https://owlhealings.com">
<link rel="alternate" hreflang="en" href="https://en.owlhealings.com">
<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'wg_1ba15574215e959596390c470190fc268'
    });
</script>

For Facebook:

<!-- Messenger Chat plugin Code -->
    <div id="fb-root"></div>

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

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

      window.fbAsyncInit = function() {
        FB.init({
          xfbml            : true,
          version          : 'v11.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/sv_SE/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>

EDIT: I want to add as well that I have the WeGlot code in the area called "header" and the Favebook code in the area called "footer" in "code injection". 

Grateful for help.

Much love, Karl-Simon

Hello karlsimon,

You can try this code

<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '95100348886',
          xfbml      : true,
          version    : 'v2.6'
        });
      };

      (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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>

    <div class="fb-messengermessageus"
         messenger_app_id="95100348886"
         page_id="XYZ"
         color="blue"
         size="large">
    </div>

Thank you Tuanphan

Your tool did work, thank you for that. However I would love it if I could get the facebook plugin working as it would provide me the choices for people to ask their first question... Perhaps I just can't have 2 plugins on the same page, ie weglot and fb messenger... When I removed the weglot, the facebook code works....

If you can think of any other solutions I would be super grateful bur for now I will use your tool, thank you again!

look at picture for what I mean with "the first questions"

Thank you Mariadesuja, 

This code you have provided does not work! 

Hi,

I guess this option?

Yes I guess I could just write it there and not give them different options, very true 🙂 Thank you again!