Messenger box: make it smaller (or give options)

I agree with this too. That would be a great additional option.

Hi Dave and Maarten! ( @davelo @maartenbelmans )

Thanks so much for your feedback here. I’ll certainly pass this along to my product team for their consideration.

Having said that, you may be able to make some CSS changes. Your theme may have a different class, though this is what seems to manage the messenger box width:

https://cloud.skyver.ge/2NujpEZb

Note that this doesn’t change the “Log in to Messenger” button width, you’d want to target a different class for that.

Is that helpful at all? Please do let me know.

Thanks so much!

Julie ??
SkyVerge

Hi @julieskyverge

Appreciate your quick reply on this! I’ll try it out, thank you.

@julieskyverge thanks for the reply. I can’t open the attached screenshot, the image isn’t loaded anymore…

@maartenbelmans – Sure thing, please do keep me posted!

@davelo – I didn’t have an issue opening the image. Here, try this:

https://ibb.co/99TJ6y1

Please let me know if that works.

Thank you both,

Julie ??
SkyVerge

Hi @julieskyverge,

I tried it with adding css, even via the !important; tag.
Added via the customizer, straight in the footer, etc
But no change…

So it’s easier said then being done…

Although i know my way in css; i still can’t seem to find how i can style-tweak the FB-part. Is it even possible, as it’s loaded via js.

Can you help me out here how to add css?
Of some links to manuals?

Hi @davelo,

Thanks for coming back to me here, I appreciate it!

Would you please be able to share your site URL and have Messenger enabled so I can take a look to see if I can help out? While third-party themes don’t fall under our support policy, I might be able to take a look to lend a hand.

Thanks so much,

Julie ??
SkyVerge

It’s this site: https://www.parelskumpen.be/
I added style (just 1 rule as a test) in the footer.

Hi Dave! ( @davelo )

I inspected the element in question in my browser dev tools and was able to change the width from 375px to 300px:

https://cloud.skyver.ge/geuqGWYy

You should be able to target this:

._94vf

And add:

._94vf {
width: 300px !important;
}

Something like that should do the trick.

That said, since it does seem to load from the Facebook side, it might depend when the stylesheet loads, as if you reference the style a second time in another stylesheet (like the Facebook one), the most recent one takes precedence.

Would you please let me know if that does the trick?

Thanks!

Julie ??
SkyVerge

Hey Dave. ( @davelo )

Haven’t heard from you in a bit, 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!

Julie ??
SkyVerge

sorry for the late reply: super busy here (covid, black friday).

Editing in a browser is easy, not in real code as this is an iframe.
It’s hard to get a grip on the style of an iframe.

Although i was pretty sure the suggested solution did not work, i tried it anyway.
I entered the css-code as you mentioned. Yes, even twice (header and footer), with !important.
No impact.
Logic; the iframe is not seen in the ‘source code’ of the page.

The only way of styling is directly onto the iframe (iframe { width: 300px}; but since everything inside has fixed widths; i makes no sense.

So, by that; i do hope the plugin gives the users more options to style; to make the box less in screen; for example the mobile version also on desktop.

Hey Dave! ( @davelo )

Got it, thanks so much for your feedback. I’ve made a note for the product team. While our friends at Automattic are taking over support and development of the plugin, more flexibility around the Messenger box is quite a popular request, so I’m certain they’ll take that into consideration.

Thanks again for your feedback!

Julie ??
SkyVerge