0

everybody,

I am using wordpress to create an eCommerce website and install plugin for tidio chat. I would like to adjust the position (bottom) for tidio chat,currently is 0px but i found that it is using iframe and i cannot change it by add custom css.

<iframe title="Tidio Chat" id="tidio-chat-iframe" style="display: block; border: none; position: fixed; width: 112px; height: 140px; opacity: 1; left: auto; right: 0px; bottom: 0px; top: auto; background: none transparent; margin: 0px; max-height: 100vh; max-width: 100vw; transform: translateY(0px); transition: none 0s ease 0s; visibility: visible; z-index: 999999999 !important;"></iframe>

What is the code to add in javascript, i try many times to add in code but still fail, anyone can help me about this issue? Thank you so much.

Airket
  • 9
  • 2
  • 1
    Possible duplicate of [Using CSS to affect div style inside iframe](https://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe) – Mystical Jan 26 '19 at 03:52
  • 1
    thanks for your feedback, i will go check and study – Airket Jan 26 '19 at 06:45

1 Answers1

2

It's possible to move the whole iframe itself, but this can only work for the desktop version of the widget (moving the mobile one will make it exceed the screen boundaries).

Try using this style code in the header of the site:

<style>
#tidio-chat iframe { bottom: 3.5em !important; }
@media only screen and (max-width: 980px) {
    #tidio-chat iframe { bottom: 0px !important; }
}
</style>

The first line is responsible for moving the widget, so you can play around with the values to position the chat as desired. The second and third line are responsible for excluding the mobile widget from being moved, so I'd recommend leaving them unchanged.

Hope this helps :)

Martin Iwaszko
  • 21
  • 1