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

Have you solved this yet? Try this free tool to add FB chat. 

If it still doesn't work, let me know. We will try testing it again on demo site.

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!