Kako dodati klepetalnik Asyntai AI v SilverStripe

Vodič po korakih za SilverStripe CMS

Platforma:

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte v predlogo SilverStripe (priporočeno)

Najpreprostejši način za dodajanje klepetalnika na vaše spletno mesto SilverStripe je neposredno urejanje glavne datoteke predloge vaše teme:

Odprite datoteko predloge svoje teme (npr. themes/yourtheme/templates/Page.ss)
Dodajte vdelano kodo tik pred zaključno oznako </body>:

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

Shranite datoteko in počistite predpomnilnik SilverStripe tako, da dodate ?flush=1 k URL-ju svojega spletnega mesta

Nasvet: SilverStripe uporablja datoteke predlog .ss s sistemom dedovanja predlog. Umestitev skripte v osnovno predlogo Page.ss zagotavlja, da se klepetalnik prikaže na vsaki strani vašega spletnega mesta. Če vaša tema uporablja mapo Includes, lahko skripto umestite tudi v skupno datoteko vkljuckov.

Alternativni način 1: Uporaba razreda Requirements v krmilniku

SilverStripe zagotavlja razred Requirements za programsko upravljanje odvisnosti JavaScript in CSS. To je priporočeni pristop za razvijalce:

Odprite app/src/PageController.php (ali svojo datoteko krmilnika strani)
V metodi init() uporabite Requirements::customScript() za dinamično nalaganje pripomocka:

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

Shranite datoteko in počistite predpomnilnik tako, da obiščete yourdomain.com?flush=1

Opomba: Razred Requirements je standardni način SilverStripe za vkljucevanje skript in slogovnih predlog. Uporaba Requirements::customScript() izpiše vgrajeni JavaScript. Ta način zagotavlja, da se pripomocek naloži na vsaki strani, ki jo obravnava vaš PageController.

Alternativni način 2: Uporaba Requirements v predlogi

Uporabite lahko tudi skladnjo predlog SilverStripe za zahtevanje datotek JavaScript neposredno v svoji predlogi .ss:

Odprite datoteko predloge svoje teme (npr. themes/yourtheme/templates/Page.ss)
Dodajte naslednje blizu dna predloge, pred </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>

Nasvet: Skladnja <% require %> je način na ravni predlog SilverStripe za vkljucevanje sredstev. Upoštevajte, da ta način izvorno ne podpira dodajanja atributov podatkov po meri oznaki skripte, zato dodamo majhen inicializacijski delcek za nastavitev ID-ja pripomocka.

Alternativni način 3: Uporaba konfiguracije SilverStripe (YAML)

Za pristop, ki temelji na konfiguraciji, lahko uporabite konfiguracijo YAML SilverStripe za dodajanje globalnih zahtev:

Odprite ali ustvarite datoteko app/_config/app.yml
Dodajte konfiguracijo za vključitev pripomocka prek razširitve po meri ali nastavitve krmilnika:

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

Ustvarite datoteko razširitve 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);
        ");
    }
}

Uveljavite razširitev na svojem PageController v app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Zaženite ?flush=1 za ponovno izgradnjo konfiguracijskega predpomnilnika

Opomba: Uporaba konfiguracije YAML in razširitev je najbolj modularen pristop SilverStripe. Ohranja vašo integracijo klepetalnika loceno od glavne logike krmilnika in omogoča enostavno omogočanje ali onemogočanje brez spreminjanja kode.

Korak 3: Preverite namestitev

Po dodajanju kode in cišcenju predpomnilnika SilverStripe odprite svoje spletno mesto v novem zavihku brskalnika. V spodnjem desnem kotu bi morali videti gumb pripomocka za klepet. Kliknite nanj, da se prepričajte, da se odpre in pravilno deluje.

Ne vidite klepetalnika? Prepričajte se, da ste pocistili predpomnilnik z dodajanjem ?flush=1 k URL-ju svojega spletnega mesta. Preverite, da ste YOUR_WIDGET_ID zamenjali z dejanskim ID-jem pripomocka iz nadzorne plošce. Počistite predpomnilnik brskalnika ali stran oglejte v načinu brez beleženja. Odprite konzolo brskalnika (F12) in preverite morebitne napake JavaScript. Če uporabljate razred Requirements, preverite, da se metoda init() vašega PageController pravilno klice.