Posición del Widget

En Tidio, puedes cambiar la posición del widget entre los lados derecho e izquierdo en el panel de administración de Tidio. Si deseas mover y mostrar el widget un poco más arriba o abajo, puedes hacerlo implementando un código CSS personalizado, el cual explicamos en este artículo.

Ten en cuenta que hay opciones separadas para las diferentes versiones de tu widget de Tidio: la versión de escritorio, la versión móvil y la Barra lateral.

In this article, you'll learn:

• Cómo cambiar la posición del widget horizontalmente (izquierda/derecha)
• Cómo cambiar la posición del widget verticalmente (arriba/abajo)

Posición Horizontal (izquierda/derecha)

Puedes cambiar la posición a la izquierda o derecha de tu widget de chat de escritorio yendo a la sección Ajustes > Chat en vivo > Apariencia en el panel de control de Tidio, donde encontrarás la opción Posición del widget (dentro de la pestaña Apariencia):

Se requiere una implementación de código CSS personalizado si deseas mover los íconos de chat un poco más arriba o abajo. La implementación de este código te permitirá ajustar el widget de chat una cantidad personalizada de espacios. 

Si no estás seguro de dónde colocar el código o cómo acceder a la fuente de código de tu sitio, te recomendamos contactar a tu desarrollador web para que te ayude con la implementación. 

Cómo usar el código CSS 

Para mover el widget, agrega el código que se muestra a continuación en el encabezado del sitio web, directamente encima de la etiqueta de cierre </head>.

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

La primera línea #tidio-chat iframe controla la ubicación del widget tanto en dispositivos de escritorio como en móviles. 

La segunda y tercera línea controlan el movimiento del widget solo en dispositivos móviles (esto anula la primera regla), permitiendo especificar el tamaño de pantalla objetivo también. Si solo deseas mover el widget en dispositivos móviles, cambia solo esas líneas; o revisa el código anterior si deseas mover el chat solo en escritorio.

El valor del movimiento se representa en 'px'.

La dirección del movimiento se define mediante el primer valor entre las llaves { }:

top - significa "alejarse de la parte superior"

bottom - significa "alejarse de la parte inferior"

left - significa "alejarse de la izquierda"

right - significa "alejarse de la derecha"

Usar un valor negativo de px (por ejemplo, configurarlo en -100px) moverá el widget en la dirección opuesta. Por ejemplo, si escribes bottom: -100px, el chat se desplazará hacia abajo 100 píxeles en el sitio web.