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

ProcessWire CMSウェブサイトのステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

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

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

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

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

ステップ2：テンプレートファイルに追加（推奨）

ProcessWireはsite/templates/ディレクトリにあるPHPテンプレートファイルを使用します。最も簡単な方法は、メインテンプレートファイルに埋め込みコードを直接追加することです：

FTP、SSH、またはファイルマネージャーでProcessWireインストールファイルにアクセスしてください
site/templates/に移動してください
メインテンプレートファイルを開いてください — サイトプロファイルに応じて、通常は_main.phpまたはbasic-page.phpです
遅延出力戦略（ほとんどのサイトプロファイルのデフォルト）を使用している場合は、_main.phpを開いてください
</body>閉じタグを見つけます
その直前にAsyntai埋め込みコードを貼り付けてください：

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

ヒント: 閉じ</body>タグの直前にスクリプトを配置することで、ページコンテンツの後にチャットボットが読み込まれます。これは最適なパフォーマンスのために推奨され、ページのレンダリングを遅くしません。

代替方法1：_foot.incまたは_main.php追加ファイルを使用

ProcessWireサイトが追加ファイルアプローチ（多くのサイトプロファイルで一般的）を使用している場合は、共有フッターインクルードに埋め込みコードを追加できます：

site/templates/に移動してください
_foot.inc（または同等のフッターインクルードファイル）を開いてください
閉じ</body>タグの直前にAsyntai埋め込みコードを貼り付けてください
ファイルを保存します

ProcessWireの遅延出力戦略は、通常3つの主要ファイルで機能します：

_init.php — すべてのテンプレートの前に実行され、変数を初期化します
テンプレートファイル（例：basic-page.php） — コンテンツ変数を設定します
_main.php — これらの変数を使用して最終的なHTMLマークアップを出力します

サイトがこのアプローチを使用している場合、_main.phpの</body>の前にスクリプトを追加すると、すべてのページに表示されます。

注記: ファイル名_init.phpと_main.phpは、site/config.phpの$config->prependTemplateFileと$config->appendTemplateFile設定で構成されています。ファイル名が異なる場合は、設定を確認してください。

代替方法2：$config->scripts配列を使用

ProcessWireは、JavaScriptファイルを管理するために使用できる$config->scripts FilenameArrayを提供しています。_init.phpまたは個別のテンプレートファイルに追加してください：

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

次に、_main.php（またはフッターインクルード）でスクリプト配列をループして出力してください：

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

重要: $config->scriptsアプローチはスクリプトのsrc属性を処理しますが、data-asyntai-id属性は別途処理する必要があります。ループ出力でdata属性を手動で追加するか、最もシンプルなセットアップとしてステップ2の直接scriptタグ方式を使用してください。

代替方法3：フック（ready.php）を使用

より高度な方法として、ProcessWireのフックシステムを使用して、すべてのページにチャットボットスクリプトを自動的に挿入できます。site/ready.phpファイルに以下を追加してください：

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

このフックは、すべてのページのレンダリングされたHTML出力をインターセプトし、閉じ</body>タグの直前にAsyntaiスクリプトを自動的に挿入します。

ヒント: ready.phpフックアプローチは、テンプレートファイルを変更せずにすべてのページにチャットボットを表示したい場合に最適です。テンプレートファイルの外部にあるため、テンプレートの変更やテーマの更新後も維持されます。

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

変更を保存した後、新しいブラウザタブまたはシークレットウィンドウでProcessWireサイトにアクセスしてください。右下にチャットウィジェットボタンが表示されるはずです。クリックして正しく開き、正常に動作することを確認してください。

ウィジェットが表示されませんか？ 変更したすべてのファイルを保存したことを確認してください。ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。ProcessWireのテンプレートキャッシュが有効な場合は、Modules → Core → Template Engine Cacheに移動するか、URLに?nocache=1を追加してクリアする必要がある場合があります。また、表示しているページでテンプレートファイルが実際に使用されていることを確認してください。