Livechat Script (omnichannel) removes style attribute from body

Community Support
1

When you add the Livechat script (omnichannel) to a web page when the html loads it then removes anything from the main pages style attribute on body!

This needs fixing. I assume a JS selector is being used without being specific to the dom element it should relate to which is in the iframe.

Anyone else have this issue?

1 Like
2

I have the same problem

3

Not seen this reported anywhere else.

Can you confirm which version you are using?

Please test on latest 3.15.x and let us know.

4

I am running 3.15.0.
If i have “body id=“page-top” style=“background-color: grey;” then it just becomes “body id=“page-top” style=””
I keep my version up to date with whats released on snaps and it has been like this every update so far.

5

I can’t see anything in the widget that would override your body styling?

I have the widget on a few sites and have never seen it myself.

6

Since I was sure the JS for the widget was at fault, I decided to debug this myself. I’m not sure how you state there’s nothing there that would override the body style.

See below snippet from rocketchat-livechat.min.js, the fault is in bold. The ‘s’ variable is not set at that point hence the inline style becomes blank on script execution. I have not analysed the whole JS script but I prooved this by replacing ‘s’ with “background-color: red;” and it sets my background to red overriding whatever was there before. This is from a quick 5 mins look so appologies if I have missed something and I hope this helps you.

p && t ? (d = document.documentElement.scrollTop, s = document.body.style.cssText, document.body.style.cssText += “overflow: hidden; height: 100%; width: 100%;”) : (document.body.style.cssText = s, p && (document.documentElement.scrollTop = d)), t ? (r.style.left = p ? “0” : “auto”, r.style.width = p ? “100%” : “”.concat(397, “px”), r.style.height = p ? “100%” : “”.concat(627, “px”)) : (r.style.left = “auto”, r.style.width = “”.concat(86, “px”), r.style.height = “”.concat(86, “px”))

7

Can you confirm you added the JS at the correct place JUST before </body> ?

8

Yes it is the last script entered on the page just before the closing body.

I haven’t studied that rocketchat-livechat.min.js in detail however document.body.style.cssText would affect the main page regardless wouldn’t it? So based on that the if statement using document.body.style.cssText = s when ‘s’ isn’t set will never be the correct action unless I am missing something.

9

Also I have tested with the following HTML. This has exactly the same problem, inline style attribute is set to “” rather than being left as “background-color: red;”. Again I dont see how any settings will affect this, the JS function being used with a variable that is null is the cause.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Test</title>   
</head>

<body id="page-top" style="background-color: red;">
    <h1>Test 1</h1>
    <!-- Start of Rocket.Chat Livechat Script -->
    <script type="text/javascript">
        (function(w, d, s, u) {
            w.RocketChat = function(c) { w.RocketChat._.push(c) }; w.RocketChat._ = []; w.RocketChat.url = u;
            var h = d.getElementsByTagName(s)[0], j = d.createElement(s);
            j.async = true; j.src = 'https://<domain>/livechat/rocketchat-livechat.min.js?_=201903270000';
            h.parentNode.insertBefore(j, h);
        })(window, document, 'script', 'https://<domain>/livechat');
    </script>
</body>
</html>
10

Hmmm. I haven’t ever seen this happen.

I’ve asked someone who might know. Please be patient while I try and find and answer.

11

No problem, thanks for looking into it.
I also had a customer who had a rocket chat server and wanted the widget on their site but when they added it the same thing happened. I worked around it but its not ideal.

I’ll wait to hear back.

12

Yes very odd as I have it on a couple of sites with no issue!!

Someone will let me know in due course and I’ll report back.

13

Out of curiosity is the rocket chat server a self hosted one? Also do you have a style attribute set on the body tag or just styles that apply to body?

14

Ahhh - I can see it now. Just tried in a simple site.

Hmmm. Interesting. I need to speak to a dev about that.

Can you leave it with me - we may need a bug, but let me check first.

15

I think this is the one:

16

Yes same thing, what is the next step?

17

See if I can get the Product Team to get it fixed PDQ!

I have already raised it. It will probably miss the current sprint unless it has already been picked up.

I will check if it is already in hand or not - probably tomorrow

1 Like
18

Thanks for your attention to the problem, John! :handshake:

19

No worries. I have raised the bug internally.

I can’t say when it will get fixed but it will get done.

1 Like
20

Thanks John, appreciate the time and effort.