Jak dodać chatbota AI Asyntai do Grav
Instrukcja krok po kroku dla CMS Grav
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Krok 1: Pobierz swój kod osadzania
Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.
Krok 2: Dodaj do szablonu motywu Grav (zalecane)
Najlepszym sposobem dodania chatbota do wszystkich stron witryny Grav jest edycja bazowego szablonu Twig motywu:
- Przejdź do katalogu user/themes/yourtheme/templates/ projektu Grav i otwórz plik default.html.twig (lub bazowy szablon używany przez motyw)
- Dodaj kod osadzania Asyntai przed zamykającym tagiem </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>
- Zapisz plik
Wskazówka: Grav używa Twig jako silnika szablonów. Bazowy szablon to zazwyczaj default.html.twig lub partials/base.html.twig w zależności od motywu. Sprawdź strukture motywu, aby znalezc prawidlowy plik zawierajacy zamykający tag </body>.
Metoda alternatywna 1: Użycie menedżera zasobów Grav
Wbudowany menedżer zasobow Grav zapewnia przejrzysty sposób dodawania zasobow JavaScript przez Twig:
- Otwórz bazowy szablon Twig motywu (np. user/themes/yourtheme/templates/partials/base.html.twig)
- Użyj menedżera zasobów, aby dodać JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Lub dodaj wbudowany JavaScript, aby dynamicznie utworzyć element skryptu w bazowym szablonie:
<!-- 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>
Uwaga: Metoda menedżera zasobow jest zalecanym przez Grav podejsciem do zarządzania zasobami JavaScript. Zapewnia wbudowana obsługę potokowania, kolejkowania i grupowania zasobow.
Metoda alternatywna 2: Użycie wtyczki Custom JS
Jeśli wolisz podejście oparte na wtyczkach bez edycji plików motywu:
- Zainstaluj wtyczkę "Custom JS" przez panel administracyjny Grav lub przez CLI:
bin/gpm install custom-js
- Przejdź do Admin > Plugins > Custom JS
- Dodaj kod skryptu osadzania:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Zapisz konfigurację wtyczki
Wskazówka: Użycie wtyczki do wstrzykiwania skryptów oznacza, ze nie trzeba modyfikować żadnych plików motywu. Ułatwia to zmiane lub aktualizacje motywów bez utraty integracji chatbota.
Metoda alternatywna 3: Użycie nadpisania bloku w szablonie potomnym
Jeśli motyw Grav używa dziedziczenia blokow Twig, możesz nadpisać blok dolny w szablonie potomnym:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Utwórz lub otwórz szablon potomny, który rozszerza bazowy szablon motywu
- Dodaj nadpisanie bloku pokazane powyżej
- Wywołanie parent() zapewnia zachowanie całej istniejącej zawartości w bloku
Uwaga: Ta metoda wykorzystuje system dziedziczenia szablonów Twig. Upewnij sie, ze nazwa bloku (np. bottom) odpowiada blokowi zdefiniowanemu w bazowym szablonie motywu. Typowe nazwy blokow to bottom, javascripts lub footer.
Metoda alternatywna 4: Użycie wtyczki Custom Head dla Grav
Kolejna opcja oparta na wtyczkach to wtyczka Custom Head:
- Zainstaluj wtyczkę custom-head przez CLI lub panel administracyjny:
bin/gpm install custom-head
- Przejdź do Admin > Plugins > Custom Head
- Dodaj kod skryptu osadzania Asyntai w konfiguracji wtyczki:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Zapisz konfigurację
Wskazówka: Wtyczka Custom Head umożliwia wstrzykiwanie kodu do sekcji head lub body witryny bez modyfikowania plików motywu. Sprawdź dokumentacje wtyczki, aby znalezc prawidlowa opcje umiejscowienia do wstawienia skryptu przed zamykającym tagiem </body>.
Krok 3: Wyczyść pamięć podręczną i zweryfikuj
Po dodaniu kodu wyczyść pamięć podręczna Grav i zweryfikuj instalacje:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Otwórz witrynę Grav w nowej karcie przeglądarki. Przycisk widgetu czatu powinien byc widoczny w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.
Nie widzisz widgetu? Upewnij sie, ze wyczysciles pamięć podręczna Grav za pomocą bin/grav clearcache lub z panelu administracyjnego. Sprawdź, czy zamieniles YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu z panelu sterowania. Wyczyść pamięć podręczna przeglądarki lub otwórz stronę w trybie incognito. Otwórz konsolę przeglądarki (F12), aby sprawdzic, czy nie ma błędów JavaScript. Zweryfikuj obecność skryptu w zrodle strony, klikajac prawym przyciskiem myszy i wybierajac "View Page Source".