Ako pridať Asyntai AI chatbota do Grav

Návod krok za krokom pre Grav CMS

Platforma:

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.

Krok 2: Pridanie do šablóny temy Grav (odporúčané)

Najlepší sposob pridania chatbota na všetky stránky vasej stránky Grav je uprava zakladnej šablóny Twig vasej temy:

Prejdite do priečinka user/themes/vasatema/templates/ vasho projektu Grav a otvorte default.html.twig (alebo zakladnu šablónu používanú vasou temou)
Pridajte svoj vkladací kod Asyntai pred uzatvaraci tag </body>:

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

Uložte súbor

Tip: Grav pouziva Twig ako svoj sablonovaci engine. Zakladna šablóna je typicky default.html.twig alebo partials/base.html.twig v zavislosti od vasej temy. Skontrolujte strukturu vasej temy a najdite správny súbor, ktory obsahuje uzatvaraci tag </body>.

Alternativna metoda 1: Použitie Správcu aktiv Grav

Vstavany Správca aktiv Grav poskytuje cisty sposob pridavania JavaScript aktiv cez Twig:

Otvorte zakladnu šablónu Twig vasej temy (napr. user/themes/vasatema/templates/partials/base.html.twig)
Použite Správcu aktiv na pridanie JavaScriptu:

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

Alebo pridajte vložený JavaScript na dynamicke vytvorenie elementu skriptu vo vasej zakladnej šablóne:

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

Poznámka: Metoda so Spravcom aktiv je prístup odporúčaný Grav na spravu JavaScript aktiv. Poskytuje vstavanu podporu pre pipelining aktiv, zoradovanie a zoskupovanie.

Alternativna metoda 2: Použitie pluginu Custom JS

Ak uprednostnujete prístup zalozeny na pluginoch bez upravy súborov temy:

Nainštalujte plugin "Custom JS" z admin panelu Grav alebo cez CLI:

bin/gpm install custom-js

Prejdite na Admin > Pluginy > Custom JS
Pridajte kod vkladacieho skriptu:

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

Uložte konfiguráciu pluginu

Tip: Použitie pluginu na vkladanie skriptov znamena, ze nemusite upravovat žiadne súbory temy. To uľahcuje prepinanie alebo aktualizaciu tem bez straty vasej integracie chatbota.

Alternativna metoda 3: Použitie prepísania bloku v detskej šablóne

Ak vasa tema Grav pouziva dedičnosť blokov Twig, môžete prepisat spodny blok v detskej šablóne:

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

Vytvorte alebo otvorte podradenú šablónu, ktorá rozširuje základnú šablónu vašej témy
Pridajte prepisanie bloku zobrazene vyššie
Volanie parent() zabezpecuje, ze vsetok existujuci obsah v bloku bude zachovany

Poznámka: Tato metoda pouziva system dedičnosti šablón Twig. Uistite sa, ze názov bloku (napr. bottom) zodpoveda bloku definovanemu v zakladnej šablóne vasej temy. Bezne názvy blokov zahrnuju bottom, javascripts alebo footer.

Alternativna metoda 4: Použitie pluginu Custom Head pre Grav

Dalsia možnosť zalozena na pluginoch je plugin Custom Head:

Nainštalujte plugin custom-head cez CLI alebo administracny panel:

bin/gpm install custom-head

Prejdite na Admin > Pluginy > Custom Head
Pridajte kód vkladacieho skriptu Asyntai do konfigurácie pluginu:

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

Uložte konfiguráciu

Tip: Plugin Custom Head vam umoznuje vkladat kod do sekcii hlavičky alebo tela vasej stránky bez zasahovania do súborov temy. Skontrolujte dokumentaciu pluginu kvoli spravnej možnosti umiestnenia na vloženie skriptu pred uzatvaraci tag </body>.

Krok 3: Vymazanie vyrovnávacej pamäte a overenie

Po pridani kodu vymažte vyrovnávaciu pamat Grav a overte inštaláciu:

# Clear cache via CLI
bin/grav clearcache

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

Otvorte svoju stránku Grav v novej karte prehliadača. Mali by ste vidiet tlačidlo chatoveho widgetu v pravom dolnom rohu. Kliknite nan, aby ste sa uistili, ze sa otvara a funguje správne.

Nevidíte widget? Uistite sa, ze ste vymazali vyrovnávaciu pamat Grav prikazom bin/grav clearcache alebo z administracneho panelu. Skontrolujte, ze ste nahradili YOUR_WIDGET_ID vasim skutocnym ID widgetu z dashboardu. Vymažte vyrovnávaciu pamat prehliadača alebo zobrazite web v rezime inkognito. Otvorte konzolu prehliadača (F12) a skontrolujte pripadne chyby JavaScriptu. Overte, ze skript je pritomny v zdrojovom kode stránky kliknutim pravym tlacidlom a vybranim "Zobrazit zdrojovy kod stránky".

Dokumentácia

Ako pridať Asyntai AI chatbota do Grav

Krok 1: Získajte svoj vkladací kód

Krok 2: Pridanie do šablóny temy Grav (odporúčané)

Alternativna metoda 1: Použitie Správcu aktiv Grav

Alternativna metoda 2: Použitie pluginu Custom JS

Alternativna metoda 3: Použitie prepísania bloku v detskej šablóne

Alternativna metoda 4: Použitie pluginu Custom Head pre Grav

Krok 3: Vymazanie vyrovnávacej pamäte a overenie