edit - Just search through all the post with 'fb-customerchat' and even trying out their codes with my app id, somehow none of it works
I have been trying to add a Facebook Customer Chat into a website.
This is the link I have followed so far, this is the ways link that I have tried so far and nothing works.
Codes below is the place at the very top of the view after the default @{ ViewBag.Title = "About"; }
Default generated codes have been removed
The console.log do fired and 'fb-messengermessageus' is able to work but 'fb-customerchat is not showing'
I have tested on Google Chrome with Adblock on & off, Firefox with Protections for localhost on & off, Microsoft Edge. I am using ngrok to public the localhost, I have created 2 FB Dev Test App with one putting localhost:port as my site URL, another one with the link generated by ngrok, facebook page 'Whitelisted Domains' is also entered with the same link generated by ngrok but nothing works so far.
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'app-id',
autoLogAppEvents: true,
xfbml: true,
version: 'v7.0'
});
// Fire an event when the FB library asynchronously is loaded
$("#fb-root").trigger("facebook:init");
// Additional initialization code here
FB.CustomerChat.show(shouldShowDialog = true);
FB.CustomerChat.showDialog();
};
(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#xfbml=1&version=v7.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<!-- Your Chat Plugin code -->
<div class="fb-customerchat"
page_id="page-id"
theme_color="#459645"
logged_in_greeting="Hi! How can we help you?"
logged_out_greeting="GoodBye!... Hope to see you soon."
minimized="false">
</div>
<div class="fb-messengermessageus"
messenger_app_id="messenger-app-id"
page_id="page-id"
color="white"
size="large">
</div>
<script>
$(document).ready(function () {
$("#fb-root").bind("facebook:init", function () {
console.log("The event is fired FB SDK object is ready to be used.");
});
});
</script>
