スタイルのオーバーライド

アシスタントの全体的なスタイルや特定の領域をオーバーライドしたい場合、このガイドが役立ちます。

アシスタントはシャドウDOMと呼ばれる機能を使用しています。これにより、スタイルがあなたのウェブサイトから分離され、競合を防ぎます。しかし、これはまた次のことを意味します：

1. あなたのウェブサイトのメインCSSはアシスタントに影響を与えません。

2. カスタムスタイルをアシスタントのシャドウDOMの内部に追加するには、JavaScriptを使用する必要があります。

3. 重要なのは、アシスタントがページ上で完全に読み込まれ、準備が整った後にのみこれを行うことができるということです。早すぎると機能しません。

解決策： tdAssistantConnected イベント

タイミングの問題を解決するために、ThriveDeskアシスタントは、完全に初期化されてページに追加されるとすぐに、tdAssistantConnectedというカスタムイベントを発行します。

このイベントを「リッスン」することで、アシスタントのシャドウDOMに安全にアクセスし、スタイルを追加できます。

やり方：

このスクリプトタグをあなたのページに配置してください：

コピー

<script>
  document.addEventListener('tdAssistantConnected', (event) => {
    // event.targetは<thrivedesk-assistant>要素です
    const assistantElement = event.target;
    const shadowRoot = assistantElement.shadowRoot;

    if (shadowRoot) {
      // 1. <style>要素を作成
      const customStyles = document.createElement('style');

      // 2. CSSルールを追加
      // 例：ランチャーボタンを移動
      customStyles.textContent = `
        /* ランチャーボタンの位置 */
        .td-launcher {
          right: 100px !important;
          bottom: 50px !important;
        }

        /* アシスタントウィンドウの位置を調整 */
        .td-assistant {
          right: 100px !important;
          bottom: 130px !important;
        }
      `;

      // 3. アシスタントのシャドウDOMにスタイルを追加
      shadowRoot.appendChild(customStyles);

      console.log('カスタムスタイルがThriveDeskアシスタントに適用されました。');
    } else {
      console.error('ThriveDeskアシスタントのshadowRootが見つかりません。');
    }
  });
</script>

なぜこの方法なのか？

• 信頼性: あなたのスタイリングコードは、アシスタントが確実に準備が整ったときにのみ実行されます。

• 正しいスコープ: スタイルはアシスタントのカプセル化されたシャドウDOM内で正しく適用されます。

このアプローチは、あなたのカスタムスタイルがページの他の部分やアシスタントの内部操作に干渉することなく効果的に適用されることを保証します。

一般的に使用されるCSSクラス

以下の表は、最も一般的に使用されるCSSクラスのいくつかを示しています：

なぜ querySelector とスタイルだけではダメなのか？

このようなことを試すことはできるかもしれませんが：

// 潜在的に信頼性の低いアプローチ
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);
}

このアプローチはタイミングのために失敗するリスクが高くなります：

• スクリプト実行順序: このスクリプトが<thrivedesk-assistant>要素がブラウザによって定義され、アップグレードされる前に実行されると、document.querySelector('thrivedesk-assistant')はnullまたは初期化されていない要素を返す可能性があります。

• shadowRootの可用性: 要素が見つかった場合でも、そのshadowRootがすぐに接続されるわけではありません。connectedCallback（tdAssistantConnectedイベントが発火する場所）は、要素がDOMの一部であり、セットアップされていることが保証されるポイントです。

tdAssistantConnectedイベントを使用することで、コンポーネントが完全に準備が整った後にのみスタイリングロジックが実行されることが保証され、カスタマイズがより堅牢で信頼性の高いものになります。

重要な注意事項

• デフォルトスタイルを上書きするために、CSSルールで!importantを使用してください

• 異なるブラウザやデバイスでカスタマイズをテストしてください

• アシスタントがページに読み込まれるたびにスタイルが適用されます

• :hostで定義されたCSS変数（カスタムプロパティ）も、一貫したテーマに対して上書きできます