ダッシュボードに戻る

ドキュメント

Asyntaiの使い方を学ぶ

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

Concrete CMS(旧Concrete5)ウェブサイト向けステップバイステップガイド

埋め込みコードの取得

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

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

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

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

ステップ2:テーマフッターにコードを追加する(推奨)

Concrete CMSウェブサイトのすべてのページにチャットボットを追加する最良の方法は、テーマのフッターファイルを編集することです:

  1. FTPまたはファイルマネージャーでConcrete CMSのインストールにアクセスします
  2. /application/themes/your_theme_name/ディレクトリに移動します
  3. footer.phpファイル(または同等のフッターテンプレート)を見つけて開きます
  4. </body>閉じタグのある行を見つけます
  5. </body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
  6. ファイルを保存し、ローカルで編集した場合はサーバーにアップロードします
  7. Concrete CMSのキャッシュをクリア:ダッシュボード → システムと設定 → キャッシュをクリア

ヒント: </body>閉じタグの前にコードを追加することで、ページコンテンツの後にチャットボットが読み込まれ、ページの読み込みパフォーマンスが向上します。この方法により、このテーマを使用するすべてのページに自動的にチャットボットが追加されます。

代替方法1:HTMLブロック(開発者でない方に最適)

テーマファイルを編集したくない場合は、Concrete CMSの組み込みHTMLブロックを使用できます:

  1. Concrete CMSダッシュボードにログインします
  2. チャットボットを追加したいページに移動します
  3. ツールバーのページを編集(鉛筆アイコン)をクリックします
  4. コードを配置するエリアのブロックを追加をクリックします
  5. HTMLブロックを検索して選択します
  6. HTMLエディターにAsyntaiの埋め込みコードを貼り付けます
  7. 追加をクリックしてブロックを保存します
  8. 公開をクリックして変更を反映します

注記: HTMLブロック方式は、特定のページにチャットボットを追加するのに最適です。サイト全体のインストールには、各ページにHTMLブロックを追加するか、上記のテーマフッター方式を使用してください。ブロックの視覚的な配置はチャットボットの表示位置に影響しません - 右下に表示されます。

代替方法2:テーマヘッダーファイル

サイト全体のインストールのために、テーマのヘッダーファイルにコードを追加することもできます:

  1. FTPまたはファイルマネージャーでConcrete CMSのファイルにアクセスします
  2. /application/themes/your_theme_name/に移動します
  3. header.phpファイル(またはelements/header.php)を開きます
  4. </head>閉じタグを見つけます
  5. </head>タグの直前にAsyntaiの埋め込みコードを貼り付けます
  6. ファイルを保存してアップロードします
  7. ダッシュボードからキャッシュをクリアします
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </head>

ヒント: Concrete CMSが正しく機能するために、header.phpファイルに<?php View::element('header_required'); ?>を使用して必要なヘッダー要素を含めてください。

代替方法3:カスタムテンプレート(上級者向け)

より細かい制御を望む開発者は、カスタムページテンプレートを作成できます:

  1. /application/themes/your_theme_name/に新しいページテンプレートファイルを作成します
  2. または既存のテンプレート(例:default.php)をコピーして名前を変更します
  3. テンプレートファイルの</body>の前にAsyntaiの埋め込みコードを追加します
  4. Concrete CMSダッシュボードで、ページとテーマに移動します
  5. ページタイプをクリックします
  6. このテンプレートを使用するページタイプを選択します
  7. カスタムテンプレートをページタイプに割り当てます
  8. このページタイプを使用するすべてのページにチャットボットが含まれます

重要: 変更を行う前に必ずテーマファイルをバックアップしてください。可能であれば、まずステージングサイトで変更をテストしてください。テーマファイルの誤った編集はサイトのレイアウトや機能を壊す可能性があります。

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

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

ウィジェットが表示されませんか? Concrete CMSのキャッシュをクリアしたことを確認してください(ダッシュボード → システムと設定 → キャッシュのクリア)。シークレットウィンドウでサイトを表示してみてください。すべてのファイル変更を保存してアップロードしたことを確認してください。ブラウザコンソール(F12)でJavaScriptエラーがないか確認してください。