Kako dodati Asyntai AI chatbot na SilverStripe

Vodič korak po korak za SilverStripe CMS

Platforma:

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Korak 2: Dodajte u SilverStripe predložak (Preporučeno)

Najjednostavniji nacin za dodavanje chatbota na vasu SilverStripe stranicu je izravno uredivanje glavne datoteke predloska teme:

Otvorite datoteku predloska teme (npr. themes/vasatema/templates/Page.ss)
Dodajte ugradni kod neposredno prije zavrsne oznake </body>:

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

Spremite datoteku i ispraznite SilverStripe predmemoriju dodavanjem ?flush=1 na URL stranice

Savjet: SilverStripe koristi .ss datoteke predlozaka sa sustavom nasljedivanja predlozaka. Postavljanje skripte u osnovni predlozak Page.ss osigurava pojavljivanje chatbota na svakoj stranici vaseg weba. Ako vasa tema koristi mapu Includes, takoder mozete postaviti skriptu u zajednicku datoteku za ukljucivanje.

Alternativna metoda 1: Korištenje klase Requirements u kontroleru

SilverStripe pruza klasu Requirements za programsko upravljanje JavaScript i CSS ovisnostima. Ovo je preporuceni pristup za programere:

Otvorite app/src/PageController.php (ili svoju datoteku kontrolera stranice)
U metodi init() koristite Requirements::customScript() za dinamicko ucitavanje widgeta:

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

Spremite datoteku i ispraznite predmemoriju posjetom vasadomena.com?flush=1

Napomena: Klasa Requirements standardni je SilverStripe nacin za ukljucivanje skripti i stilova. Koristenje Requirements::customScript() ispisuje umetnuti JavaScript. Ova metoda osigurava ucitavanje widgeta na svakoj stranici kojom upravlja vas PageController.

Alternativna metoda 2: Korištenje Requirements u predlošku

Takoder mozete koristiti sintaksu SilverStripe predlozaka za zahtijevanje JavaScript datoteka izravno u svom .ss predlosku:

Otvorite datoteku predloska teme (npr. themes/vasatema/templates/Page.ss)
Dodajte sljedece pri dnu predloska, prije </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>

Savjet: Sintaksa <% require %> je nacin na razini SilverStripe predloska za ukljucivanje resursa. Imajte na umu da ova metoda izvorno ne podrzava dodavanje prilagodenih atributa podataka u oznaku skripte, pa dodajemo mali inicijalizacijski isjecak za postavljanje ID-ja widgeta.

Alternativna metoda 3: Korištenje SilverStripe konfiguracije (YAML)

Za pristup temeljen na konfiguraciji mozete koristiti SilverStripe YAML konfiguraciju za dodavanje globalnih zahtjeva:

Otvorite ili izradite datoteku app/_config/app.yml
Dodajte konfiguraciju za ukljucivanje widgeta putem prilagodenog prosirenja ili postavljanja kontrolera:

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

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

Primijenite prosirenje na svoj PageController u app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Pokrenite ?flush=1 za ponovnu izgradnju konfiguracijske predmemorije

Napomena: Koristenje YAML konfiguracije i prosirenja je najmodularniji SilverStripe pristup. Drzi integraciju chatbota odvojenom od glavne logike kontrolera i olaksava omogucavanje ili onemogucavanje bez promjene koda.

Korak 3: Provjerite instalaciju

Nakon dodavanja koda i praznjenja SilverStripe predmemorije, otvorite stranicu u novoj kartici preglednika. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.

Ne vidite widget? Provjerite jeste li ispraznili predmemoriju dodavanjem ?flush=1 na URL stranice. Provjerite jeste li zamijenili YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta s nadzorne ploce. Ocistite predmemoriju preglednika ili pregledavajte u anonimnom nacinu. Otvorite konzolu preglednika (F12) da provjerite postoje li JavaScript greske. Ako koristite klasu Requirements, potvrdite da se metoda init() vaseg PageControllera ispravno poziva.