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

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

プラットフォーム:

ステップ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：インストール方法を選択する

StatamicはAntlersとBladeの両方のテンプレートエンジンに対応しています。使用しているテンプレートエンジンに応じて方法を選択してください：

方法1：Antlersレイアウト（推奨）

チャットボットを追加する最も簡単な方法は、メインレイアウトファイルに含めることです。StatamicはデフォルトのテンプレートエンジンとしてAntlersを使用しています。

Statamicプロジェクトのresources/viewsディレクトリに移動します
レイアウトファイル（通常は layout.antlers.html）を開きます
</body>閉じタグを見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

  <!-- Asyntai Chatbot -->
  <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>
</body>
</html>

ヒント: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

方法2：Bladeレイアウト

AntlersではなくBladeテンプレートを使用している場合は、次の手順に従ってください：

Statamicプロジェクトのresources/viewsディレクトリに移動します
Bladeレイアウトファイル（例：layout.blade.php）を開きます
</body>閉じタグを見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

  <!-- Asyntai Chatbot -->
  <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>
</body>
</html>

注記: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

方法3：パーシャルを使用する

より良い整理のために、チャットボット用の再利用可能なパーシャルを作成できます：

ステップ1：パーシャルを作成する

resources/views/partials/_chatbot.antlers.htmlに新しいファイルを作成します
このファイルにAsyntaiの埋め込みコードを追加します：
 <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>

ステップ2：レイアウトに含める

レイアウトファイル（layout.antlers.html）を開きます
</body>の前にパーシャルタグを追加します：
{{ partial:chatbot }} </body>

なぜパーシャルを使用するのですか？ パーシャルを使用すると、外部スクリプトを一箇所で簡単に管理できます。チャットボットのコードを更新する必要がある場合、1つのファイルを編集するだけで済みます。

複数のレイアウトの使用

Statamicサイトが複数のレイアウト（ブログ投稿やランディングページ用など）を使用している場合は、ウィジェットを表示したい各レイアウトファイルにチャットボットスクリプトを追加してください。

ページが使用するレイアウトは、いくつかの方法で設定できます：

エントリー内：フロントマターにlayout: your_layoutを追加します
コレクション内：コレクションの設定YAMLファイルでデフォルトレイアウトを設定します
ブループリント内：エディターが選択できるレイアウトフィールドを追加します

Statamicスターターキットの場合

Statamicスターターキットを使用している場合、レイアウトの場所が異なる場合があります。一般的な場所は以下のとおりです：

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html（パーシャルはresources/views/snippets/内）

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

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

コードを追加した後、変更を反映させるためにStatamicのキャッシュをクリアしてください：

php artisan cache:clear
php please stache:refresh

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

ウィジェットが表示されませんか？ LaravelのキャッシュとStatamicのStacheの両方をクリアしたことを確認してください。静的キャッシュを使用している場合は、php please static:clearも実行してください。ブラウザコンソール（F12）でJavaScriptエラーがないか確認してください。

重要: Statamicの静的サイトジェネレーター（ssg）を使用している場合は、チャットボットスクリプトを追加した後にphp please ssg:generateを実行して静的ファイルを再生成してください。

ドキュメント