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

MODX CMSウェブサイト向けのステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

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

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

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

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

ステップ2：MODXテンプレートに追加（推奨）

チャットボットを追加する推奨方法は、MODX ManagerでMODXテンプレートを直接編集することです：

MODX Manager（管理パネル）にログインしてください
左サイドバーで、Elements > Templatesに移動してください
サイトのテンプレート（通常は"BaseTemplate"またはアクティブなテンプレート）を開いてください
</body>閉じタグを見つけます
閉じ</body>タグの直前にAsyntai埋め込みコードを貼り付けてください
「保存」をクリックしてテンプレートを保存してください

<!-- Your existing template content -->

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

ヒント: 閉じ</body>タグの直前にコードを追加することで、すべてのページコンテンツの後にチャットボットが読み込まれます。これはチャットウィジェットの推奨配置であり、ページの読み込みを遅くしません。

代替方法1：MODX Chunkを使用

MODX Chunkを使用して、埋め込みコードを分離して再利用可能にできます：

MODX ManagerでElements > Chunksに移動してください
「New Chunk」をクリックして新しいチャンクを作成してください
Chunkに"asyntaiWidget"と名前を付けてください
Asyntai埋め込みコードをChunkのコンテンツエリアに貼り付けてください
「保存」をクリックしてください
テンプレート（Elements > Templates内）を開いてください
閉じ</body>タグの直前にChunk呼び出し[[$asyntaiWidget]]を追加してください
テンプレートを保存します

<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

ヒント: Chunkを使用することで、特にサイト全体で複数のテンプレートを使用している場合に、埋め込みコードを一箇所で簡単に管理・更新できます。

代替方法2：MODXシステム設定を使用（HTML Head/Footer）

一部のMODXセットアップでは、システム設定を通じてフッタースクリプトのプレースホルダーが含まれています：

MODX ManagerでSystem > System Settingsに移動してください
"htmlhead"でフィルタリングするか、フッタースクリプト用のカスタムシステム設定を検索してください
セットアップにフッタースクリプト用のプレースホルダー（[[++footer_scripts]]など）がある場合は、それを使用できます
システム設定の値をAsyntai埋め込みコードに設定してください
対応するプレースホルダー[[++footer_scripts]]がテンプレート内の閉じ</body>タグの前にあることを確認してください
システム設定を保存してください

<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

注記: この方法は、MODXセットアップにフッタースクリプト用のカスタムシステム設定があることに依存します。存在しない場合は、カスタムシステム設定を作成し、[[++setting_key]]構文を使用してテンプレートで参照できます。

代替方法3：MODXプラグインを使用（OnWebPagePrerender）

高度な方法として、すべてのページにチャットボットコードを自動的に挿入するMODXプラグインを作成できます：

MODX ManagerでElements > Pluginsに移動してください
「New Plugin」をクリックして新しいプラグインを作成してください
プラグインに"AsyntaiChatbot"と名前を付けてください
以下のPHPコードをプラグインのコードエリアに貼り付けてください：

$output = &$modx->resource->_output;
$script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
$output = str_replace('</body>', $script . '</body>', $output);

"System Events"タブをクリックしてください
"OnWebPagePrerender"の横のチェックボックスをオンにして、このイベントでプラグインを実行するようにしてください
「保存」をクリックしてください

重要: YOUR_WIDGET_IDをAsyntaiダッシュボードの実際のウィジェットIDに置き換えてください。このプラグインは、MODXサイトのすべてのページがレンダリングされる前に、チャットボットスクリプトを自動的に挿入します。

ステップ3：キャッシュをクリアして確認する

上記のいずれかの方法で埋め込みコードを追加した後、MODXキャッシュをクリアしてインストールを確認する必要があります：

MODX ManagerでManage > Clear Cacheに移動してください（またはトップメニューのキャッシュクリアアイコンをクリック）
ウェブサイトを新しいブラウザタブまたはシークレットウィンドウで開いてください
ページの右下にチャットウィジェットボタンが表示されるはずです
クリックして正しく開き、正常に動作することを確認してください

ウィジェットが表示されませんか？ MODX ManagerのManage > Clear CacheからMODXキャッシュをクリアしたことを確認してください。また、ブラウザのキャッシュをクリアするか、シークレットウィンドウでサイトを表示してみてください。プラグイン方式を使用した場合は、プラグインの"OnWebPagePrerender"システムイベントがチェックされていることを確認してください。