Chat widget CSS

(Sioulis Nick) #1

Hi there!

I need help with 2 issues that I have with web chat widget positioning.
I have read the article here: https://support.flowxo.com/article/276-customizing-the-web-messenger
and I am trying to change the height of the chat icon.
First issue:
I am adding this at my css:
.fxo-widget-iframe {
bottom: 80px;
}
and it changes the height on my desktop icon but not on my mobile device view. Do you have separate CSS classes for mobile divices?

Second issue:
I tried to change the position to the left as mention in the above article:
.fxo-widget-iframe {
left: 20px;
z-index: 99999 !important;
}

  .fxo-messenger-iframe-container {
    left: 0px;
    z-index: 99999 !important;
  }

  .fxo-messenger-iframe {
    left: 0px;
    margin-left: 0px !important;
    margin-right: 23px;
  }

Now the chat-widget is going left (both mobile and desktop!) but when the welcome message "fxo-widget-popover " appears it pushes all the chat-widget to the middle until the fxo-widget-popover-welcome gone.

Can these two get fixed?

thank you in advance for your support!

(Sioulis Nick) #2

I fixed the first about height issue by adding:
padding-bottom: 50px;

it seems that the “bottom” CSS was getting replaced from source code, now everything works fine!
Now only the 'the welcome message "fxo-widget-popover " ’ issue i cant find what to revise so dont pushes all the chat-icon to the right