Si deseas anular el estilo general del Asistente o cualquier área específica, esta guía te ayudará.

El Asistente utiliza una característica llamada Shadow DOM. Esto mantiene sus estilos separados de tu sitio web, evitando conflictos. Sin embargo, también significa:

  1. El CSS principal de tu sitio web no afectará al Asistente.

  2. Necesitas usar JavaScript para agregar estilos personalizados dentro de su Shadow DOM.

  3. Crucialmente, solo puedes hacer esto después de que el Asistente esté completamente cargado y listo en la página. Intentar demasiado pronto no funcionará.

La Solución: El tdAssistantConnected Evento

Para resolver el problema de temporización, el Asistente de ThriveDesk emite un evento personalizado llamado tdAssistantConnected tan pronto como está completamente inicializado y agregado a tu página.

Al "escuchar" este evento, puedes acceder de manera segura al Shadow DOM del Asistente y agregar tus estilos.

Cómo Hacerlo:

Coloca esta etiqueta de script en tu página:

Copiar

<script>
  document.addEventListener('tdAssistantConnected', (event) => {
    // event.target es el elemento <thrivedesk-assistant>
    const assistantElement = event.target;
    const shadowRoot = assistantElement.shadowRoot;

    if (shadowRoot) {
      // 1. Crear un elemento <style>
      const customStyles = document.createElement('style');

      // 2. Agregar tus reglas CSS
      // Ejemplo: Mover el botón de lanzamiento
      customStyles.textContent = `
        /* Posicionar el botón de lanzamiento */
        .td-launcher {
          right: 100px !important;
          bottom: 50px !important;
        }

        /* Ajustar la posición de la ventana del asistente */
        .td-assistant {
          right: 100px !important;
          bottom: 130px !important;
        }
      `;

      // 3. Agregar tus estilos al Shadow DOM del Asistente
      shadowRoot.appendChild(customStyles);

      console.log('Estilos personalizados aplicados al Asistente de ThriveDesk.');
    } else {
      console.error('ShadowRoot del Asistente de ThriveDesk no encontrado.');
    }
  });
</script>

¿Por Qué Este Método?

  • Fiabilidad: Tu código de estilo solo se ejecuta cuando el Asistente está definitivamente listo.

  • Ámbito Correcto: Los estilos se aplican correctamente dentro del Shadow DOM encapsulado del Asistente.

Este enfoque asegura que tus estilos personalizados se apliquen de manera efectiva sin interferir con el resto de tu página o las operaciones internas del Asistente.

Clases CSS Comúnmente Usadas

La siguiente tabla enumera algunas de las clases CSS más comúnmente utilizadas:

Clase CSS

Descripción

.td-assistant

Ventana Principal del Asistente

.td-header

Sección de encabezado del asistente

.td-body

Área principal de contenido

.td-footer

Sección de pie de página con navegación

.td-card

Las tarjetas de widget en la página de inicio

.td-launcher

Contenedor principal para el lanzador

.td-launcher__icon

Ícono dentro del botón del lanzador

.td-launcher__text

Texto mostrado en el lanzador

.td-livechat

Contenedor principal de Livechat

.td-contact

Contenedor principal del formulario de contacto

.td-order

Contenedor principal del estado del pedido

.td-kb

Contenedor principal de la base de conocimientos

¿Por qué no simplemente querySelector y estilo?

Mientras que podrías intentar algo como esto:

// Enfoque potencialmente poco fiable
const assistant = document.querySelector('thrivedesk-assistant');
if (assistant && assistant.shadowRoot) {
  const styleTag = document.createElement('style');
  styleTag.textContent = '.td-launcher-button-container { right: 100px !important; }';
  assistant.shadowRoot.appendChild(styleTag);
}

Este enfoque tiene un mayor riesgo de fallo debido al tiempo:

  • Orden de Ejecución del Script: Si este script se ejecuta antes de que el elemento <thrivedesk-assistant> esté definido y actualizado por el navegador, document.querySelector('thrivedesk-assistant') podría devolver null o un elemento no inicializado.

  • shadowRoot Disponibilidad: Incluso si se encuentra el elemento, su shadowRoot podría no estar adjunto de inmediato. El connectedCallback (donde se dispara el evento tdAssistantConnected) es el punto garantizado en el que el elemento es parte del DOM y está configurado.

Usar el evento tdAssistantConnected asegura que tu lógica de estilo se ejecute solo después de que el componente esté completamente listo, haciendo que tus personalizaciones sean más robustas y fiables.

Notas Importantes

  • Usa !important en tus reglas CSS para asegurarte de que anulen los estilos predeterminados

  • Prueba tus personalizaciones en diferentes navegadores y dispositivos

  • Tus estilos se aplicarán cada vez que el Asistente se cargue en tu página

  • Las variables CSS (propiedades personalizadas) definidas en el :host también pueden ser anuladas para un tema consistente