Как да добавите Asyntai AI чатбот към SilverStripe

Ръководство стъпка по стъпка за SilverStripe CMS

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо отидете на вашето Табло за управление на Asyntai и превъртете надолу до секцията "Код за вграждане". Копирайте уникалния си код за вграждане, който ще изглежда така:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.

Стъпка 2: Добавяне към SilverStripe шаблон (Препоръчително)

Най-простият начин да добавите чатбота към вашия SilverStripe сайт е чрез директно редактиране на основния файл на шаблона на темата:

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

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 тага, затова добавяме малък инициализиращ фрагмент, за да зададем идентификатора на уиджета.

Алтернативен метод 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 с вашия действителен идентификатор на уиджет от таблото за управление. Изчистете кеша на браузъра или разгледайте в режим инкогнито. Отворете конзолата на браузъра (F12), за да проверите за JavaScript грешки. Ако използвате класа Requirements, потвърдете, че методът init() на вашия PageController се извиква правилно.