Як додати AI чат-бот Asyntai до WooCommerce

Покрокова інструкція для магазинів WooCommerce

Платформа:

Крок 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стить ваш особистий ID вiджета.

Крок 2: Використання плагіна (Рекомендовано)

Найпростiший спосiб додати чат-бот до вашого магазину WooCommerce - використання безкоштовного плагiна header/footer:

Увійдіть до адмінпанелі WordPress
Перейдіть до Plugins → Add New
Знайдiть "Insert Headers and Footers" вiд WPCode (або подiбний плагiн)
Натиснiть "Install Now", а потiм "Activate"
Перейдiть до Code Snippets → Header & Footer (або на сторiнку налаштувань плагiна)
Вставте код вбудовування Asyntai в розділ "Footer"
Натисніть "Save Changes"

Порада: Додавання коду в футер забезпечує його завантаження пiсля вмiсту магазину, що iдеально для вiджетiв чату та не сповiльнює завантаження сторiнки i не заважає функцiональностi WooCommerce.

Альтернатива: Використання налаштувача теми

Багато тем WooCommerce мають вбудованi можливостi для додавання користувацьких скриптiв:

Перейдіть до Appearance → Customize
Знайдiть роздiл з назвою "Additional CSS/JS", "Custom Code" або "Footer Scripts"
Вставте код вбудовування Asyntai у відповідне поле
Натисніть "Publish", щоб зберегти зміни

Примітка: Не всi теми мають цю опцiю. Якщо ваша тема не включає поля для користувацьких скриптiв, використовуйте метод плагiна або вiдредагуйте файл functions.php вашої теми.

Альтернатива: Редагування файлів теми (functions.php)

Для розробників або тих, хто впевнено працює з файлами теми:

Перейдіть до Appearance → Theme File Editor
Оберіть вашу активну тему (або бажано дочірню тему)
Відкрийте файл functions.php
Додайте наступний код в кінець файлу:
function add_asyntai_chatbot() { echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>'; } add_action('wp_footer', 'add_asyntai_chatbot');
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Натисніть "Update File"

Важливо: Завжди використовуйте дочiрню тему при редагуваннi файлiв теми. Змiни в батькiвськiй темi будуть втраченi при оновленнi теми. Якщо вам незручно редагувати код, використовуйте метод плагiна.

Альтернатива: Специфічний хук WooCommerce

Щоб завантажувати чат-бот лише на сторiнках WooCommerce (магазин, товар, кошик, оформлення замовлення):

Додайте цей код у файл functions.php вашої теми:
function add_asyntai_chatbot_woocommerce() { if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) { echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>'; } } add_action('wp_footer', 'add_asyntai_chatbot_woocommerce');
Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
Збережіть файл

Порада: Цей метод корисний, якщо ви хочете, щоб AI чат-бот з'являвся лише на сторiнках магазину для допомоги клiєнтам з товарами та замовленнями, а не на всьому веб-сайтi.

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

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

Не бачите віджет? Якщо у вас встановлено плагiн кешування (наприклад, WP Super Cache, W3 Total Cache або WP Rocket), спочатку очистiть кеш. Також спробуйте очистити кеш браузера або переглянути в режимi iнкогнiто.