Как добавить ИИ-чат-бот 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>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Выберите способ установки

Существует несколько способов добавить виджет чата в WordPress. Выберите тот, который лучше всего вам подходит:

Способ 1: Через плагин (рекомендуется)

Проще всего добавить чат-виджет с помощью бесплатного плагина "WPCode" (ранее он назывался "Insert Headers and Footers").

Использование WPCode (бесплатно)

Перейдите в Plugins → Add Plugin в панели администратора WordPress
Найдите «WPCode» и установите его
Активируйте плагин
Перейдите в Code Snippets → Header & Footer
Вставьте код вставки Asyntai в раздел «Футер»
Нажмите «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>

Читать полное руководство по строке поиска с ИИ

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