Slik legger du til Asyntai AI-chatbot i SilverStripe

Trinn-for-trinn-guide for SilverStripe CMS

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Legg til i SilverStripe-mal (anbefalt)

Den enkleste måten å legge til chatboten på SilverStripe-nettstedet ditt er å redigere temaets hovedmalfil direkte:

Åpne temaets malfil (f.eks. themes/yourtheme/templates/Page.ss)
Legg til innbyggingskoden rett før den avsluttende </body>-taggen:

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

Lagre filen og tøm SilverStripe-bufferen ved å legge til ?flush=1 i nettadressen din

Tips: SilverStripe bruker .ss-malfiler med et malarvsystem. Å plassere skriptet i din grunnleggende Page.ss-mal sikrer at chatboten vises på alle sider av nettstedet ditt. Hvis temaet ditt bruker en Includes-mappe, kan du også plassere skriptet i en delt inkluderingsfil.

Alternativ metode 1: Bruk av Requirements-klassen i kontroller

SilverStripe tilbyr en Requirements-klasse for programmatisk administrasjon av JavaScript- og CSS-avhengigheter. Dette er den anbefalte tilnærmingen for utviklere:

Åpne app/src/PageController.php (eller sidecontroller-filen din)
I init()-metoden, bruk Requirements::customScript() for å dynamisk laste inn widgeten:

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

Lagre filen og tøm bufferen ved å besøke yourdomain.com?flush=1

Merk: Requirements-klassen er SilverStripe-standardmåten å inkludere skript og stilark. Bruk av Requirements::customScript() skriver ut inline JavaScript. Denne metoden sikrer at widgeten lastes inn på alle sider som håndteres av PageController.

Alternativ metode 2: Bruk av Requirements i mal

Du kan også bruke SilverStripes malsyntaks for å kreve JavaScript-filer direkte i .ss-malen din:

Åpne temaets malfil (f.eks. themes/yourtheme/templates/Page.ss)
Legg til følgende nær bunnen av malen, fø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>

Tips: <% require %>-syntaksen er SilverStripes malnivåmåte å inkludere ressurser på. Merk at denne metoden ikke har innebygd støtte for å legge til egendefinerte data-attributter til skripttaggen, så vi legger til en liten initialiseringssnutt for å sette widget-ID-en.

Alternativ metode 3: Bruk av SilverStripe Config (YAML)

For en konfigurasjonsdrevet tilnærming kan du bruke SilverStripes YAML-konfigurasjon for å legge til globale krav:

Åpne eller opprett filen app/_config/app.yml
Legg til konfigurasjon for å inkludere widgeten via en egendefinert utvidelse eller kontrolleroppsett:

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

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

Bruk utvidelsen på PageController i app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Kjør ?flush=1 for å gjenoppbygge konfigurasjonsbufferen

Merk: Bruk av YAML-konfigurasjon og utvidelser er den mest modulære SilverStripe-tilnærmingen. Den holder chatbot-integrasjonen atskilt fra hovedkontrollerlogikken og gjør det enkelt å aktivere eller deaktivere uten å endre kode.

Trinn 3: Bekreft installasjonen

Etter at du har lagt til koden og tømt SilverStripe-bufferen, åpne nettstedet ditt i en ny nettleserfane. Du bør se chatwidget-knappen i nedre høyre hjørne. Klikk på den for å forsikre deg om at den åpnes og fungerer korrekt.

Ser du ikke widgeten? Forsikre deg om at du tømte bufferen ved å legge til ?flush=1 i nettadressen din. Sjekk at du erstattet YOUR_WIDGET_ID med din faktiske widget-ID fra dashbordet. Tøm nettleserbufferen eller se i inkognitomodus. Åpne nettleserkonsollen (F12) for å se etter JavaScript-feil. Hvis du bruker Requirements-klassen, verifiser at PageControllerens init()-metode kalles riktig.