Jak dodać chatbota Asyntai AI do SilverStripe

Instrukcja krok po kroku dla SilverStripe CMS

Platforma:

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

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

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Dodaj do szablonu SilverStripe (zalecane)

Najprostszym sposobem dodania chatbota do strony SilverStripe jest bezpośrednia edycja głównego pliku szablonu motywu:

Otwórz plik szablonu motywu (np. themes/yourtheme/templates/Page.ss)
Dodaj kod osadzania tuz przed zamykającym znacznikiem </body>:

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

Zapisz plik i wyczyść pamięć podręczna SilverStripe, dodajac ?flush=1 do adresu URL strony

Wskazówka: SilverStripe używa plików szablonów .ss z systemem dziedziczenia szablonów. Umieszczenie skryptu w podstawowym szablonie Page.ss zapewnia, ze chatbot pojawi sie na każdej stronie witryny. Jeśli Twój motyw używa folderu Includes, możesz również umieścić skrypt we wspolnym pliku dolaczenia.

Metoda alternatywna 1: Użycie klasy Requirements w kontrolerze

SilverStripe udostępnia klase Requirements do programistycznego zarządzania zaleznosociami JavaScript i CSS. Jest to zalecane podejście dla deweloperow:

Otwórz app/src/PageController.php (lub plik kontrolera strony)
W metodzie init() użyj Requirements::customScript(), aby dynamicznie załadować widget:

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

Zapisz plik i wyczyść pamięć podręczna, odwiedzając yourdomain.com?flush=1

Uwaga: Klasa Requirements to standardowy sposób SilverStripe na dolaczanie skryptów i arkuszy stylow. Użycie Requirements::customScript() generuje wbudowany JavaScript. Ta metoda zapewnia, ze widget jest ladowany na każdej stronie obslugiwanej przez PageController.

Metoda alternatywna 2: Użycie Requirements w szablonie

Możesz również użyć skladni szablonów SilverStripe, aby wymagac plików JavaScript bezpośrednio w szablonie .ss:

Otwórz plik szablonu motywu (np. themes/yourtheme/templates/Page.ss)
Dodaj następujący kod w dolnej części szablonu, przed </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>

Wskazówka: Skladnia <% require %> to sposób SilverStripe na dolaczanie zasobow na poziomie szablonu. Należy zauwazyc, ze ta metoda nie obsługuje natywnie dodawania niestandardowych atrybutow danych do znacznika script, dlatego dodajemy maly fragment inicjalizacyjny do ustawienia identyfikatora widgetu.

Metoda alternatywna 3: Użycie konfiguracji SilverStripe (YAML)

W przypadku podejścia opartego na konfiguracji możesz użyć konfiguracji YAML SilverStripe, aby dodać globalne wymagania:

Otwórz lub utwórz plik app/_config/app.yml
Dodaj konfigurację dolaczenia widgetu za pomocą niestandardowego rozszerzenia lub konfiguracji kontrolera:

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

Utwórz plik rozszerzenia 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);
        ");
    }
}

Zastosuj rozszerzenie do PageController w app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Uruchom ?flush=1, aby przebudować pamięć podręczną konfiguracji

Uwaga: Użycie konfiguracji YAML i rozszerzen to najbardziej modulowe podejście SilverStripe. Utrzymuje integracje chatbota oddzielnie od głównej logiki kontrolera i ułatwia włączanie lub wyłączanie bez zmiany kodu.

Krok 3: Weryfikacja instalacji

Po dodaniu kodu i wyczyszczeniu pamięci podręcznej SilverStripe otwórz swoja stronę w nowej karcie przeglądarki. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.

Nie widzisz widgetu? Upewnij sie, ze wyczysciles pamięć podręczna, dodajac ?flush=1 do adresu URL strony. Sprawdź, czy zastapiles YOUR_WIDGET_ID swoim rzeczywistym identyfikatorem widgetu z panelu. Wyczyść pamięć podręczna przeglądarki lub wyświetl stronę w trybie incognito. Otwórz konsolę przeglądarki (F12), aby sprawdzic ewentualne błędy JavaScript. Jeśli używasz klasy Requirements, zweryfikuj, czy metoda init() Twojego PageController jest wywolywana poprawnie.