Asyntai AIチャットボットをAdobe Commerce（Magento）に追加する方法

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

プラットフォーム:

ステップ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:

<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>

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

ステップ2：ページビルダーの使用（推奨）

チャットボットを追加する最も簡単な方法は、ページビルダーのHTMLコードブロックを使用することです：

Magento管理パネルにログインしてください
コンテンツ → ページに移動してください
ホームページ（またはチャットボットを追加したいページ）を編集してください
ページビルダーで「HTMLコード」要素をページにドラッグしてください
Asyntaiの埋め込みコードを貼り付けます
「保存」をクリックしてください
キャッシュをフラッシュ：システム → キャッシュ管理 → Magentoキャッシュをフラッシュ

重要: ページビルダーの使用は個々のページにのみコードを追加します。サイト全体のインストールには、以下のレイアウトXMLメソッドを使用してください。

代替方法：レイアウトXMLの使用（全ページ）

すべてのページにチャットボットを追加するには、テーマ内にレイアウトファイルを作成します：

テーマフォルダに移動してください：app/design/frontend/[Vendor]/[theme]/
フォルダ構造が存在しない場合は作成してください：Magento_Theme/layout/
default_head_blocks.xmlファイルを作成または編集します
以下のコードを追加します：
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="https://asyntai.com/static/js/chat-widget.js" src_type="url" async="true" data-asyntai-id="YOUR_WIDGET_ID"/> </head> </page>
YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
実行：bin/magento cache:flush
実行：bin/magento setup:static-content:deploy -f（プロダクションモードの場合）

代替方法：CMSブロックの使用

CMSブロックを作成してフッターに含めることもできます：

コンテンツ → ブロックに移動してください
「新しいブロックを追加」をクリックしてください
「Asyntai Chatbot」のようなタイトルを設定します
識別子をasyntai_chatbotに設定してください
コンテンツエディターで、HTMLモードに切り替えて埋め込みコードを貼り付けます
「ブロックを保存」をクリックしてください
以下を使用してフッターテンプレートにブロックを追加してください： {{block id="asyntai_chatbot"}}
キャッシュをフラッシュしてください

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

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