Come aggiungere il chatbot IA Asyntai a SilverStripe

Guida passo passo per SilverStripe CMS

Piattaforma:

Passaggio 1: ottieni il tuo codice di incorporamento

Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:

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

Nota: Il codice sopra è solo un esempio. Devi copiare il tuo codice di incorporamento univoco dalla tua Dashboard poiché contiene il tuo ID widget personale.

Passaggio 2: aggiungi al template SilverStripe (consigliato)

Il modo più semplice per aggiungere il chatbot al tuo sito SilverStripe è modificare direttamente il file del template principale del tuo tema:

Apri il file del template del tuo tema (es., themes/yourtheme/templates/Page.ss)
Aggiungi il codice di incorporamento subito prima del tag di chiusura </body>:

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

Salva il file e svuota la cache di SilverStripe aggiungendo ?flush=1 all'URL del tuo sito

Suggerimento: SilverStripe utilizza file di template .ss con un sistema di ereditarietà dei template. Posizionare lo script nel template base Page.ss garantisce che il chatbot appaia su ogni pagina del tuo sito. Se il tuo tema utilizza una cartella Includes, puoi anche posizionare lo script in un file di inclusione condiviso.

Metodo alternativo 1: uso della classe Requirements nel controller

SilverStripe fornisce una classe Requirements per gestire le dipendenze JavaScript e CSS in modo programmatico. Questo è l'approccio consigliato per gli sviluppatori:

Apri app/src/PageController.php (o il tuo file del controller della pagina)
Nel metodo init(), usa Requirements::customScript() per caricare dinamicamente il 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);
    }
}

Salva il file e svuota la cache visitando yourdomain.com?flush=1

Nota: La classe Requirements è il modo standard di SilverStripe per includere script e fogli di stile. L'uso di Requirements::customScript() produce JavaScript inline. Questo metodo garantisce che il widget venga caricato su ogni pagina gestita dal tuo PageController.

Metodo alternativo 2: uso di Requirements nel template

Puoi anche usare la sintassi dei template di SilverStripe per richiedere file JavaScript direttamente nel tuo template .ss:

Apri il file del template del tuo tema (es., themes/yourtheme/templates/Page.ss)
Aggiungi quanto segue vicino alla fine del template, prima di </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>

Suggerimento: La sintassi <% require %> è il modo a livello di template di SilverStripe per includere gli asset. Nota che questo metodo non supporta nativamente l'aggiunta di attributi data personalizzati al tag script, quindi aggiungiamo un piccolo snippet di inizializzazione per impostare l'ID del widget.

Metodo alternativo 3: uso della configurazione SilverStripe (YAML)

Per un approccio basato sulla configurazione, puoi usare la configurazione YAML di SilverStripe per aggiungere requisiti globali:

Apri o crea il file app/_config/app.yml
Aggiungi la configurazione per includere il widget tramite un'estensione personalizzata o la configurazione del controller:

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

Crea il file dell'estensione 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);
        ");
    }
}

Applica l'estensione al tuo PageController in app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Esegui ?flush=1 per ricostruire la cache di configurazione

Nota: L'uso della configurazione YAML e delle estensioni è l'approccio SilverStripe più modulare. Mantiene l'integrazione del chatbot separata dalla logica del controller principale e rende facile abilitare o disabilitare senza modificare il codice.

Passaggio 3: verifica l'installazione

Dopo aver aggiunto il codice e svuotato la cache di SilverStripe, apri il tuo sito in una nuova scheda del browser. Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra. Cliccaci sopra per assicurarti che si apra e funzioni correttamente.

Non vedi il widget? Assicurati di aver svuotato la cache aggiungendo ?flush=1 all'URL del tuo sito. Verifica di aver sostituito YOUR_WIDGET_ID con il tuo ID widget effettivo dalla dashboard. Svuota la cache del browser o visualizza in modalità incognito. Apri la console del browser (F12) per verificare eventuali errori JavaScript. Se usi la classe Requirements, verifica che il metodo init() del tuo PageController venga chiamato correttamente.