Kako dodati Asyntai AI chatbot na Grav
Vodič korak po korak za Grav CMS
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
Korak 1: Nabavite svoj kod za ugradnju
Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.
Korak 2: Dodajte u predložak Grav teme (Preporučeno)
Najbolji nacin za dodavanje chatbota na sve stranice vase Grav stranice je uredivanje osnovnog Twig predloska teme:
- Navigirajte do direktorija user/themes/vasatema/templates/ svog Grav projekta i otvorite default.html.twig (ili osnovni predlozak koji koristi vasa tema)
- Dodajte svoj Asyntai ugradni kod prije zavrsne oznake </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>
- Spremite datoteku
Savjet: Grav koristi Twig kao svoj sustav predlozaka. Osnovni predlozak je obicno default.html.twig ili partials/base.html.twig ovisno o vasoj temi. Provjerite strukturu teme da pronadete ispravnu datoteku koja sadrzi zavrsnu oznaku </body>.
Alternativna metoda 1: Korištenje Grav upravitelja resursa
Ugradeni upravitelj resursa Grava pruza cist nacin za dodavanje JavaScript resursa putem Twiga:
- Otvorite osnovni Twig predlozak teme (npr. user/themes/vasatema/templates/partials/base.html.twig)
- Koristite upravitelja resursa za dodavanje JavaScripta:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Ili dodajte umetnuti JavaScript za dinamicko stvaranje elementa skripte u svom osnovnom predlosku:
<!-- 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>
Napomena: Metoda upravitelja resursa je Grav-preporuceni pristup za upravljanje JavaScript resursima. Pruza ugradenu podrsku za cjevovod resursa, redoslijed i grupiranje.
Alternativna metoda 2: Korištenje dodatka Custom JS
Ako preferirate pristup temeljen na dodacima bez uredivanja datoteka teme:
- Instalirajte dodatak "Custom JS" putem administratorskog panela Grava ili putem CLI-ja:
bin/gpm install custom-js
- Idite na Admin > Plugins > Custom JS
- Dodajte kod ugradne skripte:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Spremite konfiguraciju dodatka
Savjet: Koristenje dodatka za ubacivanje skripti znaci da ne trebate mijenjati datoteke teme. To olaksava promjenu ili azuriranje tema bez gubitka integracije chatbota.
Alternativna metoda 3: Korištenje nadjačavanja bloka u podpredlošku
Ako vasa Grav tema koristi nasljedivanje Twig blokova, mozete nadjacati donji blok u podpredlosku:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Izradite ili otvorite podpredložak koji proširuje osnovni predložak teme
- Dodajte nadjačavanje bloka prikazano gore
- Poziv parent() osigurava da je sav postojeći sadržaj u bloku sačuvan
Napomena: Ova metoda koristi sustav nasljedivanja Twig predlozaka. Provjerite odgovara li naziv bloka (npr. bottom) bloku definiranom u osnovnom predlosku teme. Uobicajeni nazivi blokova ukljucuju bottom, javascripts ili footer.
Alternativna metoda 4: Korištenje Grav dodatka Custom Head
Jos jedna opcija temeljena na dodacima je dodatak Custom Head:
- Instalirajte dodatak custom-head putem CLI-ja ili administratorskog panela:
bin/gpm install custom-head
- Idite na Admin > Plugins > Custom Head
- Dodajte svoj Asyntai ugradni kod skripte u konfiguraciji dodatka:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Spremite konfiguraciju
Savjet: Dodatak Custom Head omogucuje ubacivanje koda u odjeljke zaglavlja ili tijela stranice bez diranja datoteka teme. Provjerite dokumentaciju dodatka za ispravnu opciju smjestaja za umetanje skripte prije zavrsne oznake </body>.
Korak 3: Očistite predmemoriju i provjerite
Nakon dodavanja koda ocistite predmemoriju Grava i provjerite instalaciju:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Otvorite svoju Grav stranicu u novoj kartici preglednika. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.
Ne vidite widget? Provjerite jeste li ocistili predmemoriju Grava s bin/grav clearcache ili iz administratorskog panela. Provjerite jeste li zamijenili YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta s nadzorne ploce. Ocistite predmemoriju preglednika ili pregledavajte u anonimnom nacinu. Otvorite konzolu preglednika (F12) da provjerite postoje li JavaScript greske. Provjerite je li skripta prisutna u izvoru stranice desnim klikom i odabirom "View Page Source".