Як додати AI чат-бот 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>

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Додавання до фрагмента Kirby (Рекомендовано)

Kirby - це файлова PHP CMS, що використовує фрагменти для багаторазових частин шаблонiв. Рекомендований пiдхiд - створити окремий фрагмент для чат-бота:

Створiть новий файл фрагмента за адресою 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>

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

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

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

Альтернативний метод 1: Додавання до фрагмента футера

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

Вiдкрийте site/snippets/footer.php (створiть його, якщо його не iснує)
Додайте код вбудовування перед закриваючим тегом </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') ?>

Примітка: Якщо фрагмент футера вже включений у всi вашi шаблони, додавання чат-бота тут забезпечує його появу на кожнiй сторiнцi без змiни окремих файлiв шаблонiв.

Альтернативний метод 2: Використання плагіна Kirby

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

Створiть каталог плагiна та файл за адресою site/plugins/asyntai/index.php
Додайте наступний код для динамічного впровадження скрипту:

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);
        }
    ]
]);

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

Альтернативний метод 3: Використання помічника js() Kirby

Kirby надає вбудований помiчник js() для завантаження файлiв JavaScript. Ви можете використовувати його у вашому шаблонi або фрагментi:

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

Примітка: Якщо ви використовуєте помiчник js(), переконайтеся, що вiн розмiщений всерединi роздiлу <body> вашого шаблону, щоб чат-бот завантажувався коректно.

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

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

Не бачите віджет? Переконайтеся, що ви замiнили YOUR_WIDGET_ID на фактичний ID вiджету з панелi керування. Перевiрте, що файл фрагмента або плагiна збережений у правильному каталозi. Якщо ви використовуєте метод плагiна, переконайтеся, що структура каталогу плагiна - site/plugins/asyntai/index.php. Очистiть кеш браузера або протестуйте в режимi iнкогнiто. Перевiрте консоль розробника браузера (F12) на наявнiсть помилок.