Kuidas lisada Asyntai AI vestlusrobotit SilverStripe'ile

Samm-sammuline juhend SilverStripe CMS-i jaoks

Platvorm:

1. samm: hankige oma manuskood

Esmalt minge oma Asyntai juhtpaneelile ja kerige alla jaotiseni "Manuskood". Kopeerige oma unikaalne manuskood, mis näeb välja selline:

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

Märkus: Ülalolev kood on vaid näide. Peate kopeerima oma unikaalse manuskoodi oma juhtpaneelilt, kuna see sisaldab teie isiklikku vidina ID-d.

Samm 2: lisage SilverStripe'i mallile (soovitatav)

Lihtsaim viis vestlusroboti lisamiseks oma SilverStripe'i saidile on muuta oma teema peamist malli faili otse:

Avage oma teema malli fail (nt themes/yourtheme/templates/Page.ss)
Lisage manuskood vahetult enne sulgevat </body> märgendit:

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

Salvestage fail ja tühjendage SilverStripe'i vahemälu, lisades oma saidi URL-ile ?flush=1

Vihje: SilverStripe kasutab .ss malli faile malli pärimise süsteemiga. Skripti paigutamine oma baas-Page.ss malli tagab, et vestlusrobot kuvatakse igal saidi lehel. Kui teie teema kasutab Includes kausta, saate ka paigutada skripti jagatud kaasamisefaili.

Alternatiivne meetod 1: Requirements klassi kasutamine kontrolleris

SilverStripe pakub Requirements klassi JavaScripti ja CSS-i sõltuvuste programmiliseks haldamiseks. See on arendajatele soovitatav lähenemine:

Avage app/src/PageController.php (või teie lehe kontrolleri fail)
Meetodis init() kasutage Requirements::customScript() vidina dünaamiliseks laadimiseks:

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

Salvestage fail ja tühjendage vahemälu, külastades yourdomain.com?flush=1

Märkus: Requirements klass on SilverStripe'i standardne viis skriptide ja stiililehtede kaasamiseks. Requirements::customScript() kasutamine väljastab sisemist JavaScripti. See meetod tagab, et vidin laetakse igale lehele, mida teie PageController haldab.

Alternatiivne meetod 2: Requirements kasutamine mallis

Samuti saate kasutada SilverStripe'i malli süntaksit JavaScripti failide nõudmiseks otse oma .ss mallis:

Avage oma teema malli fail (nt themes/yourtheme/templates/Page.ss)
Lisage järgmine malli alla, enne </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>

Vihje: <% require %> süntaks on SilverStripe'i mallitasandi viis varade kaasamiseks. Pange tähele, et see meetod ei toeta natiivselt kohandatud andmeatribuutide lisamist skriptimärgendile, seega lisame väikese lähtestamise lõigu vidina ID määramiseks.

Alternatiivne meetod 3: SilverStripe'i seadistuse kasutamine (YAML)

Konfiguratsioonipõhise lähenemise jaoks saate kasutada SilverStripe'i YAML-konfiguratsiooni globaalsete nõuete lisamiseks:

Avage või looge fail app/_config/app.yml
Lisage konfiguratsioon vidina kaasamiseks kohandatud laienduse või kontrolleri seadistuse kaudu:

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

Looge laienduse fail 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);
        ");
    }
}

Rakendage laiendus oma PageControllerile failis app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Käivitage ?flush=1 konfiguratsiooni vahemälu uuesti loomiseks

Märkus: YAML-konfiguratsiooni ja laienduste kasutamine on kõige modulaarsem SilverStripe'i lähenemine. See hoiab teie vestlusroboti integratsiooni eraldatuna teie põhikontrolleri loogikast ja teeb lubamise või keelamine lihtsaks ilma koodi muutmata.

3. samm: kontrollige paigaldust

Pärast koodi lisamist ja SilverStripe'i vahemälu tühjendamist avage oma sait uuel brauseri vahekaardil. Peaksite nägema vestlusvidina nuppu paremas alanurgas. Klõpsake sellel, et veenduda selle avamises ja korrektses toimimises.

Ei näe vidinat? Veenduge, et tühjendasite vahemälu, lisades oma saidi URL-ile ?flush=1. Kontrollige, et asendasite YOUR_WIDGET_ID oma tegeliku vidina ID-ga juhtpaneelilt. Tühjendage brauseri vahemälu või vaadake inkognito režiimis. Avage brauseri konsool (F12) JavaScripti vigade kontrollimiseks. Requirements klassi kasutamisel veenduge, et teie PageControlleri init() meetod kutsutakse korrektselt.