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

プラットフォーム:

Umbraco

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. Umbracoバックオフィスにログインします
2. 左サイドバーの設定に移動します
3. テンプレートを展開します
4. Masterテンプレート（またはサイトで使用しているメインレイアウトテンプレート）をクリックします
5. </body>閉じタグを見つけます
6. </body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
7. 「保存」をクリックしてください

代替方法：サイト設定ドキュメントタイプを使用する

より柔軟性を持たせるために、フッタースクリプトを管理するカスタムフィールドを追加できます：

1. 設定 → ドキュメントタイプに移動します
2. サイト設定ドキュメントタイプを編集します（存在しない場合は作成します）
3. Textareaデータ型で"Footer Scripts"という新しいプロパティを追加してください
4. ドキュメントタイプを保存します
5. コンテンツに移動し、サイト設定ノードを編集します
6. Footer ScriptsフィールドにAsyntaiの埋め込みコードを貼り付けます
7. マスターテンプレートで、</body>の前に以下のコードを追加します：
   @Html.Raw(Model.Value("footerScripts"))
8. コンテンツとテンプレートの両方を保存します

代替方法：Scriptsフォルダを使用する

UmbracoバックオフィスでJavaScriptファイルを作成することもできます：

1. 設定 → スクリプトに移動します
2. Scriptsを右クリックして"Create"を選択してください
3. asyntai-chatbot.jsという新しいファイルを作成します
4. 以下のコードを追加します：
   (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);
})();
5. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
6. ファイルを保存します
7. マスターテンプレートの</body>の前にこのスクリプトを含めます：
   <script src="/scripts/asyntai-chatbot.js"></script>

代替方法：RenderSectionを使用してページ固有にする

特定のページにのみチャットボットを表示したい場合：

1. マスターテンプレートの</body>の前に以下を追加します：
   @RenderSection("footerScripts", required: false)
2. チャットボットを表示したい特定のページテンプレートに以下を追加します：
   @section footerScripts {
  <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：インストールの確認

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