Как добавить ИИ-чат-бот Asyntai в SilverStripe

Пошаговое руководство для SilverStripe CMS

Платформа:

Шаг 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: Добавьте в шаблон SilverStripe (рекомендуется)

Самый простой способ добавить чат-бот на ваш сайт на SilverStripe — напрямую отредактировать главный файл шаблона темы:

Откройте файл шаблона вашей темы (например, themes/yourtheme/templates/Page.ss)
Добавьте код вставки непосредственно перед закрывающим тегом </body>:

    <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>
  </body>
</html>

Сохраните файл и очистите кэш SilverStripe, добавив ?flush=1 к URL вашего сайта

Совет: SilverStripe использует шаблонные файлы .ss с системой наследования шаблонов. Размещение скрипта в базовом шаблоне Page.ss обеспечивает появление чат-бота на каждой странице сайта. Если ваша тема использует папку Includes, скрипт можно разместить в общем include-файле.

Альтернативный метод 1: использование класса Requirements в контроллере

SilverStripe предоставляет класс Requirements для программного управления зависимостями JavaScript и CSS. Это рекомендуемый подход для разработчиков:

Откройте app/src/PageController.php (или файл вашего контроллера страниц)
В методе init() используйте Requirements::customScript() для динамической загрузки виджета:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

Сохраните файл и очистите кэш, перейдя по адресу yourdomain.com?flush=1

Примечание: Класс Requirements — это стандартный способ SilverStripe для подключения скриптов и таблиц стилей. Использование Requirements::customScript() выводит встроенный JavaScript. Этот метод обеспечивает загрузку виджета на каждой странице, обрабатываемой вашим PageController.

Альтернативный метод 2: использование Requirements в шаблоне

Вы также можете использовать синтаксис шаблонов SilverStripe для подключения JavaScript-файлов напрямую в шаблоне .ss:

Откройте файл шаблона вашей темы (например, themes/yourtheme/templates/Page.ss)
Добавьте следующее в нижней части шаблона, перед </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Совет: Синтаксис <% require %> — это стандартный способ подключения ресурсов в шаблонах SilverStripe. Обратите внимание, что этот метод не поддерживает добавление пользовательских атрибутов данных к тегу скрипта, поэтому мы добавляем небольшой фрагмент инициализации для установки ID виджета.

Альтернативный метод 3: использование конфигурации SilverStripe (YAML)

Для конфигурационного подхода можно использовать YAML-конфигурацию SilverStripe для добавления глобальных зависимостей:

Откройте или создайте файл app/_config/app.yml
Добавьте конфигурацию для подключения виджета через пользовательское расширение или настройку контроллера:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Создайте файл расширения app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

Примените расширение к вашему PageController в app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Выполните ?flush=1 для пересборки кэша конфигурации

Примечание: Использование конфигурации YAML и расширений — наиболее модульный подход для SilverStripe. Это позволяет отделить интеграцию чат-бота от основной логики контроллера и легко включать или отключать её без изменения кода.

Шаг 3: Проверка установки

После добавления кода и очистки кэша SilverStripe откройте сайт в новой вкладке браузера. Вы должны увидеть кнопку виджета чата в правом нижнем углу. Нажмите на неё, чтобы убедиться, что всё работает.

Виджет не отображается? Убедитесь, что вы очистили кэш, добавив ?flush=1 к URL вашего сайта. Проверьте, что вы заменили YOUR_WIDGET_ID на фактический ID виджета из панели управления. Очистите кэш браузера или откройте сайт в режиме инкогнито. Откройте консоль браузера (F12) для проверки ошибок JavaScript. При использовании класса Requirements убедитесь, что метод init() вашего PageController вызывается корректно.