Facebook Messenger Customer Chat Plugin not appearing when not logged in

Question

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.

https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#login seems to indicate it should still show up, so you're going to need to show us an example or some code. — ceejayoz, Jan 08 '18 at 02: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! — roundhousekick, Jan 08 '18 at 02:59

losted · Answer 1 · 2019-01-21T14:54:43.390

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';

edited Jan 21 '19 at 14:54

answered Dec 20 '18 at 21:23

losted

420
5
14

2

If I can upvote 1000+ times for you, I will do it. You saved my life. – Dao Minh Duc Jan 04 '19 at 12:09
Worked for me as well. – zur4ik Jan 10 '19 at 12:39
Worked for me also – pakalbekim Jan 17 '19 at 12:02
1

Worked for me. Anyone who copies this make sure to change the lang to en_US if you want english. – Monstr92 Jan 20 '19 at 16:08
@Monstr92 Thank you! I updated my example so it works for more people by default! – losted Jan 25 '19 at 19:52

Narayan Shrestha · Answer 2 · 2019-12-02T08:06:34.427

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

Please explain what is happening. Documentation would be helpful. — Ronnie Oosting, Nov 29 '18 at 08:27

score 1 · Answer 3 · answered May 14 '18 at 09:26

1

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

Plus checking Country Restrictions

answered May 14 '18 at 09:26

vanduc1102

5,769
1
46
43

score 1 · Answer 4 · answered Dec 19 '18 at 01:03

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>

chenop · Answer 5 · 2019-01-07T11:21:22.043

1

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

edited Jan 07 '19 at 11:21

answered Dec 26 '18 at 11:24

chenop

4,743
4
41
65

score 0 · Answer 6 · answered Nov 29 '18 at 20:56

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

score 0 · Answer 7 · answered Aug 12 '19 at 09:47

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.

answered Aug 12 '19 at 09:47

Andris

3,895
2
24
27

score 0 · Answer 8 · answered May 14 '20 at 09:30

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.

score 0 · Answer 9 · answered Jan 23 '21 at 15:28

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.

answered Jan 23 '21 at 15:28

Ahmad Alhaj-Karim

184
8

score 0 · Answer 10 · answered Jun 26 '21 at 05:14

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

answered Jun 26 '21 at 05:14

ovo

61
3

score -1 · Answer 11 · answered Jan 08 '18 at 02:56

-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

answered Jan 08 '18 at 02:56

roundhousekick

129
1
1
4

Facebook Messenger Customer Chat Plugin not appearing when not logged in

11 Answers11

Linked