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

Платформа:

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: Отримайте код для вставки

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

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

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

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

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

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

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

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

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

1. Перейдіть до Appearance → Theme File Editor
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 у новій вкладці браузера або у режимі інкогніто. Ви повинні побачити кнопку віджета чату в правому нижньому куті. Натисніть на неї, щоб переконатися, що вона відкривається та працює правильно.