Jak přidat Asyntai AI chatbota na Grav

Podrobný návod pro Grav CMS

Platforma:

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání do šablony motivu Grav (doporučeno)

Nejlepší způsob, jak přidat chatbota na všechny stránky vašeho webu Grav, je úprava základní šablony Twig vašeho motivu:

Přejděte do adresáře user/themes/yourtheme/templates/ vašeho projektu Grav a otevřete default.html.twig (nebo základní šablonu používanou vaším motivem)
Přidejte váš Asyntai embed kód před uzavírací značku </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 soubor

Tip: Grav používá Twig jako šablonovací engine. Základní šablona je obvykle default.html.twig nebo partials/base.html.twig v závislosti na vašem motivu. Zkontrolujte strukturu svého motivu a najděte správný soubor obsahující uzavírací značku </body>.

Alternativní metoda 1: Použití Grav Asset Manageru

Vestavěný Asset Manager v Grav poskytuje čistý způsob přidávání JavaScriptových aktiv přes Twig:

Otevřete základní šablonu Twig vašeho motivu (např. user/themes/yourtheme/templates/partials/base.html.twig)
Použijte Asset Manager pro přidání JavaScriptu:

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

Nebo přidejte vložený JavaScript pro dynamické vytvoření elementu script v základní šabloně:

<!-- 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 Asset Manager je přístup doporučený Grav pro správu JavaScriptových aktiv. Poskytuje vestavěnou podporu pro pipeline aktiv, řazení a seskupování.

Alternativní metoda 2: Použití pluginu Custom JS

Pokud dáváte přednost přístupu založenému na pluginu bez úpravy souborů motivu:

Nainstalujte plugin „Custom JS“ z administračního panelu Grav nebo přes CLI:

bin/gpm install custom-js

Přejděte na Admin > Plugins > Custom JS
Přidejte kód embed skriptů:

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

Uložte konfiguraci pluginu

Tip: Použití pluginu pro vkládání skriptů znamená, že nemusíte upravovat žádné soubory motivu. Díky tomu je snazší přepínat nebo aktualizovat motivy bez ztráty integrace chatbota.

Alternativní metoda 3: Použití přepsání bloku v podřízené šabloně

Pokud váš motiv Grav používá dědičnost bloků Twig, můžete přepsat spodní blok v podřízené šabloně:

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

Vytvořte nebo otevřete podřízenou šablonu, která rozšiřuje základní šablonu vašeho motivu
Přidejte přepsání bloku zobrazené výše
Volání parent() zajistí zachování veškerého existujícího obsahu v bloku

Poznámka: Tato metoda využívá systém dědičnosti šablon Twig. Ujistěte se, že název bloku (např. bottom) odpovídá bloku definovanému v základní šabloně vašeho motivu. Běžné názvy bloků zahrnují bottom, javascripts nebo footer.

Alternativní metoda 4: Použití pluginu Grav Custom Head

Další možností založenou na pluginu je plugin Custom Head:

Nainstalujte plugin custom-head přes CLI nebo administrační panel:

bin/gpm install custom-head

Přejděte na Admin > Plugins > Custom Head
Přidejte kód embed skriptů Asyntai do konfigurace pluginu:

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

Uložte konfiguraci

Tip: Plugin Custom Head umožňuje vkládat kód do sekcí head nebo body vašeho webu bez úpravy souborů motivu. Zkontrolujte dokumentaci pluginu pro správnou možnost umístění pro vložení skriptů před uzavírací značku </body>.

Krok 3: Vymažte mezipaměť a ověřte

Po přidání kódu vymažte mezipaměť Grav a ověřte instalaci:

# Clear cache via CLI
bin/grav clearcache

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

Otevřete svůj web Grav v nové záložce prohlížeče. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ověřte, že se správně otevírá a funguje.

Nevidíte widget? Ujistěte se, že jste vymazali mezipaměť Grav příkazem bin/grav clearcache nebo z administračního panelu. Zkontrolujte, že jste nahradili YOUR_WIDGET_ID skutečným ID widgetu z dashboardu. Vymažte mezipaměť prohlížeče nebo web zobrazte v anonymním režimu. Otevřete konzoli prohlížeče (F12) a zkontrolujte případné chyby JavaScriptu. Ověřte přítomnost skriptů ve zdrojovém kódu stránky kliknutím pravým tlačítkem a výběrem "Zobrazit zdrojový kód stránky".

Dokumentace

Jak přidat Asyntai AI chatbota na Grav

Krok 1: Získejte svůj vkládací kód

Krok 2: Přidání do šablony motivu Grav (doporučeno)

Alternativní metoda 1: Použití Grav Asset Manageru

Alternativní metoda 2: Použití pluginu Custom JS

Alternativní metoda 3: Použití přepsání bloku v podřízené šabloně

Alternativní metoda 4: Použití pluginu Grav Custom Head

Krok 3: Vymažte mezipaměť a ověřte