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

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

Платформа:

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

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

<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: Оберіть метод встановлення

Є кілька способів додати віджет чату до WordPress. Оберіть метод, який найкраще вам підходить:

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

Найпростіше додати чат-віджет за допомогою безкоштовного плагіна "WPCode" (раніше він називався "Insert Headers and Footers").

Використання WPCode (Free)

Перейдіть до Plugins → Add Plugin в адмін-панелі WordPress
Знайдіть "WPCode" та встановіть його
Активуйте плагін
Перейдіть до Code Snippets → Header & Footer
Вставте код вбудовування Asyntai в розділ "Footer"
Натисніть "Save Changes"

Чому варто використовувати плагін? Використання плагіна гарантує, що ваш код залишиться на місці навіть при оновленні або заміні теми WordPress.

Метод 2: Редагування файлів теми

Ви можете додати код безпосередньо до файлів теми. Розташування редактора файлів теми залежить від версії WordPress та типу теми.

Для класичних тем

Перейдіть до Appearance → Theme File Editor в адмінпанелі WordPress
Оберіть активну тему зі списку (якщо ще не обрано)
Знайдіть та натисніть на footer.php у списку файлів праворуч
Прокрутіть вниз та знайдіть закриваючий тег </body>
Вставте ваш код для вставки Asyntai безпосередньо перед тегом </body>
Натисніть "Update File"

Для блокових тем (FSE-теми)

Блокові теми (наприклад, Twenty Twenty-Four та інші теми Full Site Editing) не мають файлу footer.php і тегу </body> у файлах теми. Для блокової теми використовуйте спосіб через плагін (WPCode), який працює з усіма типами тем.

Важливо: Оновлення теми перезапишуть ваші зміни. Для постійного рішення використовуйте дочірню тему або метод плагіна.

Метод 3: Використання Elementor

Якщо ви використовуєте Elementor, ви можете додати код через функцію користувацького коду Elementor.

Elementor Pro

Перейдіть до Elementor → Custom Code
Натисніть "Add New"
Дайте йому назву, наприклад "Asyntai Chatbot"
Встановіть для Location значення "<body> – End"
Вставте ваш код для вставки Asyntai
Встановіть умови відображення на "Entire Site"
Натисніть "Publish"

Elementor Free

Якщо ви використовуєте безкоштовну версію Elementor, використовуйте метод плагіна, описаний вище, оскільки вставка користувацького коду потребує Elementor Pro.

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

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

Не бачите віджет? Очистіть кеш браузера та будь-які плагіни кешування WordPress. Якщо ви використовуєте плагін кешування, наприклад WP Rocket або W3 Total Cache, очистіть кеш після додавання коду.

Додавання рядка пошуку зі ШІ

Рядок пошуку зі ШІ - окремий віджет із власним кодом. Додайте його поруч із чатом або окремо. Потрібен тариф Standard або вищий: на нижчому рядок з являється, але результатів не повертає.

Додайте атрибут data-replace до тега script, і рядок займе місце того, що вже є у вашій темі. Додайте його за допомогою того самого плагіна для хедера та футера, який ви використали для коду чату, наприклад WPCode. Скрипт не обов'язково розміщувати поруч із полем пошуку, тому редагувати файли теми не потрібно.

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

Читати повний посібник із рядка пошуку зі ШІ

Документація