Hur du lägger till Asyntai AI-chattbot i SilverStripe

Steg-för-steg-guide för SilverStripe CMS

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din Dashboard eftersom den innehåller ditt personliga widget-ID.

Steg 2: Lägg till i SilverStripe-mallen (rekommenderas)

Det enklaste sättet att lägga till chattboten på din SilverStripe-webbplats är att redigera ditt temas huvudmallfil direkt:

Öppna temats mallfil (t.ex. themes/yourtheme/templates/Page.ss)
Lägg till inbäddningskoden precis före den avslutande </body>-taggen:

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

Spara filen och töm SilverStripe-cachen genom att lägga till ?flush=1 i din webbplats-URL

Tips: SilverStripe använder .ss-mallfiler med ett mallarvssystem. Att placera skriptet i din bas-Page.ss-mall säkerställer att chattboten visas på varje sida av din webbplats. Om ditt tema använder en Includes-mapp kan du även placera skriptet i en delad include-fil.

Alternativ metod 1: Använda Requirements-klassen i kontrollenhet

SilverStripe tillhandahåller en Requirements-klass för att hantera JavaScript- och CSS-beroenden programmatiskt. Detta är det rekommenderade tillvägagångssättet för utvecklare:

Öppna app/src/PageController.php (eller din sidkontrollfil)
I metoden init(), använd Requirements::customScript() för att dynamiskt ladda 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);
    }
}

Spara filen och töm cachen genom att besöka yourdomain.com?flush=1

Obs! Requirements-klassen är SilverStripes standardsätt att inkludera skript och stilmallar. Användning av Requirements::customScript() matar ut inline-JavaScript. Den här metoden säkerställer att widgeten laddas på varje sida som hanteras av din PageController.

Alternativ metod 2: Använda Requirements i mall

Du kan också använda SilverStripes mallsyntax för att inkludera JavaScript-filer direkt i din .ss-mall:

Öppna temats mallfil (t.ex. themes/yourtheme/templates/Page.ss)
Lägg till följande nära botten av mallen, före </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: Syntaxen <% require %> är SilverStripes mallnivåmetod för att inkludera resurser. Observera att den här metoden inte stöder tillägg av anpassade dataattribut till skripttaggen, så vi lägger till ett litet initialiseringsavsnitt för att ange widget-ID:t.

Alternativ metod 3: Använda SilverStripe-konfiguration (YAML)

För ett konfigurationsdrivet tillvägagångssätt kan du använda SilverStripes YAML-konfiguration för att lägga till globala krav:

Öppna eller skapa filen app/_config/app.yml
Lägg till konfiguration för att inkludera widgeten via ett anpassat tillägg eller kontrollerinställning:

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

Skapa tilläggsfilen 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);
        ");
    }
}

Tillämpa tillägget på din PageController i app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Kör ?flush=1 för att återskapa konfigurationscachen

Obs! Att använda YAML-konfiguration och tillägg är det mest modulära SilverStripe-sättet. Det håller din chatbot-integration separerad från din huvudkontrollerlogik och gör det enkelt att aktivera eller inaktivera utan att ändra kod.

Steg 3: Verifiera installationen

När du har lagt till koden och tömts SilverStripe-cachen, öppna din webbplats i en ny webbläsarflik. Du bör se chattwidgetknappen i det nedre högra hörnet. Klicka på den för att kontrollera att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du tömde cachen genom att lägga till ?flush=1 i din webbplats-URL. Kontrollera att du ersatte YOUR_WIDGET_ID med ditt faktiska widget-ID från instrumentpanelen. Rensa webbläsarens cache eller visa i inkognitoläge. Öppna webbläsarkonsolen (F12) för att kontrollera om det finns JavaScript-fel. Om du använder klassen Requirements, kontrollera att din PageControllers init()-metod anropas korrekt.