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

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

Kirby — это PHP CMS на основе файловой системы, использующая сниппеты для повторно используемых частей шаблонов. Рекомендуемый подход — создать отдельный сниппет для чат-бота:

Создайте новый файл сниппета по пути site/snippets/asyntai-widget.php
Вставьте код встраивания в файл:

<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>

Затем включите фрагмент в ваш главный шаблон (например, site/templates/default.php) или макет, непосредственно перед закрывающим тегом </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

Совет: Если вы используете общий макет или фрагмент подвала, вы можете добавить вызов фрагмента туда, чтобы он автоматически появлялся на каждой странице. Например, добавьте его в фрагмент подвала прямо перед </body>.

Альтернативный способ 1: Добавить в сниппет подвала

Если ваш сайт Kirby использует фрагмент подвала, вы можете добавить код встраивания прямо туда:

Откройте site/snippets/footer.php (создайте файл, если он не существует)
Добавьте код вставки перед закрывающим тегом </body>:

    <!-- Footer content -->
    <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>

Убедитесь, что ваши шаблоны включают сниппет футера:

<?php snippet('footer') ?>

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

Альтернативный способ 2: Через плагин Kirby

Вы можете создать плагин Kirby для автоматической вставки скрипта чат-бота на каждую страницу без изменения шаблонов:

Создайте директорию и файл плагина по пути site/plugins/asyntai/index.php
Добавьте следующий код, чтобы внедрить скрипт через хуки Kirby:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<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>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Совет: Подход через плагин идеален, если вы хотите, чтобы чат-бот автоматически загружался на каждой странице без редактирования шаблонов или файлов фрагментов. Он также сохраняет вашу интеграцию чат-бота модульной и легко включаемой или отключаемой.

Альтернативный способ 3: Через js()-хелпер Kirby

Kirby предоставляет встроенный хелпер js() для загрузки JavaScript-файлов. Его можно использовать в шаблоне или сниппете:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Или добавьте скрипт непосредственно в файл шаблона PHP перед </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

    <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>

Примечание: Если вы используете вспомогательную функцию js(), убедитесь, что она размещена внутри раздела <body> вашего шаблона для корректной загрузки чат-бота.

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

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

Виджет не отображается? Убедитесь, что вы заменили YOUR_WIDGET_ID на фактический ID виджета из панели управления. Проверьте, что файл сниппета или плагина сохранён в правильном каталоге. При использовании метода плагина убедитесь, что структура каталога плагина: site/plugins/asyntai/index.php. Очистите кэш браузера или проверьте в режиме инкогнито. Проверьте консоль разработчика браузера (F12) на наличие ошибок.