Cum să adăugați Chatbot-ul AI Asyntai în SilverStripe

Ghid pas cu pas pentru CMS SilverStripe

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați în șablonul SilverStripe (Recomandat)

Cel mai simplu mod de a adăuga chatbot-ul pe site-ul SilverStripe este prin editarea directă a fișierului principal de șablon al temei:

Deschideți fișierul de șablon al temei (de ex., themes/yourtheme/templates/Page.ss)
Adăugați codul de integrare chiar înainte de eticheta de închidere </body>:

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

Salvați fișierul și goliți cache-ul SilverStripe adăugând ?flush=1 la URL-ul site-ului

Sfat: SilverStripe folosește fișiere de șablon .ss cu un sistem de moștenire a șabloanelor. Plasarea scriptului în șablonul de bază Page.ss asigură că chatbot-ul apare pe fiecare pagină. Dacă tema folosește un folder Includes, puteți plasa scriptul într-un fișier include partajat.

Metoda alternativă 1: Utilizarea clasei Requirements în Controller

SilverStripe oferă o clasă Requirements pentru gestionarea programatică a dependențelor JavaScript și CSS. Aceasta este abordarea recomandată pentru dezvoltatori:

Deschideți app/src/PageController.php (sau fișierul controlerului de pagină)
În metoda init(), utilizați Requirements::customScript() pentru a încărca dinamic widget-ul:

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

Salvați fișierul și goliți cache-ul vizitând yourdomain.com?flush=1

Notă: Clasa Requirements este modalitatea standard SilverStripe de a include scripturi și foi de stil. Utilizarea Requirements::customScript() produce JavaScript inline. Această metodă asigură că widget-ul este încărcat pe fiecare pagină gestionată de PageController.

Metoda alternativă 2: Utilizarea Requirements în șablon

De asemenea, puteți utiliza sintaxa de șablon SilverStripe pentru a solicita fișiere JavaScript direct în șablonul .ss:

Deschideți fișierul de șablon al temei (de ex., themes/yourtheme/templates/Page.ss)
Adăugați următoarele aproape de partea de jos a șablonului, înainte de </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>

Sfat: Sintaxa <% require %> este modalitatea la nivel de șablon SilverStripe de a include resurse. Rețineți că această metodă nu suportă nativ adăugarea atributelor data personalizate la eticheta script, așa că adăugăm un mic fragment de inițializare pentru a seta ID-ul widget-ului.

Metoda alternativă 3: Utilizarea configurației SilverStripe (YAML)

Pentru o abordare bazată pe configurație, puteți utiliza configurația YAML a SilverStripe pentru a adăuga cerințe globale:

Deschideți sau creați fișierul app/_config/app.yml
Adăugați configurația pentru a include widget-ul printr-o extensie personalizată sau configurarea controlerului:

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

Creați fișierul extensiei 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);
        ");
    }
}

Aplicați extensia la PageController în app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Rulați ?flush=1 pentru a reconstrui cache-ul de configurare

Notă: Utilizarea configurației YAML și a extensiilor este cea mai modulară abordare SilverStripe. Menține integrarea chatbot-ului separată de logica principală a controlerului și facilitează activarea sau dezactivarea fără a modifica codul.

Pasul 3: Verificați instalarea

După adăugarea codului și golirea cache-ului SilverStripe, deschideți site-ul într-o filă nouă de browser. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Asigurați-vă că ați golit cache-ul adăugând ?flush=1 la URL-ul site-ului. Verificați că ați înlocuit YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Goliți cache-ul browserului sau vizualizați în modul incognito. Deschideți consola browserului (F12) pentru a verifica eventualele erori JavaScript. Dacă utilizați clasa Requirements, verificați că metoda init() a PageController-ului este apelată corect.