https://i.sstatic.net/SZPd9.png I've gone ahead and whitelisted the domains on our Facebook page, as well as generated the chat widget. However, despite disabling all content blockers, the code seems to have no visible effect on the page.
Unfortunately, due to limitations with our CMS, we're unable to add code to the head/start or end of body sections.
In an attempt to troubleshoot, I referred to the following guides: https://medium.com/@jamesfuthey/how-to-add-facebook-live-chat-to-your-website-dd48fc8bb066 &&
This involved creating a developer app and utilizing an APP_ID, but unfortunately, this method also did not yield the desired results. You can view the unsuccessful attempt here:
I even tried manually adding the script to the page in the correct location:
var facebookWidget = `
<div class="fb-customerchat" page_id="127611563950728"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '383830712455959',
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>
`;
$('body').prepend(facebookWidget);
Furthermore, I attempted to copy and modify the code from with the sample page accessible here:
However, I encountered issues related to the iframe origin policy being blocked (despite my efforts to adjust the code IDs and domains accordingly).
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; width: 0px; height: 0px;">
<iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://staticxx.faceboo...
<p>In one final attempt, I visited the Facebook page to regenerate the code, only to find that it is no longer functional. A video demo showcasing the issue can be viewed here:
<a href="https://tinytake.s3.amazonaws.com/pulse/d-manicx100/attachments/9953495/TinyTake20-02-2019-10-31-20.mp4" rel="nofollow noreferrer">https://tinytake.s3.amazonaws.com/pulse/d-manicx100/attachments/9953495/TinyTake20-02-2019-10-31-20.mp4</a></p>
<p>Below is the originally generated code with a custom theme color:</p>
<pre><code>...
Preview available at: