Add Custom Styles

Need to tweak the look of the ThriveDesk Assistant launcher? Here’s how to do it reliably.

Component CSS Class Reference

ThriveDesk uses a consistent naming convention for CSS classes: td-{feature}-{component-type}. Below are the key class names you can target in your custom styles.

The Challenge: Shadow DOM & Timing

The Assistant uses a feature called Shadow DOM. This keeps its styles separate from your website, preventing conflicts. However, it also means:

1. Your website's main CSS won't affect the Assistant.

2. You need to use JavaScript to add custom styles inside its Shadow DOM.

3. Crucially, you can only do this after the Assistant is fully loaded and ready on the page. Trying too early won't work.

The Solution: The tdAssistantConnected Event

To solve the timing issue, the ThriveDesk Assistant emits a custom event called tdAssistantConnected as soon as it's fully initialized and added to your page.

By "listening" for this event, you can safely access the Assistant's Shadow DOM and add your styles.

How to Do It:

Place this script tag on your page:

<script>
  document.addEventListener('tdAssistantConnected', (event) => {
    // event.target is the <thrivedesk-assistant> element
    const assistantElement = event.target;
    const shadowRoot = assistantElement.shadowRoot;

    if (shadowRoot) {
      // 1. Create a <style> element
      const customStyles = document.createElement('style');

      // 2. Add your CSS rules
      // Example: Move the launcher button
      customStyles.textContent = `
        /* Position the launcher button */
        .td-launcher {
          right: 100px !important;
          bottom: 50px !important;
        }

        /* Adjust the assistant window position */
        .td-assistant {
          right: 100px !important;
          bottom: 130px !important;
        }
      `;

      // 3. Append your styles to the Assistant's Shadow DOM
      shadowRoot.appendChild(customStyles);

      console.log('Custom styles applied to ThriveDesk Assistant.');
    } else {
      console.error('ThriveDesk Assistant shadowRoot not found.');
    }
  });
</script>

Why This Method?

• Reliability: Your styling code only runs when the Assistant is definitely ready.

• Correct Scope: Styles are correctly applied within the Assistant's encapsulated Shadow DOM.

This approach ensures your custom styles are applied effectively without interfering with the rest of your page or the Assistant's internal operations.

Commonly Used CSS Classes

The following table lists some of the most commonly used CSS classes:

CSS Class	Description
.td-assistant	Main Assistant Window
.td-header	Header section of the assistant
.td-body	Main content area
.td-footer	Footer section with navigation
.td-card	The widget cards on the home page
.td-launcher	Main container for the launcher
.td-launcher__icon	Icon within the launcher button
.td-launcher__text	Text shown in the launcher
.td-livechat	Main Livechat container
.td-contact	Main Contact Form container
.td-order	Main Order Status container
.td-kb	Main Knowledge Base container

Why Not Just querySelector and Style?

While you could try something like this:

// Potentially unreliable approach
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);
}

This approach has a higher risk of failure due to timing:

• Script Execution Order: If this script runs before the <thrivedesk-assistant> element is defined and upgraded by the browser, document.querySelector('thrivedesk-assistant') might return null or an uninitialized element.

• shadowRoot Availability: Even if the element is found, its shadowRoot might not be attached immediately. The connectedCallback (where the tdAssistantConnected event is fired) is the guaranteed point at which the element is part of the DOM and set up.

Using the tdAssistantConnected event ensures that your styling logic runs only after the component is fully ready, making your customizations more robust and reliable.

Important Notes

• Use !important in your CSS rules to ensure they override the default styles

• Test your customizations across different browsers and devices

• Your styles will be applied each time the Assistant loads on your page

• CSS variables (custom properties) defined on the :host can also be overridden for consistent theming