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

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

Платформа:

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

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

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

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

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

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

Увійдіть до вашої панелі адміністрування Magento
Перейдіть до Content → Pages
Відредагуйте вашу головну сторінку (або будь-яку сторінку, де ви хочете розмістити чат-бот)
У Page Builder перетягніть елемент "HTML Code" на сторінку
Вставте ваш код для вставки Asyntai
Натисніть "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>
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Виконайте: bin/magento cache:flush
Виконайте: bin/magento setup:static-content:deploy -f (якщо в режимі production)

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

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

Перейдіть до Content → Blocks
Натисніть "Add New Block"
Встановіть назву, наприклад "Asyntai Chatbot"
Встановіть ідентифікатор asyntai_chatbot
У редакторі вмісту перейдіть у режим HTML і вставте свій код вбудовування
Натисніть "Save Block"
Додайте блок до шаблону футера, використовуючи: {{block id="asyntai_chatbot"}}
Очистіть кеш

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

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