Ako pridať Asyntai AI Chatbot do SilverStripe

Podrobný návod pre SilverStripe CMS

Platforma:

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.

Krok 2: Pridanie do šablóny SilverStripe (Odporúčané)

Najjednoduchší spôsob pridania chatbota na váš web SilverStripe je priama úprava hlavného súboru šablóny vašej témy:

Otvorte súbor šablóny vašej témy (napr. themes/yourtheme/templates/Page.ss)
Pridajte vkladací kód tesne pred uzatváraciu značku </body>:

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

Uložte súbor a vyprázdnite vyrovnávaciu pamäť SilverStripe pridaním ?flush=1 do URL vášho webu

Tip: SilverStripe používa súbory šablón .ss so systémom dedenia šablón. Umiestnenie skriptu do vašej základnej šablóny Page.ss zabezpečuje, že sa chatbot zobrazí na každej stránke vášho webu. Ak vaša téma používa priečinok Includes, môžete tiež umiestniť skript do zdieľaného súboru zahrnutia.

Alternatívna metóda 1: Pomocou triedy Requirements v kontroléri

SilverStripe poskytuje triedu Requirements na programovú správu závislostí JavaScript a CSS. Toto je odporúčaný prístup pre vývojárov:

Otvorte app/src/PageController.php (alebo váš súbor kontroléra stránky)
V metóde init() použite Requirements::customScript() na dynamické načítanie widgetu:

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

Uložte súbor a vyprázdnite vyrovnávaciu pamäť návštevou yourdomain.com?flush=1

Poznámka: Trieda Requirements je štandardný spôsob SilverStripe na zahrnutie skriptov a štýlov. Použitie Requirements::customScript() vytvára vnorený JavaScript. Táto metóda zabezpečuje, že widget sa načíta na každej stránke spravovanej vaším PageController.

Alternatívna metóda 2: Pomocou Requirements v šablóne

Môžete tiež použiť syntax šablón SilverStripe na vyžiadanie JavaScript súborov priamo vo vašej šablóne .ss:

Otvorte súbor šablóny vašej témy (napr. themes/yourtheme/templates/Page.ss)
Pridajte nasledujúce blízko konca šablóny, pred </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>

Tip: Syntax <% require %> je spôsob SilverStripe na úrovni šablón na zahrnutie aktív. Upozorňujeme, že táto metóda natívne nepodporuje pridávanie vlastných dátových atribútov k značke script, preto pridávame malý inicializačný úryvok na nastavenie ID widgetu.

Alternatívna metóda 3: Pomocou konfigurácie SilverStripe (YAML)

Pre konfiguračne riadený prístup môžete použiť YAML konfiguráciu SilverStripe na pridanie globálnych požiadaviek:

Otvorte alebo vytvorte súbor app/_config/app.yml
Pridajte konfiguráciu na zahrnutie widgetu cez vlastné rozšírenie alebo nastavenie kontroléra:

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

Vytvorte súbor rozšírenia 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);
        ");
    }
}

Aplikujte rozšírenie na váš PageController v app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Spustite ?flush=1 na prebudovanie vyrovnávacej pamäte konfigurácie

Poznámka: Použitie YAML konfigurácie a rozšírení je najmodulárnejší prístup SilverStripe. Udržiava integráciu chatbota oddelenú od hlavnej logiky kontroléra a uľahčuje povolenie alebo zakázanie bez zmeny kódu.

Krok 3: Overenie inštalácie

Po pridaní kódu a vyprázdnení vyrovnávacej pamäte SilverStripe otvorte svoj web v novej záložke prehliadača. V pravom dolnom rohu by ste mali vidieť tlačidlo chatového widgetu. Kliknite naň, aby ste sa uistili, že sa otvára a funguje správne.

Nevidíte widget? Uistite sa, že ste vyprázdnili vyrovnávaciu pamäť pridaním ?flush=1 do URL vášho webu. Skontrolujte, že ste nahradili YOUR_WIDGET_ID svojím skutočným ID widgetu z ovládacieho panela. Vymažte vyrovnávaciu pamäť prehliadača alebo zobrazte stránku v režime inkognito. Otvorte konzolu prehliadača (F12) a skontrolujte prípadné chyby JavaScript. Ak používate triedu Requirements, overte, že metóda init() vášho PageController sa volá správne.