Positioning the Chat bar (JavaScript)

user_5830595 0
Viewed 3365

I put a script code onto my website, the chat bar appears at bottom of the page, but I need to put the bar into a specific position like coordination of x = 55 y = 90;

Do you have any to process this ?

Here is the code given by the provider,

Thanks in Advance!

<div class = "chat">
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/.../default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</div>

That chat represents your css codes, thanks in advance

css html javascript
4 Answers

I also used Tawk service and was not able to spend tons of time to try to customize the external styles. I will explain my findings.

  1. Tawk devs have own feedback tool and they already have several requests on make it flexible to adjust the positioning or style of the bubble: see here, here and here.
  2. Simply overriding the CSS style wouldn't work as I already mentioned because they force the styles via style attribute on each iframe injected with the loaded js code. style has higher priority in the HTML parser logic of the browser over CSS. Also they use !important and I understand their reasoning - it's important to ensure the consistency of the style in any environment (aka website) it should be appearing in.
  3. You may use JS code on the load. For example I used Reactjs module react-load-script on which you can use custom callback function when the external source is loaded. Then you may do something like
      let iframes = document.querySelectorAll("iframe[title='chat widget']")

      for (let f of iframes) {
        if (f.style.bottom === "auto") {
          f.style.bottom = "150px"
        } else {
          const pxBottom = Number.parseInt(f.style.bottom)
          f.style.bottom = pxBottom + 30 + "px"
        }
      }

to force the updated styles. But. Here's the stone under feet: on the scroll to bottom or the top of the page the script forces updates on the style of the same widget. So I unminified/prettified the source code which is loading and can assure you that's way too much of work to do something on this level.

Conclusion: I used the custom positioning of the bubble set to the middle of the viewport, not to the bottom. Ugly, but works as a temporary fix.

user_15983550
user_77778020
Related