Як додати AI чат-бот Asyntai до Adobe Commerce (Magento)

Покрокова інструкція для вебсайтів на Magento

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Примiтка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Використання Page Builder (Рекомендовано)

Найпростіший спосіб додати чат-бот - використати блок HTML Code в Page Builder:

Увійдіть до вашої панелі адміністрування Magento
Перейдіть до Content → Pages
Відредагуйте вашу головну сторінку (або будь-яку сторінку, де ви хочете розмістити чат-бот)
У Page Builder перетягніть елемент "HTML Code" на сторінку
Вставте ваш код для вставки Asyntai
Натиснiть "Save"
Очистіть кеш: System → Cache Management → Flush Magento Cache

Важливо: Використання Page Builder додає код лише на окремі сторінки. Для встановлення на весь сайт використовуйте метод Layout XML нижче.

Альтернатива: Використання Layout 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>
Замiнiть YOUR_WIDGET_ID на ваш фактичний ID вiджету
Виконайте: bin/magento cache:flush
Виконайте: bin/magento setup:static-content:deploy -f (якщо в режимі production)

Альтернатива: Використання CMS Block

Ви також можете створити CMS-блок та включити його у ваш футер:

Перейдіть до Content → Blocks
Натисніть "Add New Block"
Встановіть назву, наприклад "Asyntai Chatbot\
Встановіть ідентифікатор asyntai_chatbot
In the content editor, switch to HTML mode and paste your embed code
Натисніть "Save Block"
Додайте блок до шаблону футера, використовуючи: {{block id="asyntai_chatbot"}}
Очистіть кеш

Крок 3: Перевiрте встановлення

Після збереження змін та очищення кешу відвідайте ваш магазин у новій вкладці браузера або у вікні інкогніто. Ви повинні побачити кнопку чат-віджета у нижньому правому куті. Натисніть на неї, щоб переконатися, що вона відкривається та працює коректно.