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 panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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.