{"id":287475,"date":"2024-12-24T17:09:08","date_gmt":"2024-12-24T17:09:08","guid":{"rendered":"https:\/\/gfssite.local\/como-mostrar-el-widget-de-tidio-solo-en-determinadas-paginas\/"},"modified":"2024-12-24T17:09:08","modified_gmt":"2024-12-24T17:09:08","slug":"como-mostrar-el-widget-de-tidio-solo-en-determinadas-paginas","status":"publish","type":"post","link":"https:\/\/globalfinanceschool.com\/es\/como-mostrar-el-widget-de-tidio-solo-en-determinadas-paginas\/","title":{"rendered":"C\u00f3mo mostrar el widget de Tidio solo en determinadas p\u00e1ginas"},"content":{"rendered":"<div class=\"article-body\">\n<p>En Tidio, puedes cambiar la posici\u00f3n del widget entre el lado derecho e izquierdo de tu interfaz de administraci\u00f3n de Tidio. Si desea mover y mostrar el widget un poco m\u00e1s arriba o m\u00e1s abajo, puede hacerlo aplicando el c\u00f3digo CSS personalizado que explicamos en este art\u00edculo. <\/p>\n<p>Tenga en cuenta que existen diferentes opciones para diferentes versiones de su widget en Tidio: la versi\u00f3n de escritorio, la versi\u00f3n m\u00f3vil y la barra lateral.<\/p>\n<p><strong>En este art\u00edculo aprender\u00e1s:<\/strong><\/p>\n<h2 id=\"left-right-position\">Posici\u00f3n horizontal (izquierda\/derecha)<\/h2>\n<p>Puedes cambiar la posici\u00f3n izquierda\/derecha del widget de chat en el escritorio yendo a la <strong>secci\u00f3n de configuraci\u00f3n<\/strong>&gt; <strong>chat en vivo<\/strong>&gt; <strong>Apariencia<\/strong> en la interfaz de administraci\u00f3n de Tidio, donde puedes encontrar la opci\u00f3n <strong>de ubicaci\u00f3n del widget<\/strong> (dentro de la pesta\u00f1a <strong>Apariencia<\/strong> ):<\/p>\n<p class=\"wysiwyg-text-align-center\"><img decoding=\"async\" src=\"https:\/\/live-msl.local\/wp-content\/uploads\/2024\/10\/%D7%9E%D7%99%D7%A7%D7%95%D7%9D-%D7%94-Widget-Tidiocom.webp\" alt=\"posici\u00f3n 2024-04-11 a las 14.23.20.png\" title=\"\"><\/p>\n<div class=\"note_box\">\n<p>Consejo: si desea que el widget aparezca en una p\u00e1gina determinada solo a ciertas horas del d\u00eda, puede combinar el cambio de posici\u00f3n con un script JavaScript que verificar\u00e1 la hora y actualizar\u00e1 el CSS en consecuencia.<\/p>\n<\/p><\/div>\n<h2 id=\"higher-lower-position-\">Posici\u00f3n vertical (alta\/baja)<\/h2>\n<p>Se requiere la implementaci\u00f3n de un c\u00f3digo CSS personalizado si desea mover nuestros \u00edconos de chat un poco m\u00e1s arriba o m\u00e1s abajo. Aplicar el c\u00f3digo le permitir\u00e1 mover el widget de chat una cantidad personalizada de espacios. <\/p>\n<p>Si no est\u00e1 seguro de d\u00f3nde colocar el c\u00f3digo o acceder a su c\u00f3digo fuente, le recomendamos que se comunique con su desarrollador web para que lo ayude con la implementaci\u00f3n.<\/p>\n<h3 id=\"how-to-use-the-css-code-\">C\u00f3mo utilizar el c\u00f3digo CSS<\/h3>\n<p>Para mover el widget, agregue el c\u00f3digo que se muestra a continuaci\u00f3n al encabezado del sitio, justo encima de una etiqueta&lt; <strong>\/cabeza<\/strong>&gt; el soporte<\/p>\n<p>La primera l\u00ednea <strong>del iframe #tidio-chat<\/strong> activa la ubicaci\u00f3n del widget tanto en dispositivos m\u00f3viles como de escritorio.<\/p>\n<p>La segunda y tercera l\u00edneas permiten mover el widget s\u00f3lo en dispositivos m\u00f3viles (pasan por alto la primera regla) y tambi\u00e9n permiten especificar el tama\u00f1o de pantalla deseado. Si solo desea mover el widget para dispositivos m\u00f3viles, cambie solo estas l\u00edneas, o mire el c\u00f3digo de arriba, si desea mover el chat solo en el escritorio. <\/p>\n<p>El valor de desplazamiento est\u00e1 representado por <strong>&#8216;px&#8217;<\/strong> .<\/p>\n<p>La direcci\u00f3n del movimiento est\u00e1 definida por el primer valor entre par\u00e9ntesis { }:<\/p>\n<p><strong>top<\/strong> &#8211; significa \u00ablejos de la cima\u00bb<\/p>\n<p><strong>abajo<\/strong> &#8211; significa \u00ablejos del fondo\u00bb<\/p>\n<p><strong>izquierda<\/strong> &#8211; significa \u00ablejos del lado izquierdo\u00bb<\/p>\n<p><strong>derecha<\/strong> &#8211; significa \u00ablejos del lado derecho\u00bb<\/p>\n<p>Usar un valor de px negativo (por ejemplo, configurarlo en -100px) lo mover\u00e1 en la direcci\u00f3n opuesta, por lo que si escribe abajo: -100px en el c\u00f3digo, el chat se mover\u00e1 hacia abajo 100px en el sitio.<\/p>\n<div class=\"note_box\">\n<p>Un ejemplo pr\u00e1ctico: si tienes un banner publicitario en la parte superior del sitio, puedes usar CSS para mover el widget hacia abajo para que no oculte el banner.<\/p>\n<\/p><\/div>\n<h2 id=\"additional-customization\">Personalizaci\u00f3n adicional<\/h2>\n<p>Adem\u00e1s de cambiar la ubicaci\u00f3n del widget, existen otras opciones para personalizar el widget de Tidio. Estas opciones incluyen: <\/p>\n<ul>\n<li><strong>Cambiar colores:<\/strong> puede cambiar los colores del widget para que coincidan con el dise\u00f1o general de su sitio web.<\/li>\n<li><strong>Cambio de tama\u00f1o:<\/strong> puede cambiar el tama\u00f1o del widget para que se ajuste al lugar donde lo coloque.<\/li>\n<li><strong>Agregar un logotipo:<\/strong> puede agregar su logotipo personal al widget para fortalecer su marca.<\/li>\n<li><strong>Configuraci\u00f3n de mensajes de bienvenida:<\/strong> puede configurar mensajes de bienvenida personalizados que recibir\u00e1n los usuarios cuando abran el widget.<\/li>\n<\/ul>\n<h3 id=\"color-customization\">cambiando colores<\/h3>\n<p>Para cambiar los colores del widget, vaya a la secci\u00f3n <strong>Configuraci\u00f3n<\/strong>&gt; <strong>chat en vivo<\/strong>&gt; <strong>Se muestra<\/strong> en su interfaz de administraci\u00f3n. All\u00ed puedes elegir diferentes colores para el fondo, el texto y los botones del widget. <\/p>\n<h3 id=\"size-customization\">Cambiar tama\u00f1o<\/h3>\n<p>Cambiar el tama\u00f1o del widget tambi\u00e9n se realiza en la misma secci\u00f3n. Puede configurar la altura y el ancho del widget para que se ajuste al lugar donde desea colocarlo. <\/p>\n<h3 id=\"logo-customization\">Agregar un logotipo<\/h3>\n<p>Para agregar un logotipo, busque la opci\u00f3n para agregar un logotipo en la interfaz de administraci\u00f3n de Tidio. Sube tu logo y guarda los cambios. <\/p>\n<h3 id=\"welcome-message-customization\">Configurar mensajes de bienvenida<\/h3>\n<p>Para configurar los mensajes de bienvenida, vaya a la secci\u00f3n <strong>Configuraci\u00f3n<\/strong>&gt; <strong>chat en vivo<\/strong>&gt; <strong>Notificaciones<\/strong> en su interfaz de administraci\u00f3n. All\u00ed podr\u00e1s agregar mensajes personalizados que ser\u00e1n recibidos por los usuarios. <\/p>\n<h2 id=\"conclusion\">Resumen<\/h2>\n<p>Reposicionar y personalizar el widget de Tidio es un proceso simple que puede mejorar la experiencia del usuario en su sitio web. Siguiendo las instrucciones de este art\u00edculo, puede personalizar el widget para adaptarlo a sus necesidades y las de sus usuarios. <\/p>\n<p>Si tiene m\u00e1s preguntas o necesita m\u00e1s ayuda, no dude en ponerse en contacto con el soporte de Tidio o con un desarrollador web profesional.<\/p>\n<p>    <a href=\"https:\/\/help.tidio.com\/hc\/en-us\/articles\/5464851341724-Widget-Position\" target=\"_blank\" rel=\"noopener\">Enlace fuente<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En Tidio, puedes cambiar la posici\u00f3n del widget entre el lado derecho e izquierdo de tu interfaz de administraci\u00f3n de Tidio. Si desea mover y mostrar el widget un poco m\u00e1s arriba o m\u00e1s abajo, puede hacerlo aplicando el c\u00f3digo CSS personalizado que explicamos en este art\u00edculo. Tenga en cuenta que existen diferentes opciones para [&hellip;]<\/p>\n","protected":false},"author":9274,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17027],"tags":[17028,13807],"class_list":["post-287475","post","type-post","status-publish","format-standard","hentry","category-guias-guia-tidio","tag-guia-tidio","tag-guias"],"_links":{"self":[{"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/posts\/287475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/users\/9274"}],"replies":[{"embeddable":true,"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/comments?post=287475"}],"version-history":[{"count":0,"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/posts\/287475\/revisions"}],"wp:attachment":[{"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/media?parent=287475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/categories?post=287475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/globalfinanceschool.com\/es\/wp-json\/wp\/v2\/tags?post=287475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}