Move the messenger popup on mobile

Hi @ireeps

Thanks for getting in touch about our Facebook plugin. I’m happy to help out here ??

While there aren’t currently any settings to change the position of the Messenger window, you can certainly move this with a bit of custom CSS.

Customizations are not covered under our support policy, so implementing this isn’t something I can assist with directly.

However, I’d recommend that for this situation, you look into using the CSS below, which nudges the icon to the top a little. Nudging up might get it hidden by the messenger box, so you’ll need to play around with css a bit to position it for your site.

.fb_dialog, .fb_dialog_advanced, .fb_customer_chat_bubble_animated_no_badge, .fb_customer_chat_bubble_pop_in {
        bottom: 85px !important;
}

If you need help adding custom CSS to your site, please check out this guide: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Please also note that Facebook suggest not changing the default position of the Chat Plugin from the bottom-right corner of your page, so doing so would be at your own risk.

Does this help?

Thanks!
Christine

Thanks Christine. I’ll implement this today ??

I tried this on 2 diferent sites, and neither of them reflected a change. They both opened up in the same position.

Hi @ireeps

I’m so sorry about that! Looks like the classes for Facebook’s chat bubble have possibly changed.

This snippet should work for now although, although Facebook could change this again in the future:

/* The following is to move the chat bubble */
.fb_dialog_content > iframe {
  bottom: 25pt !important;
}

/* The following is to move the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
  bottom: 65pt !important;
}

iframe.fb_customer_chat_bounce_out_v2 {
  bottom: 65pt !important;
}

As a dramatic example, here’s how it looks on my test site: https://cloud.skyver.ge/eDuBXRGy

You’ll need to adjust the position based on your site. Could you try this and let me know if it works?

Thanks!
Christine

P.S. Again, customizations aren’t covered by our support policy and moving the chat bubble isn’t recommended by Facebook so doing so is at your own risk.

Thanks Christine.. This isnt reflecting on my site either…
Will this work on mobile? or is it only for desktop?

It moves the bubbble and chat box on desktop, but my issue is only on mobile..

https://reepa.com/waxmelts.png

I need to move this box up

• This reply was modified 4 years, 7 months ago by ireeps.

Hi @ireeps

Have you tried clearing the cache than refreshing on mobile to see if it works?

The snippet works for my test site at a mobile breakpoint also, here’s an example: https://cloud.skyver.ge/d5uEnnNk

Something else you could try is using your browser’s inspect tool to target the chat bubble element at certain breakpoints. It might give you more insight on if you need to target specific attributes for your site.

As customization for your specific site is beyond our scope of support, it might help to try reaching out on Facebook’s development forums as well: https://developers.facebook.com/community/

I hope this helps! Is there anything else I could help with?

Thanks!
Christine

Hi @christineskyverge

I have tried clearing cache.. I’m not sure if you’ve looked at the screenshot i provided here: https://reepa.com/waxmelts.png
On mobile, when first loaded, it has a horizontal bar, not the round bubble, and I am not able to duplicate this on a desktop to use the inspect tools.
If you click on the bar to open the popup, and then close, it minimises down to the round bubble that I an control using the above code.

Hi @ireeps

I did indeed look at your screenshot ?? As the snippet isn’t a direct customization for your site, there may be other attributes that might need to be targeted for your specific scenario.

I should note that the snippet was tested on a default theme and while it works for some people, it might not work for everyone. If the snippet doesn’t work, it could act as a starting point that you could use to look into it deeper. I’m really sorry I wasn’t more clear about this!

As customizations are not covered under our support policy, so I can’t help with your site directly. However, I took a quick look at waxmelts.com.au and I don’t see the chat bubble anymore. Was it disabled?

If it helps, I could take a quick look again and recommend next steps. Could you let me know if that would be helpful?

Thanks,
Christine

Thanks Christine… the plugin is still active, and Im not sure why you coulnd’t see it.

I have this installed on 2 different sites, running 2 different themes, and have the same result.

If you could have another look, it would be most appreciated ??

Hi @ireeps

I’m sorry if I’m missing something here, however, I’m not seeing the chat bubble on this webpage: waxmelts.com.au

Please see the screenshot of my browser here: https://cloud.skyver.ge/geuz7Gb5

Could you confirm that the chat bubble is showing up on your end?

Thanks so much!

Christine

Yes, it is showing here. see screenshot:

https://reepa.com/waxmelts08092020.png

Hi @ireeps

Interesting, for some reason the chat bubble doesn’t pop up for me either on my phone, so I can’t take a look directly on your site.

However, there’s a Facebook resource for customizing the chat bubble that might help. You can check it out here: https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin#customization

I’m sorry I can’t offer more assistance here, though I hope you find this helpful nonetheless. Is there anything else I can help out with?

Thanks,
Christine

Hi CHristine.

I think I figured out why you couldnt see it. There was a js conflict after a recent theme update. I’v corrected this.

Would it be too much trouble to have another look?

Rob

Hi @ireeps

I’m so sorry for the back and forth again! I still can’t see the messenger on your waxmelt site and have tried on multiple devices and browsers.

I hope that the resources I provided thus far have been some sort of help at least.

To recap:

Facebook resource for customizing the chat bubble that might help. You can check it out here: https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin#customization

Facebook’s development forums: https://developers.facebook.com/community/

And using your browser’s inspect tool to target the bubble at certain breakpoints the simulate a mobile size.

I’m sorry I can’t be of more assistance here! I can certainly check again to see if the chat bubble if you make any changes. Otherwise, is there anything else I could help with?

Thanks,
Christine

• This reply was modified 4 years, 6 months ago by Christine, SkyVerge Support.
• This reply was modified 4 years, 6 months ago by Christine, SkyVerge Support.

Hey @ireeps,

It has been a while since we heard from you, so I’m going to mark this topic as resolved. If you’re still experiencing issues please take a look at our documentation for more information and create a new thread if you have further questions.

Thanks,
Ian