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

WordPressウェブサイト向けステップバイステップガイド

プラットフォーム:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

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

ステップ2：インストール方法を選択する

WordPressにチャットウィジェットを追加するにはいくつかの方法があります。最適な方法をお選びください：

方法1：プラグインの使用（推奨）

チャットウィジェットを追加する最も簡単な方法は、「Insert Headers and Footers」や「WPCode」などのプラグインを使用することです。

WPCodeの使用 (Free)

WordPress管理画面でプラグイン → 新規追加に移動します
「WPCode」を検索してインストールします
プラグインを有効化します
Code Snippets → Header & Footerに移動します
Asyntaiの埋め込みコードを「Footer」セクションに貼り付けます
「Save Changes」をクリックします

Insert Headers and Footersの使用

WordPress管理画面でプラグイン → 新規追加に移動します
WPBeginnerの「Insert Headers and Footers」を検索します
プラグインをインストールして有効化します
設定 → Insert Headers and Footersに移動します
Asyntaiの埋め込みコードを「Scripts in Footer」ボックスに貼り付けます
「保存」をクリックしてください

なぜプラグインを使用するのですか？ プラグインを使用すると、WordPressテーマを更新または変更した場合でもコードが保持されます。

方法2：テーマファイルの編集

テーマファイルに直接コードを追加することもできます。テーマファイルエディターの場所は、WordPressのバージョンとテーマの種類によって異なります。

クラシックテーマの場合

WordPress管理画面で外観 → テーマファイルエディターに移動します
ドロップダウンから有効なテーマを選択します（未選択の場合）
右側のファイル一覧からfooter.phpを見つけてクリックします
一番下までスクロールし、閉じタグ</body>を見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
「Update File」をクリックします

ブロックテーマ（FSEテーマ）の場合

ブロックベースのテーマ（Twenty Twenty-Fourなどのフルサイトエディティングテーマ）を使用している場合、テーマファイルエディターの場所が変更されています：

WordPress管理画面でツール → テーマファイルエディターに移動します
ドロップダウンから有効なテーマを選択します
ファイル一覧からfooter.phpまたはfooter.htmlを探します
閉じタグ</body>の前にAsyntaiの埋め込みコードを追加します
「Update File」をクリックします

注記: 一部のブロックテーマにはfooter.phpファイルがありません。その場合は、すべてのテーマタイプで動作するプラグイン方式（WPCode）をご利用ください。

重要: テーマの更新により変更が上書きされます。恒久的な対策として、子テーマまたはプラグイン方式をご利用ください。

方法3：Elementorの使用

Elementorを使用している場合、Elementorのカスタムコード機能を通じてコードを追加できます。

Elementor Pro

Elementor → Custom Codeに移動します
「Add New」をクリックします
「Asyntai Chatbot」のような名前を付けます
配置を「Before </body> End」に設定します
Asyntaiの埋め込みコードを貼り付けます
表示条件を「Entire Site」に設定します
「Publish」をクリックします

Elementor Free

Elementorの無料版を使用している場合は、上記のプラグイン方式をご利用ください。カスタムコードの挿入にはElementor Proが必要です。

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

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

ウィジェットが表示されませんか？ ブラウザキャッシュおよびWordPressのキャッシュプラグインをクリアしてください。WP RocketやW3 Total Cacheなどのキャッシュプラグインを使用している場合は、コード追加後にキャッシュをパージしてください。

AI 検索バーを追加する

AI 検索バーは独自のコードを持つ別のウィジェットです。チャットと一緒に追加しても、単独で追加してもかまいません。Standard 以上のプランが必要で、下位プランではバーは表示されますが結果は返りません。

script タグに data-replace 属性を追加すると、テーマにある既存の検索バーと置き換わります。チャット用コードで使ったのと同じヘッダー・フッター用プラグイン (Code Snippets や Insert Headers and Footers など) で追加してください。スクリプトは検索ボックスの近くにある必要がないため、テーマファイルを編集する必要はありません。

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

AI 検索バーの詳しいガイドを読む

ドキュメント