Apple Business Chat and Facebook Messenger buttons misaligned and overlapping

New Member
1 0 1

Now that the Apple Business Chat tool is available, I love-hate it. It's an awesome tool, but the positioning of the chat button is terrible for 2 reasons: 1) The Apple Chat button is not aligned with the FB Messenger button. 2) When positioned in the same corner, one button overlaps the other.

 

Does anyone have a solution to this? Is there some code that can be modified to customize the position of the chat buttons? I would like both chat buttons floating in the bottom right corner, but not overlapping each other. Just neatly tucked away in one corner.

 

Right now, I have the Apple Business Chat set to the bottom right and the FB Messenger set to the bottom left. It works, but the FB Messenger button is about 25px higher - its driving me nuts. Also, having floating buttons scattered about looks sloppy.

 

Ideally, I would like to keep the left and right corner setting for mobile but have both buttons at the bottom right for desktop and tablet.

 

Please share your input, I am all ears!

1 Like
Highlighted
Explorer
63 13 17

Hi, @ZenZephyr7. Can you share your store url?

Thanks for reading, don’t forget to like and subscribe!
Wrong outro - Click Like and Accept as Solution if it was helpful and help other to find the answer ?
0 Likes
New Member
2 0 1

I think I have a great solution for you if you're using Customer Chat, not the default Shopify Messenger button.

 

Apple Business Chat only loads when you're on OSX or iOS, so the key is to load FB Messenger Customer Chat when it's not OSX or iOS. Here's the code to do that. It can be placed in your theme.liquid instead of your existing Customer Chat code.

 

Keep in mind you'll need to add your Page ID from FB where it says "!!!NOTE ADD YOUR FB PAGE ID HERE IN QUOTES!!!" below and make sure your page is whitelisted by Facebook. One way to easily do this is to go to your FB Page --> Settings --> Messenger Platform --> Set Up Customer Chat.

 

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

(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 -->

<!-- Check whether user is on a mac -->

<script id='not mac'>
function test() {

var isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);

if (!isMacLike) {
document.body.innerHTML += '<div class="fb-customerchat" page_id="!!!NOTE ADD YOUR FB PAGE ID HERE IN QUOTES!!!" greeting_dialog_display="fade" greeting_dialog_delay=10> </div>';
}
}
test()
</script>

1 Like