Jak přidat Asyntai AI chatbota do SilverStripe

Průvodce krok za krokem pro SilverStripe CMS

Platforma:

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání do šablony SilverStripe (doporučeno)

Nejednodušší způsob, jak přidat chatbota na svůj web SilverStripe, je přímá úprava hlavního souboru šablony motivu:

Otevřete soubor šablony svého motivu (např. themes/yourtheme/templates/Page.ss)
Přidejte vložený kód těsně před uzavírací tag </body>:

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

Uložte soubor a vymažte mezipaměť SilverStripe přidáním ?flush=1 k URL svého webu

Tip: SilverStripe používá soubory šablon .ss se systémem dědičnosti šablon. Umístěním skriptu do základní šablony Page.ss zajistíte, že se chatbot zobrazí na každé stránce vašeho webu. Pokud váš motiv používá složku Includes, můžete skript umístit také do sdíleného include souboru.

Alternativní metoda 1: Použití třídy Requirements v controlleru

SilverStripe poskytuje třídu Requirements pro programovou správu závislostí JavaScriptu a CSS. Toto je doporučený přístup pro vývojáře:

Otevřete app/src/PageController.php (nebo váš soubor controlleru stránky)
V metodě init() použijte Requirements::customScript() pro dynamické načtení 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 soubor a vymažte mezipaměť návštěvou yourdomain.com?flush=1

Poznámka: Třída Requirements je standardní způsob SilverStripe pro zahrnutí skriptů a stylů. Použití Requirements::customScript() vypíše inline JavaScript. Tato metoda zajistí, že se widget načte na každé stránce zpracované vaším PageControllerem.

Alternativní metoda 2: Použití Requirements v šabloně

Můžete také použít syntaxi šablon SilverStripe pro vyžádání souborů JavaScript přímo ve své šabloně .ss:

Otevřete soubor šablony svého motivu (např. themes/yourtheme/templates/Page.ss)
Přidejte následující kód blízko konce šablony, před </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: Syntaxe <% require %> je způsob SilverStripe na úrovni šablon pro zahrnutí souborů. Všimněte si, že tato metoda nativně nepodporuje přidávání vlastních datových atributů k tagu script, proto přidáváme malý inicializační fragment pro nastavení ID widgetu.

Alternativní metoda 3: Použití konfigurace SilverStripe (YAML)

Pro přístup řízený konfigurací můžete použít konfiguraci YAML SilverStripe k přidání globálních požadavků:

Otevřete nebo vytvořte soubor app/_config/app.yml
Přidejte konfiguraci pro zahrnutí widgetu prostřednictvím vlastního rozšíření nebo nastavení controlleru:

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

Vytvořte soubor rozšíření 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šíření na svůj PageController v app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Spusťte ?flush=1 pro obnovení konfigurační mezipaměti

Poznámka: Použití konfigurace YAML a rozšíření je nejmodulnější přístup SilverStripe. Udržuje integraci chatbota oddělenou od hlavní logiky controlleru a usnadňuje její povolení nebo zakázání bez změny kódu.

Krok 3: Ověřte instalaci

Po přidání kódu a vymazání mezipaměti SilverStripe otevřete svůj web v nové záložce prohlížeče. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ověřte, že se správně otevírá a funguje.

Nevidíte widget? Ujistěte se, že jste vymazali mezipaměť přidáním ?flush=1 k URL svého webu. Zkontrolujte, zda jste nahradili YOUR_WIDGET_ID svým skutečným ID widgetu z dashboardu. Vymažte mezipaměť prohlížeče nebo web zobrazte v režimu inkognito. Otevřete konzoli prohlížeče (F12) a zkontrolujte případné chyby JavaScriptu. Pokud používáte třídu Requirements, ověřte, že je metoda init() vašeho PageControlleru správně volána.