Az Asyntai AI Chatbot hozzáadása a Grav-hoz

Lépésről lépésre útmutató a Grav CMS-hez

Platform:

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

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

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Hozzáadás a Grav téma sablonhoz (ajánlott)

A legjobb módszer a chatbot hozzáadásához a Grav webhely összes oldalára a téma alap Twig sablonjának szerkesztése:

Navigáljon a Grav projekt user/themes/yourtheme/templates/ könyvtárába, és nyissa meg a default.html.twig fájlt (vagy a téma által használt alap sablont)
Adja hozzá az Asyntai beágyazási kódot a záró </body> tag elé:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Mentse el a fájlt

Tipp: A Grav a Twig-et használja sablonmotorként. Az alap sablon általában a default.html.twig vagy a partials/base.html.twig a témától függően. Ellenőrizze a téma struktúráját a </body> záró taget tartalmazó megfelelő fájl megtalálásához.

1. alternatív módszer: A Grav Asset Manager használata

A Grav beépített Asset Managere tiszta módot biztosít JavaScript eszközök Twig-en keresztüli hozzáadásához:

Nyissa meg a téma alap Twig sablonját (pl. user/themes/yourtheme/templates/partials/base.html.twig)
Használja az Asset Managert a JavaScript hozzáadásához:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Vagy adjon hozzá inline JavaScriptet a script elem dinamikus létrehozásához az alap sablonban:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  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.body.appendChild(script);
})();
</script>
</body>
</html>

Megjegyzés: Az Asset Manager módszer a Grav által ajánlott megközelítés a JavaScript eszközök kezeléséhez. Beépített támogatást biztosít az eszközcsővezetékhez, rendezéshez és csoportosításhoz.

2. alternatív módszer: Egyéni JS bővítmény használata

Ha a témafájlok szerkesztése nélküli, bővítményalapú megközelítést részesíti előnyben:

Telepítse a "Custom JS" bővítményt a Grav admin panelről vagy CLI-n keresztül:

bin/gpm install custom-js

Lépjen az Admin > Bővítmények > Custom JS menübe
Adja hozzá a beágyazási script kódot:

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

Mentse a bővítmény konfigurációját

Tipp: A scriptek bővítménnyel való injektálása azt jelenti, hogy nem kell módosítania semmilyen témafájlt. Ez megkönnyíti a témák cseréjét vagy frissítését a chatbot integráció elvesztése nélkül.

3. alternatív módszer: Blokk felülírás használata gyermek sablonban

Ha a Grav téma Twig blokk-öröklést használ, felülírhatja az alsó blokkot egy gyermek sablonban:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Hozzon létre vagy nyisson meg egy gyermek sablont, amely a téma alapsablonját bővíti
Adja hozzá a fent látható blokk felülírást
A parent() hívás biztosítja, hogy a blokk összes meglévő tartalma megmaradjon

Megjegyzés: Ez a módszer a Twig sablonöröklési rendszerét használja. Győződjön meg arról, hogy a blokk neve (pl. bottom) megegyezik a téma alap sablonjában definiált blokk nevével. Általános blokk nevek: bottom, javascripts vagy footer.

4. alternatív módszer: A Grav Custom Head bővítmény használata

Egy másik bővítmény alapú lehetőség a Custom Head bővítmény:

Telepítse a custom-head bővítményt CLI-n vagy admin panelen keresztül:

bin/gpm install custom-head

Lépjen az Admin > Bővítmények > Custom Head menübe
Adja hozzá az Asyntai beágyazási script kódját a bővítmény konfigurációjában:

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

Mentse a konfigurációt

Tipp: A Custom Head bővítmény lehetővé teszi kód injektálását a webhely head vagy body részébe témafájlok módosítása nélkül. Ellenőrizze a bővítmény dokumentációját a helyes elhelyezési lehetőségért a script záró </body> tag elé való beillesztéséhez.

3. lépés: Gyorsítótár törlése és ellenőrzés

A kód hozzáadása után törölje a Grav gyorsítótárát, és ellenőrizze a telepítést:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Nyissa meg Grav oldalát egy új böngészőlapon. Látnia kell a chat widget gombot a jobb alsó sarokban. Kattintson rá, hogy meggyőződjön arról, hogy megfelelően nyílik meg és működik.

Nem látja a widgetet? Győződjön meg arról, hogy törölte a Grav gyorsítótárát a bin/grav clearcache paranccsal vagy az adminisztrációs panelről. Ellenőrizze, hogy a YOUR_WIDGET_ID értéket a tényleges widget-azonosítójára cserélte-e az irányítópultról. Törölje a böngésző gyorsítótárát, vagy tekintse meg inkognító módban. Nyissa meg a böngésző konzolját (F12) a JavaScript-hibák ellenőrzéséhez. Ellenőrizze, hogy a script jelen van-e az oldal forrásában, jobb gombbal kattintva és az „Oldal forrásának megtekintése" lehetőséget választva.

Dokumentáció

Az Asyntai AI Chatbot hozzáadása a Grav-hoz

1. lépés: Szerezze be a beágyazási kódját

2. lépés: Hozzáadás a Grav téma sablonhoz (ajánlott)

1. alternatív módszer: A Grav Asset Manager használata

2. alternatív módszer: Egyéni JS bővítmény használata

3. alternatív módszer: Blokk felülírás használata gyermek sablonban

4. alternatív módszer: A Grav Custom Head bővítmény használata

3. lépés: Gyorsítótár törlése és ellenőrzés