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

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

埋め込みコードの取得

プラットフォーム:

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

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

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

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

ステップ2：レイアウトテンプレートを編集する（推奨）

すべてのページにチャットボットを追加する最も簡単な方法は、メインレイアウトテンプレートを編集することです：

Access your Craft CMS project files via FTP, SSH, or your code editor
templates/ディレクトリに移動します
メインレイアウトファイルを見つけます（一般的に_layout.twig、_layout.htmlという名前、またはtemplates/_layouts/内にあります）
</body>閉じタグを見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します

ヒント: </body>閉じタグの前にスクリプトを追加することで、ページコンテンツの後に読み込まれます。これはチャットウィジェットに推奨される方法で、ページの読み込みを遅くしません。

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMSにはJavaScriptを登録するための組み込みTwigタグがあります：

メインレイアウトテンプレートを開きます
</body>閉じタグの前に以下のコードを追加します：
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
ファイルを保存します

注意: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

代替方法：別のインクルードファイルを作成する

より良い整理のために、専用のインクルードファイルを作成します：

新しいファイルを作成します：templates/_includes/chatbot.twig（または.html）
このファイルにAsyntaiの埋め込みコードを追加します：
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
メインレイアウトテンプレートの</body>の前にこのファイルをインクルードします：
{% include '_includes/chatbot' %}
両方のファイルを保存します

ヒント: インクルードファイルを使用すると、1行をコメントアウトするだけでサイト全体のチャットボットの有効/無効を簡単に切り替えられます。

代替方法：条件付き読み込み

特定のページやセクションでのみチャットボットを読み込むには：

レイアウトまたはページテンプレートでTwigの条件文を使用します：
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
または特定のセクションを確認します：
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

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

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

ウィジェットが表示されませんか？ テンプレートファイルを保存したこと、ページが使用している正しいレイアウトテンプレートを編集していることを確認してください。ブラウザキャッシュをクリアするか、シークレットウィンドウで表示してください。テンプレートキャッシュを使用している場合は、コントロールパネルのユーティリティ > キャッシュのクリアからCraft CMSのキャッシュをクリアしてください。

テンプレートの場所： Craft CMSのテンプレートの場所はプロジェクトの設定によって異なります。一般的な場所にはtemplates/_layout.twig、templates/_layouts/main.twig、templates/_base.twigがあります。既存のテンプレートを確認して、</body>タグが定義されている場所を見つけてください。