ダッシュボードに戻る

ドキュメント

Asyntaiの使い方を学ぶ

はじめに
インストール ナレッジベース AIをテスト ウェブサイト管理
カスタマイズ
ウィジェットの色 AIアシスタント名 初期メッセージ ウィジェットの位置 自動トリガー 挨拶バブル 未読バッジ インストラクションモード 質問を促す 絵文字を使用 メールアドレスの収集 電話番号の収集 スマートリード獲得 ローカライズ ブランディングの非表示 プライバシーリンク カスタム通知文 トランスクリプトのダウンロード 新しい会話 会話履歴 タグラインとステータスドット 音声テキスト変換 チャットアイコン 会社ロゴ 文字数制限 Temperature
AI指示のヒント プラン比較
機能
ウェブサイトクロール 知識のギャップ 商品カード 動的商品カード Dynamic Images ユーザーコンテキスト ライブモニタリング オペレーター対応 エスカレーション AI通知 デイリーレポート リアルタイムデータフィード リアルタイムデータフィードMax チームメンバー シングルサインオン 画像を含める 画像認識 翻訳ウィジェット ローカライズ リード スマートリード獲得 サポートチケット 予約 埋め込み ページの除外 ブロックされたIP よりスマートなモデル 思考モードを有効化 返信候補 フォローアップメッセージ 音声テキスト変換 トランスクリプトのダウンロード 埋め込みチャット
アナリティクス
チャット分析 チャットログ
連携
REST API Instagram Messenger WhatsApp Zapier Email モバイルアプリ
その他
ホーム画面に追加 カスタムオープンボタン
AIに質問

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

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

埋め込みコードの取得
プラットフォーム:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Docusaurus Docusaurus Hugo Hugo Kentico Kentico Volusion Volusion Craft CMS Craft CMS Contentful Contentful Strapi Strapi Joomla Joomla Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Statamic Statamic Umbraco Umbraco Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

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

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

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

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

ステップ2：FreeMarkerテンプレートに追加する（推奨）

CrafterCMSはページのレンダリングにFreeMarker（.ftl）テンプレートを使用しています。すべてのページにチャットボットを追加する最も簡単な方法は、メインページテンプレートを編集することです：

  1. Crafter Studioで、サイトダッシュボード > コンテンツタイプに移動するか、テンプレートに移動します
  2. メインページテンプレート（例：/templates/web/pages/home.ftlまたはベースレイアウト）を開きます
  3. </body>閉じタグを見つけます
  4. Asyntaiの埋め込みコードを</body>タグの直前に貼り付けます：
    <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
  5. ファイルを保存し、Crafter Studioで公開します

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

代替方法1：Crafterテンプレートコンポーネントを使用する

より良い構成のために、チャットボットウィジェット専用のコンポーネントテンプレートを作成します：

  1. Crafter Studioで、/templates/web/components/asyntai-widget.ftlに新しいテンプレートファイルを作成します
  2. コンポーネントテンプレートに以下の内容を追加します：
    <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. FreeMarkerのincludeディレクティブを使用してメインレイアウトテンプレートにインクルードします：
    <#include "/templates/web/components/asyntai-widget.ftl" />
  4. または、Crafterのコンポーネントレンダリングシステムを使用している場合は、次を使用してください：
    <@renderComponent component=contentModel.asyntaiWidget />
  5. 両方のファイルを保存し、Crafter Studioで公開します

注記: 個別のコンポーネントテンプレートを使用すると、1行のincludeをコメントアウトするだけでサイト全体のチャットボットを簡単に有効化または無効化できます。

代替方法2：CrafterのHead/Scripts設定を使用する

CrafterCMSでは、サイト設定を通じてグローバルにスクリプトを挿入できます：

  1. Crafter Studioで、サイト設定 > 設定に移動します
  2. Engine Site Configurationファイル（site-config.xml）を開きます
  3. カスタムスクリプトインジェクション設定を追加します：
    <site> <!-- Existing configuration... --> <!-- Custom Scripts --> <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
  4. または、ベースFreeMarkerレイアウトを編集してサイト設定から読み取り、スクリプトを動的にインジェクトします：
    <#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
  5. 設定の変更を保存して公開します

ヒント: サイト設定を使用すると、テンプレートファイルを直接変更せずにチャットボットウィジェットを管理でき、後から更新や削除が容易になります。

代替方法3：Groovyコントローラーを使用する

CrafterCMSはサーバーサイドロジック用のGroovyスクリプトをサポートしています。コントローラーを使用してチャットボットスクリプトを動的に追加できます：

  1. /scripts/pages/にGroovyスクリプトを作成します（例：/scripts/pages/home.groovyまたはサイト全体のコントローラー）
  2. テンプレートモデルにスクリプトURLをインジェクトするために以下のコードを追加します：
    // /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
  3. 次に、FreeMarkerテンプレートでモデル変数を参照します：
    <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
  4. Groovyスクリプトとテンプレートファイルの両方を保存します
  5. Crafter Studioで変更を公開します

注記: Groovyコントローラー方式は、条件付きロジック（例：特定のユーザーロールやページタイプのみでチャットボットを有効にする）が必要な場合や、外部ソースから設定値を取得したい場合に便利です。

ステップ3：公開と確認

変更を行った後、Crafter Studioで公開します：

  1. Crafter Studioで、サイトダッシュボードに移動します
  2. 最近のアクティビティまたは承認待ちセクションで変更を確認します
  3. 公開をクリックして変更を反映します
  4. 新しいブラウザタブまたはシークレットウィンドウでCrafterCMSウェブサイトにアクセスしてください
  5. 右下にチャットウィジェットボタンが表示されるはずです
  6. クリックして正しく開いて動作することを確認してください

ウィジェットが表示されませんか？ Crafter Studioで変更を公開したことを確認してください。ページで使用されている正しいテンプレートファイルを編集していることを確認してください。ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してください。Crafterのキャッシュを使用している場合は、Crafter StudioダッシュボードからEngineキャッシュをクリアしてください。

テンプレートの場所： CrafterCMSのテンプレートの場所は、プロジェクト構造によって異なる場合があります。一般的な場所には、ページテンプレート用の/templates/web/pages/、コンポーネントテンプレート用の/templates/web/components/、レイアウトテンプレート用の/templates/web/があります。既存のテンプレートを確認して、</body>タグが定義されている場所を見つけてください。