Asyntai AI -chatbotin lisääminen Graviin
Vaiheittainen opas Grav CMS:lle
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
Vaihe 1: Hanki upotuskoodisi
Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.
Vaihe 2: Lisääminen Grav-teemapohjaan (suositeltu)
Paras tapa lisätä chatbot kaikille Grav-sivustosi sivuille on muokata teemasi Twig-peruspohjaa:
- Siirry Grav-projektisi user/themes/yourtheme/templates/-hakemistoon ja avaa default.html.twig (tai teemasi käyttämä peruspohja)
- Lisää Asyntai-upotuskoodisi ennen sulkevaa </body>-tagia:
<!-- 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>
- Tallenna tiedosto
Vinkki: Grav käyttää Twigiä mallinnusmoottorinaan. Peruspohja on tyypillisesti default.html.twig tai partials/base.html.twig teemasta riippuen. Tarkista teemasi rakenne löytääksesi oikean tiedoston, joka sisältää sulkevan </body>-tagin.
Vaihtoehtoinen menetelmä 1: Grav Asset Managerin käyttö
Gravin sisäänrakennettu Asset Manager tarjoaa siistin tavan lisätä JavaScript-resursseja Twigin kautta:
- Avaa teemasi Twig-peruspohja (esim. user/themes/yourtheme/templates/partials/base.html.twig)
- Käytä Asset Manageria JavaScriptin lisäämiseen:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Tai lisää inline-JavaScript luodaksesi script-elementin dynaamisesti peruspohjassasi:
<!-- 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>
Huomautus: Asset Manager -menetelmä on Gravin suosittelema tapa hallita JavaScript-resursseja. Se tarjoaa sisäänrakennetun tuen resurssien ketjuttamiselle, järjestämiselle ja ryhmittelylle.
Vaihtoehtoinen menetelmä 2: Custom JS -lisäosan käyttö
Jos haluat lisäosapohjaisen lähestymistavan muokkaamatta teematiedostoja:
- Asenna "Custom JS" -lisäosa Gravin hallintapaneelista tai komentoriviltä:
bin/gpm install custom-js
- Siirry kohtaan Admin > Plugins > Custom JS
- Lisää upotuskoodi:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Tallenna lisäosan asetukset
Vinkki: Lisäosan käyttäminen skriptien lisäykseen tarkoittaa, ettei teematiedostoja tarvitse muokata. Tämä helpottaa teemojen vaihtamista tai päivittämistä ilman chatbot-integraation menettämistä.
Vaihtoehtoinen menetelmä 3: Lohkon ylikirjoitus lapsitemplaatissa
Jos Grav-teemasi käyttää Twig-lohkojen periytymistä, voit ylikirjoittaa alalohkon lapsitemplaatissa:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Luo tai avaa lapsitemplaatti, joka laajentaa teemasi peruspohjaa
- Lisää yllä näytetty lohkon ylikirjoitus
- parent()-kutsu varmistaa, että kaikki olemassa oleva sisältö lohkossa säilyy
Huomautus: Tämä menetelmä käyttää Twigin templaattien periytymistä. Varmista, että lohkon nimi (esim. bottom) vastaa teemasi peruspohjassa määritettyä lohkoa. Yleisiä lohkonimiä ovat bottom, javascripts tai footer.
Vaihtoehtoinen menetelmä 4: Grav Custom Head -lisäosan käyttö
Toinen lisäosapohjainen vaihtoehto on Custom Head -lisäosa:
- Asenna custom-head-lisäosa komentoriviltä tai hallintapaneelista:
bin/gpm install custom-head
- Siirry kohtaan Admin > Plugins > Custom Head
- Lisää Asyntai-upotuskoodisi lisäosan asetuksiin:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Tallenna asetukset
Vinkki: Custom Head -lisäosa mahdollistaa koodin lisäämisen sivuston head- tai body-osioihin ilman teematiedostojen muokkausta. Tarkista lisäosan dokumentaatio oikean sijoitusvaihtoehdon löytämiseksi skriptin lisäämiseen ennen sulkevaa </body>-tagia.
Vaihe 3: Tyhjennä välimuisti ja vahvista
Koodin lisäämisen jälkeen tyhjennä Gravin välimuisti ja varmista asennus:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Avaa Grav-sivustosi uudessa selainvälilehdessä. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.
Etkö näe widgetiä? Varmista, että tyhjensit Grav-välimuistin komennolla bin/grav clearcache tai hallintapaneelista. Tarkista, että korvasit YOUR_WIDGET_ID todellisella widget-tunnuksellasi hallintapaneelista. Tyhjennä selaimen välimuisti tai tarkastele sivua incognito-tilassa. Avaa selaimen konsoli (F12) tarkistaaksesi JavaScript-virheet. Varmista, että skripti on sivun lähdekoodissa napsauttamalla hiiren oikealla painikkeella ja valitsemalla "Näytä sivun lähdekoodi".