# Add Custom Styles

### Component CSS Class Reference <a href="#component-css-class-reference" id="component-css-class-reference"></a>

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:

```html
<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 <a href="#component-css-classes" id="component-css-classes"></a>

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? <a href="#why-not-just-queryselector-and-style" id="why-not-just-queryselector-and-style"></a>

While you *could* try something like this:

```javascript
// 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 <a href="#important-notes" id="important-notes"></a>

* 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.thrivedesk.com/assistant/assistant-for-web/add-custom-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.