埋め込まれた Shopify アプリを React と Shopify Polaris で構築している場合は、ThriveDesk Assistant を直接 Shopify 管理者に統合できます。これにより、商人は管理パネルを離れることなくカスタマーサポートにアクセスでき、アプリ内でシームレスで途切れのないサポート体験を作成します。

アシスタントコンポーネントを作成する

新しいファイル Assistant.tsx （または JavaScript を使用していない場合は Assistant.jsx）を React プロジェクトに作成します。

次のコードをコンポーネントにコピーしてください：

import { useEffect } from 'react';

interface AssistantInterface {
  (method: 'init', options?: any, defaultOpen?: boolean): void;

  readyQueue?: Array<{
    method: string;
    options?: any;
    data?: any;
  }>;
}
declare global {
  interface Window {
    Assistant?: AssistantInterface;
  }
}


const Assistant = () => {

  const ASSISTANT_ID = "YOUR_ASSISTANT_ID_HERE";

  useEffect(() => {
    // 複数のスクリプト挿入を防ぐ
    if (window.Assistant) return;

    if (!window.Assistant) {
      window.Assistant = function (method: string, options?: any, data?: any) {
        (window?.Assistant?.readyQueue || []).push({ method, options, data });
      };
      window.Assistant.readyQueue = [];
    }

    // ブートローダースクリプトを読み込む
    const script = document.createElement('script');
    script.src = "https://assistant.thrivedesk.com/bootloader.js?" + Date.now();
    script.async = true;
    script.onload = () => {
      // スクリプトが読み込まれた後にアシスタントを初期化
      if (window.Assistant) {
        window.Assistant("init", ASSISTANT_ID);
      }
    };

    document.body.appendChild(script);
  }, []);

  return null;
};

export default Assistant;

アシスタント ID を追加する

ThriveDesk アプリを開き、アシスタントインストールページに移動し、アシスタント IDをコピーします。

image.png

"YOUR_ASSISTANT_ID_HERE" を Assistant.tsx コンポーネント内の実際の ThriveDesk アシスタント ID に置き換えます。

const ASSISTANT_ID = "a0542be2-5a5c-4afd-a5a7-687ae356aa36";

アプリにコンポーネントを追加する

app/root.tsx ファイルを開き、アシスタントコンポーネントをインポートし、ボディ要素内にコンポーネントを追加します。

<body>
  {/* 残りのコンテンツ */}
  <Assistant />
</body>

さて、これで完了です。あなたのアシスタントは Shopify 管理者内にあります。🎉

image.png

問題がありますか？

インストールまたは設定プロセス中に問題が発生した場合は、私たちがサポートします。メールまたはメッセージでお気軽にお問い合わせください。私たちのサポートチームが迅速に問題を解決します。あなたの成功が私たちの優先事項であり、スムーズな統合体験を確保することにコミットしています。

TypeScriptを使用していない場合は、型注釈を削除してください：