Facebook Messenger Customer Chat Plugin not appearing when not logged in

L

12

11

I have integrated Facebook Customer Plugin on one of our websites. I followed the instructions in the developer documentation. It is working fine when there is an active facebook session. However, the plugin does not appear at all when there is no active fb session. I might be missing something but I have no clue on what that is.

Leith answered 5/1, 2018 at 12:27 Comment(2)

developers.facebook.com/docs/messenger-platform/discovery/… seems to indicate it should still show up, so you're going to need to show us an example or some code. – Memling 8/1, 2018 at 2:26

hi ceejayoz. In my case, the culprit was Country Restrictions in the page's settings. There should be no restrictions for it to work. I have not adjusted my code. Thanks! – Leith 8/1, 2018 at 2:59

F

29

The solution for me was adding #xfbml=1&version=v2.12&autoLogAppEvents=1 after the xfbml.customerchat.js file like :

js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';

Fond answered 20/12, 2018 at 21:23 Comment(5)

If I can upvote 1000+ times for you, I will do it. You saved my life. – Girandole 4/1, 2019 at 12:9

Worked for me as well. – Astatine 10/1, 2019 at 12:39

Worked for me also – Madai 17/1, 2019 at 12:2

Worked for me. Anyone who copies this make sure to change the lang to en_US if you want english. – Indican 20/1, 2019 at 16:8

@Indican Thank you! I updated my example so it works for more people by default! – Fond 25/1, 2019 at 19:52

O

2

i solved my problem using this script :

<div class="fb-customerchat"
 page_id="<ENTER-YOUR-FACEBOOK-ID-HERE>"
 minimized="true">
</div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'facebook-developer-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
(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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="your-page-id"
  theme_color="#BE59B9">
</div>

Another case might be that, fb messenger only show when it it hosted, not locally.

For more info have a deep look at doumentation: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

Octangle answered 29/11, 2018 at 8:22 Comment(2)

Please explain what is happening. Documentation would be helpful. – Mallet 29/11, 2018 at 8:27

Where to get facebook-developer-app-id? – Spout 21/1, 2021 at 22:4

N

1

It is May 2018 now, the instruction in Page --> Settings --> Messenger platform --> Customer chat plugin is much more clear.

Plus checking Country Restrictions

Nowise answered 14/5, 2018 at 9:26 Comment(0)

T

1

I only added this code to the customer chat code provided in the page's settings:

    window.fbAsyncInit = function() {
    FB.init({
      appId            : '1175565702494581', // Trokis Philippines App ID; you may use your App ID but this App ID might work on you too.
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

Original Code:

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

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="{your-page-id}"
  theme_color="#BE59B9">
</div>

Final Code:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '1175565702494581',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
(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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="{your-page-id}"
  theme_color="#BE59B9">
</div>

Turne answered 19/12, 2018 at 1:3 Comment(1)

You dont need the <div id="fb-root"></div>? – Nu 19/12, 2018 at 13:5

N

1

Well, shamelessly it was the "Whitelisted Domains" that I didn't operate right.
After you insert your domain you should click "Save"...

Nu answered 26/12, 2018 at 11:24 Comment(0)

M

0

At first I tried with a code generated by Facebook Customer Chat Plugin wizard - no luck. To make it work I had to add FB.init section providing valid developer appId:

  <script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'YOUR-APP-ID-HERE',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.11'
        });
    };
    (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/pl_PL/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your customer chat code -->
  <div class="fb-customerchat"
    attribution=setup_tool
    page_id="YOUR-PAGE-ID-HERE"
    theme_color="#ed1d24"
    logged_in_greeting="Hello, how can we help you?">
  </div>

You can find more info on the Facebook Customer Chat Plugin here

Mainstream answered 29/11, 2018 at 20:56 Comment(0)

S

0

For me problem was, that i had whitelisted non www domain, but opened it through www. Both cases should be added as whitelist cases.

Sulphur answered 12/8, 2019 at 9:47 Comment(0)

G

0

If you are using brave and probably debugging the site with included messenger plugin code. Most likely you'll find setting Block cross-site trackers to be disabled, Block scripts to be disabled, Cookies to be Allow all cookies, and lastly Fingerprinting to Allow all fingerprinting be helpful.

Once you changed the settings and you find that you have no problem in your code, then it will be most likely to work.

Gainful answered 14/5, 2020 at 9:30 Comment(0)

S

0

If you are using Angular Framework you have to know that you need to add your code in the index.html page and not in the app or component. That solved my problem.

Spout answered 23/1, 2021 at 15:28 Comment(0)

V

0

Mine was because my "page visibility" was set to "page unpublished". So I resolved mine by changing the "page visibility" to "page published"

page setting->General->page visibility

Vomer answered 26/6, 2021 at 5:14 Comment(0)

T

0

Unfortunately this function has been deprecated by Facebook.

Facebook developer documentation says below. https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/

On May 9, 2024, you will no longer be able to access any of the functionality of the Chat Plugin. Effective immediately, Chat Plugin in guest mode is no longer available. Other features like m.me links will still be available for you to use.

Timbal answered 22/8, 2024 at 19:15 Comment(0)

L

-1

Found a solution. If anyone encounters this, please check your Facebook Page's Country Restrictions (Settings->General->Country Restrictions). It must be available everywhere in order for the plugin to render even if there is no active session

Leith answered 8/1, 2018 at 2:56 Comment(0)

Recommended topics

Hot tags