Sådan tilføjer du Asyntai AI-chatbot til SilverStripe

Trin-for-trin-vejledning til SilverStripe CMS

Platform:

Trin 1: Hent din indlejringskode

Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:

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

Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.

Trin 2: Tilføj til SilverStripe-skabelon (anbefalet)

Den enkleste måde at tilføje chatbotten til dit SilverStripe-websted er ved at redigere temaets primære skabelonfil direkte:

Åbn temaets skabelonfil (f.eks. themes/yourtheme/templates/Page.ss)
Tilføj indlejringskoden lige før det afsluttende </body>-tag:

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

Gem filen og ryd SilverStripe-cachen ved at tilføje ?flush=1 til din websteds-URL

Tip: SilverStripe bruger .ss-skabelonfiler med et system for skabelonarv. Placering af scriptet i din basis Page.ss-skabelon sikrer, at chatbotten vises på hver side af dit websted. Hvis dit tema bruger en Includes-mappe, kan du også placere scriptet i en delt inddragelsesfil.

Alternativ metode 1: Brug af Requirements-klassen i controller

SilverStripe tilbyder en Requirements-klasse til programmatisk administration af JavaScript- og CSS-afhængigheder. Dette er den anbefalede tilgang for udviklere:

Åbn app/src/PageController.php (eller din side-controller-fil)
I metoden init() bruges Requirements::customScript() til dynamisk at indlæse widgetten:

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

Gem filen og ryd cachen ved at besøge yourdomain.com?flush=1

Bemærk: Requirements-klassen er SilverStripes standardmåde at inkludere scripts og stilark på. Brug af Requirements::customScript() genererer inline JavaScript. Denne metode sikrer, at widgetten indlæses på hver side, der håndteres af din PageController.

Alternativ metode 2: Brug af Requirements i skabelon

Du kan også bruge SilverStripes skabelonsyntaks til at kræve JavaScript-filer direkte i din .ss-skabelon:

Åbn temaets skabelonfil (f.eks. themes/yourtheme/templates/Page.ss)
Tilføj følgende nær bunden af skabelonen, 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>

Tip: <% require %>-syntaksen er SilverStripes skabelonniveau-måde at inkludere ressourcer på. Bemærk, at denne metode ikke understøtter tilføjelse af brugerdefinerede dataattributter til script-tagget, så vi tilføjer et lille initialiseringsudsnit for at angive widget-ID'et.

Alternativ metode 3: Brug af SilverStripe Config (YAML)

For en konfigurationsdrevet tilgang kan du bruge SilverStripes YAML-konfiguration til at tilføje globale krav:

Åbn eller opret filen app/_config/app.yml
Tilføj konfiguration til at inkludere widgetten via en brugerdefineret udvidelse eller controller-opsætning:

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

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

Anvend udvidelsen på din PageController i app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Kør ?flush=1 for at genopbygge konfigurationscachen

Bemærk: Brug af YAML-konfiguration og udvidelser er den mest modulære SilverStripe-tilgang. Den holder din chatbot-integration adskilt fra din primære controller-logik og gør det nemt at aktivere eller deaktivere uden at ændre kode.

Trin 3: Verificér installationen

Efter at have tilføjet koden og tømt SilverStripe-cachen, åbn dit websted i en ny browserfane. Du bør se chat-widget-knappen i nederste højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.

Ser du ikke widget'en? Sørg for, at du tømte cachen ved at tilføje ?flush=1 til din websteds-URL. Kontroller, at du erstattede YOUR_WIDGET_ID med dit faktiske widget-ID fra dashboardet. Ryd din browsercache eller se siden i inkognitotilstand. Åbn browserkonsollen (F12) for at kontrollere for eventuelle JavaScript-fejl. Hvis du bruger Requirements-klassen, skal du bekræfte, at din PageControllers init()-metode kaldes korrekt.