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

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

Крок 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, ви також можете розмістити скрипт у спільному файлі включення.

Альтернативний метод 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 на рівні шаблону для включення ресурсів. Зверніть увагу, що цей метод не підтримує нативно додавання власних атрибутів data до тегу script, тому ми додаємо невеликий фрагмент ініціалізації для встановлення 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 викликається коректно.