Asyntai AI -chatbotin lisääminen SilverStripeen

Vaiheittainen opas SilverStripe CMS:lle

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Lisää SilverStripe-mallitiedostoon (suositeltu)

Yksinkertaisin tapa lisätä chatbot SilverStripe-sivustollesi on muokata teemasi päämallitiedostoa suoraan:

Avaa teemasi mallitiedosto (esim. themes/yourtheme/templates/Page.ss)
Lisää upotuskoodi juuri ennen sulkevaa </body>-tagia:

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

Tallenna tiedosto ja tyhjennä SilverStripe-välimuisti lisäämällä ?flush=1 sivustosi URL-osoitteeseen

Vinkki: SilverStripe käyttää .ss-mallitiedostoja mallien periytymisjärjestelmällä. Skriptin sijoittaminen perus-Page.ss-mallitiedostoon varmistaa, että chatbot näkyy sivustosi jokaisella sivulla. Jos teemasi käyttää Includes-kansiota, voit myös sijoittaa skriptin jaettuun sisällytystiedostoon.

Vaihtoehtoinen menetelmä 1: Requirements-luokan käyttö kontrollerissa

SilverStripe tarjoaa Requirements-luokan JavaScript- ja CSS-riippuvuuksien hallintaan ohjelmallisesti. Tämä on suositeltu lähestymistapa kehittäjille:

Avaa app/src/PageController.php (tai sivukontrolleritiedostosi)
Käytä init()-metodissa Requirements::customScript()-funktiota widgetin dynaamiseen lataamiseen:

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

Tallenna tiedosto ja tyhjennä välimuisti vierailemalla osoitteessa yourdomain.com?flush=1

Huomautus: Requirements-luokka on SilverStripen vakiotapa sisällyttää skriptejä ja tyylitiedostoja. Requirements::customScript() tulostaa inline-JavaScriptiä. Tämä menetelmä varmistaa, että widget ladataan jokaisella PageControllerin käsittelemällä sivulla.

Vaihtoehtoinen menetelmä 2: Requirementsin käyttö mallitiedostossa

Voit myös käyttää SilverStripen mallisyntaksia JavaScript-tiedostojen vaatimiseen suoraan .ss-mallitiedostossasi:

Avaa teemasi mallitiedosto (esim. themes/yourtheme/templates/Page.ss)
Lisää seuraava mallitiedoston loppuun, ennen </body>-tagia:

<% 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>

Vinkki: <% require %>-syntaksi on SilverStripen mallitason tapa sisällyttää resursseja. Huomaa, että tämä menetelmä ei natiivisti tue mukautettujen data-attribuuttien lisäämistä script-tagiin, joten lisäämme pienen alustuspätkän widget-tunnuksen asettamiseksi.

Vaihtoehtoinen menetelmä 3: SilverStripe-konfiguraation käyttö (YAML)

Konfiguraatiopohjaiseen lähestymistapaan voit käyttää SilverStripen YAML-konfiguraatiota globaalien vaatimusten lisäämiseen:

Avaa tai luo tiedosto app/_config/app.yml
Lisää konfiguraatio widgetin sisällyttämiseksi mukautetun laajennuksen tai kontrollerin avulla:

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

Luo laajennustiedosto 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);
        ");
    }
}

Ota laajennus käyttöön PageControllerissasi tiedostossa app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Suorita ?flush=1 rakentaaksesi konfiguraatiovälimuistin uudelleen

Huomautus: YAML-konfiguraation ja laajennusten käyttö on modulaarisin SilverStripe-lähestymistapa. Se pitää chatbot-integraatiosi erillään pääkontrollerilogiikasta ja tekee käyttöönotosta ja poistosta helppoa ilman koodimuutoksia.

Vaihe 3: Vahvista asennus

Koodin lisäämisen ja SilverStripe-välimuistin tyhjentämisen jälkeen avaa sivustosi uudessa selaimen välilehdessä. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että tyhjensit välimuistin lisäämällä ?flush=1 sivustosi URL-osoitteeseen. Tarkista, että korvasit YOUR_WIDGET_ID todellisella widget-tunnuksellasi hallintapaneelista. Tyhjennä selaimen välimuisti tai tarkastele incognito-tilassa. Avaa selaimen konsoli (F12) tarkistaaksesi mahdolliset JavaScript-virheet. Jos käytät Requirements-luokkaa, varmista, että PageControllerin init()-metodia kutsutaan oikein.