DocusaurusにAsyntai AIチャットボットを追加する方法

Docusaurusドキュメントサイトのためのステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

ステップ1：埋め込みコードを取得する

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください：

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：docusaurus.config.jsにスクリプトを追加（推奨）

Docusaurusサイトのすべてのページにチャットボットを追加する最良の方法は、設定ファイルを使用することです：

コードエディターでDocusaurusプロジェクトを開きます
プロジェクトルートのdocusaurus.config.jsファイルを見つけて開きます
const config = { }オブジェクトを見つけます
Asyntaiウィジェットでscriptsフィールドを追加または更新します：

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

docusaurus.config.jsファイルを保存します
npm run buildまたはyarn buildを実行してサイトを再ビルドします
ローカルで実行している場合は開発サーバーを再起動します

ヒント: scriptsフィールドはJavaScriptソースの配列を受け入れます。scriptタグはすべてのページのHTMLヘッドに自動的に挿入されます。これはDocusaurusサイトにとって最もクリーンで保守しやすい方法です。

代替方法1：文字列フォーマット（よりシンプルな構文）

よりシンプルなアプローチを好む場合は、scripts配列で文字列フォーマットを使用できます：

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

注記: 文字列フォーマットを使用する場合、スクリプトURLにウィジェットIDをクエリパラメータとして含めるように変更するか、ステップ2に示されたオブジェクトフォーマットを使用してdata-asyntai-id属性を直接設定する必要があります。

代替方法2：カスタムヘッドタグ

docusaurus.config.jsのheadTagsフィールドを使用してスクリプトを追加することもできます：

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

ヒント: headTagsフィールドは、<head>セクションに挿入される正確なHTMLタグをより細かく制御できます。この方法はscriptsフィールドの使用と機能的に同等です。

代替方法3：カスタムHTMLテンプレート（上級者向け）

HTMLテンプレートを完全に制御する必要がある上級者向け：

新しいディレクトリを作成します：src/theme（存在しない場合）
ファイルを作成します：src/theme/Root.js
スクリプトを動的にインジェクトするために以下のコードを追加します：

import React, { useEffect } from 'react';

export default function Root({children}) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.head.appendChild(script);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

ファイルを保存してサイトを再ビルドします

重要: Root.jsコンポーネントはアプリケーション全体をラップします。この上級者向け方法は、カスタムJavaScriptロジックが必要な場合や、設定ファイルアプローチでは満たせない特定の要件がある場合にのみ使用してください。

代替方法4：フッターコンポーネントのSwizzle

フッターをカスタマイズしてスクリプトを含めることができます：

swizzleコマンドを実行します：npm run swizzle @docusaurus/theme-classic Footer -- --eject
これにより、src/theme/Footer/にフッターコンポーネントのコピーが作成されます
フッターコンポーネントを編集してscriptタグを含めます
フッターの閉じタグの前にスクリプトを追加します
保存してサイトを再ビルドします

注記: Swizzleを使用するとDocusaurusコンポーネントを完全に制御できますが、そのコンポーネントを自分で保守する必要があります。Docusaurusのアップデートでは、swizzleされたコンポーネントは自動的に更新されません。

ステップ3：ビルドとデプロイ

コードを追加した後、Docusaurusサイトをビルドしてデプロイします：

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

ヒント: 開発中は、npm startまたはyarn startを実行してローカルで変更をプレビューしてください。チャットボットはすべてのページの右下に表示されます。

ステップ4：インストールの確認

変更をデプロイした後、新しいブラウザタブでドキュメントサイトを開いてください。右下にチャットウィジェットボタンが表示されます。クリックして正しく開いて動作することを確認してください。

ウィジェットが表示されませんか？ 変更後にサイトを再ビルドしたことを確認してください。YOUR_WIDGET_IDをダッシュボードから取得した実際のウィジェットIDに置き換えたことを確認してください。ブラウザのキャッシュをクリアするか、シークレットモードで表示してください。ブラウザコンソール（F12）を開いてJavaScriptエラーがないか確認してください。