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

プラットフォーム:

Craft CMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion 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：埋め込みコードを取得する

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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

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

1. FTP、SSH、またはコードエディターを使用してCraft CMSのプロジェクトファイルにアクセスします
2. templates/ディレクトリに移動します
3. メインレイアウトファイルを見つけます（一般的に_layout.twig、_layout.htmlという名前、またはtemplates/_layouts/内にあります）
4. </body>閉じタグを見つけます
5. </body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
6. ファイルを保存します

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

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

1. メインレイアウトテンプレートを開きます
2. </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 %}
3. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
4. ファイルを保存します

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

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

1. 新しいファイルを作成します：templates/_includes/chatbot.twig（または.html）
2. このファイルに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>
3. メインレイアウトテンプレートの</body>の前にこのファイルをインクルードします：
   {% include '_includes/chatbot' %}
4. 両方のファイルを保存します

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

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

1. レイアウトまたはページテンプレートでTwigの条件文を使用します：
   {% if entry.showChatbot ?? true %} <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> {% endif %}
2. または特定のセクションを確認します：
   {% if craft.app.request.segments[0] != 'admin' %} <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> {% endif %}

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

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