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

プラットフォーム:

October CMS

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

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

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

ステップ2：レイアウトテンプレートに追加（推奨）

チャットボットを追加する推奨方法は、October CMSバックエンドでデフォルトレイアウトを編集することです：

1. October CMSバックエンドにログインしてください
2. メインメニューでCMS > Layoutsに移動してください
3. デフォルトレイアウト（通常はdefault.htm）を開いてください
4. 閉じタグを見つけてください </body> タグと {% scripts %} プレースホルダー
5. Asyntaiの埋め込みコードを直前に追加してください {% scripts %} と </body>：
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% scripts %} </body>
6. 「保存」をクリックして変更を適用してください

Alternative Method 1: Using {% put scripts %} Block

October CMSのスクリプトプレースホルダーを使用して、ページまたはパーシャルからチャットボットを挿入できます：

1. CMSエディタで任意のページまたはパーシャルを開いてください
2. 以下のコードを使用して追加してください {% put scripts %} ブロック：
   {% put scripts %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endput %}
3. YOUR_WIDGET_IDをダッシュボードから取得した実際のウィジェットIDに置き換えてください
4. 「保存」をクリックしてください

代替方法2：コンポーネントPHPを使用

プログラム的なアプローチを好む場合は、カスタムコンポーネントを介してチャットボットスクリプトを追加できます：

1. October CMSプラグインでコンポーネントを作成または変更してください
2. コンポーネントのonRun()メソッドで、addJs()メソッドを使用してください：
   public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
3. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
4. チャットボットを表示したいページにコンポーネントを登録してください

代替方法3：パーシャルを使用

チャットボットウィジェット用の再利用可能なパーシャルを作成できます：

1. October CMSバックエンドのCMS > Partialsに移動してください
2. 「+ Add」をクリックして新しいパーシャルを作成してください
3. asyntai-widget.htmと名前を付けてください
4. パーシャルにAsyntai埋め込みコードを追加してください：
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
5. 「保存」をクリックしてください
6. レイアウトテンプレートを開き、</body>の前にパーシャルをインクルードしてください：
   {% partial 'asyntai-widget' %}
7. レイアウトを保存してください

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

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