Hoe voegt u de Asyntai AI-chatbot toe aan SilverStripe

Stapsgewijze handleiding voor SilverStripe CMS

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Toevoegen aan SilverStripe-template (aanbevolen)

De eenvoudigste manier om de chatbot aan uw SilverStripe-site toe te voegen is door het hoofd-templatebestand van uw thema rechtstreeks te bewerken:

Open het templatebestand van uw thema (bijv. themes/yourtheme/templates/Page.ss)
Voeg de insluitcode toe net vóór de afsluitende </body>-tag:

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

Sla het bestand op en wis de SilverStripe-cache door ?flush=1 toe te voegen aan uw site-URL

Tip: SilverStripe gebruikt .ss-templatebestanden met een template-overervingssysteem. Het plaatsen van het script in uw basis Page.ss-template zorgt ervoor dat de chatbot op elke pagina van uw site verschijnt. Als uw thema een Includes-map gebruikt, kunt u het script ook in een gedeeld include-bestand plaatsen.

Alternatieve methode 1: Requirements-klasse gebruiken in Controller

SilverStripe biedt een Requirements-klasse voor het programmatisch beheren van JavaScript- en CSS-afhankelijkheden. Dit is de aanbevolen aanpak voor ontwikkelaars:

Open app/src/PageController.php (of uw paginacontrollerbestand)
Gebruik in de init()-methode Requirements::customScript() om de widget dynamisch te laden:

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

Sla het bestand op en wis de cache door yourdomain.com?flush=1 te bezoeken

Opmerking: De Requirements-klasse is de standaard SilverStripe-manier om scripts en stylesheets op te nemen. Het gebruik van Requirements::customScript() geeft inline JavaScript weer. Deze methode zorgt ervoor dat de widget wordt geladen op elke pagina die door uw PageController wordt verwerkt.

Alternatieve methode 2: Requirements in template gebruiken

U kunt ook de templatesyntaxis van SilverStripe gebruiken om JavaScript-bestanden rechtstreeks in uw .ss-template te vereisen:

Open het templatebestand van uw thema (bijv. themes/yourtheme/templates/Page.ss)
Voeg het volgende toe onderaan de template, vóór </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: De <% require %>-syntaxis is de template-niveau manier van SilverStripe om assets op te nemen. Merk op dat deze methode standaard geen aangepaste data-attributen aan de script-tag ondersteunt, daarom voegen we een klein initialisatiefragment toe om de widget-ID in te stellen.

Alternatieve methode 3: SilverStripe-configuratie (YAML) gebruiken

Voor een configuratiegestuurde aanpak kunt u de YAML-configuratie van SilverStripe gebruiken om globale vereisten toe te voegen:

Open of maak het bestand app/_config/app.yml
Voeg configuratie toe om de widget op te nemen via een aangepaste extensie of controllerinstelling:

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

Maak het extensiebestand app/src/Extensions/AsyntaiChatbotExtension.php aan:

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

Pas de extensie toe op uw PageController in app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Voer ?flush=1 uit om de configuratiecache opnieuw op te bouwen

Opmerking: Het gebruik van YAML-configuratie en extensies is de meest modulaire SilverStripe-aanpak. Het houdt uw chatbotintegratie gescheiden van uw hoofdcontrollerlogica en maakt het eenvoudig om in of uit te schakelen zonder code te wijzigen.

Stap 3: Installatie verifiëren

Na het toevoegen van de code en het wissen van de SilverStripe-cache, open uw site in een nieuw browsertabblad. U zou de chatwidget-knop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en functioneert.

Ziet u de widget niet? Zorg ervoor dat u de cache hebt gewist door ?flush=1 toe te voegen aan uw site-URL. Controleer of u YOUR_WIDGET_ID hebt vervangen door uw daadwerkelijke widget-ID uit het dashboard. Wis uw browsercache of bekijk in incognitomodus. Open de browserconsole (F12) om te controleren op JavaScript-fouten. Als u de Requirements-klasse gebruikt, controleer dan of de init()-methode van uw PageController correct wordt aangeroepen.