The Most Frustrating Problem I had to Solve TWICE (prologue – skip this if you just want the answer)
There is going to be a lot of deep seeded anger throughout this post (rant) so bear with me. It's not really directed at anyone (except, maybe, at myself).
So I added Facebook Messenger as a Customer Chat plugin to one of our client's sites. Should be straight forward, I've done it before, except that this time there is some weird behaviour with the plugin.
The site loads fine, a moment later, the chat pops up. I notice it glitches a little and seems to load once, then flicker and load again. "No biggy", I say to myself, "I can just look it up, probably a common problem".
So, thing is, as it turns out, this is not a common problem. What’s worse is that Facebook, in their infinite wisdom, has chosen the most generic names possible for their products: “Messenger” and “Customer Chat”. Try Googling those words as brand names … !@$@#$#@%#$%
In the end, I don’t find squat so I quit. I managed (thank goodness) to figure out the issue on my own through Inspector and breaking things using JavaScript.
Here’s the really infuriating part. After I fixed the issue, I forgot about it for a few weeks until it came up on another project. I had COMPLETELY forgotten what the hell I did and started Googling “Messenger Customer Chat problem” all over again. LIKE AN IDIOT!
Fortunately, this time I was able to look through my old code (once I could remember which other project I had already solved the issue on) and it only took me about one hour, instead of several, to solve it. Then I thought to myself “I’m going to write this down so that I remember for next time”.
A Description of the Problem
Like I said above, the chat popup would load but then would glitch and appear to load again. I also couldn’t minimize it and attempts to do so would result in it popping back up again.
When I took the code and created a test page with nothing on it, it seemed to load and work just fine. The Facebook code wasn’t the issue, it was something else on my page.
This project was also using a premade template that my team and I had modified so there was a lot of code that wasn’t built by us.
I eventually narrowed the issue down to one of the CSS files. I was pretty surprised that a CSS issue would be causing the problem, I had originally suspected a JS file or plugin to be the source of the conflict.
The Culprit
Even though I had figured out that the problem was with the CSS, it took me a little while to search and test the entire file before I was able to narrow down where in the file the problem resided.
It turned out to be something to do with the way this template was handling iframes.
The Solution
The CSS file was applying width: 100%; to all iframes. I don’t know why the author didn’t limit this to a specific class but this caused Customer Chat to behave unpredictably.
All I did was figure out what element the author actually intended to target and limit the scope to a specific class so that it would no longer affect Facebook’s Messenger plugin.
I uploaded the code to the server, tried it out again and everything was working as intended.
A Deeper Explanation of the Problem
The Facebook Messenger snippet you grab from their site is obviously not the entirety of the code that gets loaded when you install the plugin. When the code is triggered, Facebook sends additional JavaScript code that “creates” the chat interface.
Part of this interface is dependent on iframes to connect up to Facebook’s server. By making a CSS rule that affects all iframes, the Customer Chat plugin got modified.
My guess is that Facebook has additional code to prevent people from messing with their plugins so it triggers some sort of extra code to reload the plugin and override the CSS changes. Unfortunately, this causes some weird behaviour and prevents the user from minimizing the plugin.
Conclusion
Hopefully this post helps someone else and keeps them from going through the same frustrating exercise. At the very least, I’m hoping that my typing this up will at least remind me of how to fix this issue, should it ever arise again.
