Positioning the Chat bar (JavaScript)

Question

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

Like facebook chat. It's at the bottom of page, But I need to change its place. — NewPHPer, Mar 11 '16 at 08:03

score 2 · Accepted Answer · answered Mar 11 '16 at 08:34

2

I recommend you using CSS styling for that. You've got 2 options so far.

1. Use a fixed position

.chat {
  position: fixed;
  top: 90px;
  left: 55px;
}

Keep in mind, that if you do so your bar will always stick to its position. This happens 'cause of your fixed position, which means the position is in relation to your window.

2. Use absolute position

With an absolute positioning you can achieve the exact same thing, except of positioning your element in relation to its parent container. So you may place container, in which you also place your chat bar, with an absolute position.

.chat {
  position: absolute;
  top: 90px;
  left: 55px;
}

I would, in your case, recommend using absolute, since fixed will commonly be used for Headers and Footers. Anyways, you are free to explore yourself which one fits to your needs.

answered Mar 11 '16 at 08:34

Aer0

3,792
17
33

First of all, Thank you for your response, I tried both, but It doesn't work. Do you have any other idea ? – NewPHPer Mar 11 '16 at 09:04
Hey NewPHPer, would you mind providing some HTML markup in a small fiddle, including your JavaScript code? Would be much easier to help at all. – Aer0 Mar 11 '16 at 09:06
I updated the code, maybe I have something wrong with divs – NewPHPer Mar 11 '16 at 09:11
Well ... you have any information for us, about how your final html looks? I actually don't know what library or framework you are using and I have no idea about what markup is getting generated. – Aer0 Mar 11 '16 at 10:48
@NewPHPer it is because Tawk is lazy loading own CSS styles and uses `style` attribute on `iframe`s - it has higher priority over css styles, so I'm trying to figure out how do I position the bubble more pixels up as well. One of the solutions would be to use pure JS to `document.querySelectorAll("iframe[title='chat widget']")` and then do something with their styles, but it does not fix another issue when the page is scrolled to the bottom - then somehow the `tawkchat-container` suddenly updates those styles back to initial. Annoying, but Tawk devs have already requests on changing this... – boldnik Aug 05 '20 at 16:47
@Aer0 did you test your solution for Tawk or it is a general suggestion? Can you please include the solution for Tawk because I can't find an easy way with CSS only. – boldnik Aug 06 '20 at 09:00
@boldnik this question/answer is pretty old and it doesn't really cover Tawk at all, it's more like a general solution. In case you couldn't find anything yourself you might want to start a question on your own. – Aer0 Aug 06 '20 at 09:05
@Aer0 unfortunately you didn't help NewPHPer who was still telling that none of suggested solutions worked. I don't understand why your answer was marked as correct then. In the code snippet it clearly shows that the chat system is called Tawk, so it's directly related to the question. I doubt NewPHPer wanted a general solution which does not work for him/her. Am I not right? SO was created with aim to help each other with very specific problems, not just general solutions which one may find somewhere else in tutorials or books. Am I not correct? – boldnik Aug 06 '20 at 19:52
I guess this is what you are looking for. https://stackoverflow.com/questions/68420905/style-the-tawk-to-chat-widget-with-my-custom-css/68420906#68420906 Also it you find this usefull do accept my comment as a soluion it will help others in the future. @boldnik You are right they are updating the styles of the widget as soon as the widget is loaded/minimized etc. – Danish Shaikh Jul 17 '21 at 13:46

score 1 · Answer 2 · answered Aug 05 '20 at 17:40

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.

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.
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.
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.

score 0 · Answer 3 · answered Mar 11 '16 at 08:16

0

Try to add this code to your css

main {
      position: fixed;
      top: 50px !important;
      right: 0 !important;
      box-sizing: content-box;
    }

answered Mar 11 '16 at 08:16

Ahmed

1,666
17
23

First of all, thank you so much, But it doesn't work – NewPHPer Mar 11 '16 at 08:33

score 0 · Answer 4 · answered Jul 17 '21 at 13:39

0

I was also facing the same issue and I am able to figure out on how we can override their default css with our custom css.

Style the Tawk.to chat widget with my custom css

answered Jul 17 '21 at 13:39

Danish Shaikh

474
3
14

Positioning the Chat bar (JavaScript)

4 Answers4