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

プラットフォーム:

WooCommerce

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：プラグインの使用（推奨）

WooCommerceストアにチャットボットを追加する最も簡単な方法は、無料のヘッダー/フッタープラグインを使用することです：

1. WordPress管理ダッシュボードにログインします
2. プラグイン → 新規追加に移動します
3. WPCode（または同様のプラグイン）の「Insert Headers and Footers」を検索します
4. 「Install Now」をクリックし、次に「Activate」をクリックします
5. Code Snippets → Header & Footer（またはプラグインの設定ページ）に移動します
6. Asyntaiの埋め込みコードを「Footer」セクションに貼り付けます
7. 「Save Changes」をクリックします

代替方法：テーマカスタマイザーの使用

多くのWooCommerceテーマには、カスタムスクリプトを追加するための組み込みオプションがあります：

1. 外観 → カスタマイズに移動します
2. 「Additional CSS/JS」、「Custom Code」、または「Footer Scripts」というセクションを探します
3. 適切なフィールドにAsyntaiの埋め込みコードを貼り付けます
4. 「Publish」をクリックして変更を保存します

代替方法：テーマファイルの編集（functions.php）

開発者やテーマファイルの編集に慣れている方向け：

1. 外観 → テーマファイルエディターに移動します
2. 有効なテーマ（できれば子テーマ）を選択します
3. functions.phpファイルを開きます
4. ファイルの末尾に以下のコードを追加します：
   function add_asyntai_chatbot() {
  echo '<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>';
}
add_action('wp_footer', 'add_asyntai_chatbot');
5. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
6. 「Update File」をクリックします

代替方法：WooCommerce専用フック

チャットボットをWooCommerceページ（ショップ、商品、カート、チェックアウト）でのみ読み込むには：

1. テーマのfunctions.phpファイルに次のコードを追加します：
   function add_asyntai_chatbot_woocommerce() {
  if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) {
    echo '<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>';
  }
}
add_action('wp_footer', 'add_asyntai_chatbot_woocommerce');
2. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
3. ファイルを保存します

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

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