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

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

Платформа:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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

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

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

Найпростiший спосiб додати вiджет чату - використання плагiна, наприклад "Insert Headers and Footers" або "WPCode".

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

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

Використання Insert Headers and Footers

Перейдіть до Plugins → Add New в адмінпанелі WordPress
Знайдіть "Insert Headers and Footers" від WPBeginner
Встановіть та активуйте плагін
Перейдіть до Settings → Insert Headers and Footers
Вставте код вбудовування Asyntai в поле "Scripts in Footer"
Натисніть "Save"

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

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

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

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

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

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

Якщо ви використовуєте блокову тему (наприклад, Twenty Twenty-Four або iншi теми Full Site Editing), редактор файлiв теми перемiстився:

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

Примітка: Деякi блоковi теми не мають файлу footer.php. У такому випадку використовуйте метод плагiна (WPCode), який працює з усiма типами тем.

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

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

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

Elementor Pro

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

Elementor Free

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

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

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

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

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

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

Додайте атрибут data-replace до тега script, і рядок займе місце того, що вже є у вашій темі. Додайте його тим самим плагіном для шапки й підвалу, яким додавали код чату, наприклад Code Snippets або Insert Headers and Footers. Скрипту не потрібно бути поруч із полем пошуку, тож редагувати файли теми не доведеться.

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

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

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