Facebook Messenger Displayed Behind Other Elements

[ArmshouseGroup]

Hi there,

I’m trying to add the following Facebook Messenger code to my site. I’ve used a ‘Classic Raw Content’ element to do this as Facebook say it needs to be within the ‘body’ portion.

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.2'
    });
  };

  (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_GB/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="459666607799361"
  theme_color="#44bec7"
  logged_in_greeting="Hi! Do you need any help at all?"
  logged_out_greeting="Hi! Do you need any help at all?">
</div>

Whilst the code works OK and the messenger shows up on the page, it ends up floating behind other elements on the page and makes it hard to use. Any ideas of how I can change this?

Please visit https://kerrykspmu.uk/contact for an example of what I mean.

Many thanks,
AG

[thai]

Hi AG,

Please change the z-index option of the section contains the Facebook Messenger to: 99

Hope it helps

[ArmshouseGroup]

Hey Thai,

Thanks for the tip. It didn’t seem to do change anything as you can see from the screenshot.

Any other suggestions?
AG

[ArmshouseGroup]

It’s OK… I moved the code into the column and it was OK after that.

Thank you.
AG

[paul.r]

You’re most welcome AG!