Come aggiungere il chatbot IA Asyntai a Grav
Guida passo passo per 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
Passaggio 1: ottieni il tuo codice di incorporamento
Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Nota: Il codice sopra è solo un esempio. Devi copiare il tuo codice di incorporamento univoco dalla tua Dashboard poiché contiene il tuo ID widget personale.
Passaggio 2: Aggiungi al template del tema Grav (consigliato)
Il modo migliore per aggiungere il chatbot a tutte le pagine del tuo sito Grav è modificare il template Twig base del tuo tema:
- Naviga nella directory user/themes/yourtheme/templates/ del tuo progetto Grav e apri default.html.twig (o il template base utilizzato dal tuo tema)
- Aggiungi il codice di incorporamento Asyntai prima del tag di chiusura </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>
- Salva il file
Suggerimento: Grav utilizza Twig come motore di template. Il template base è tipicamente default.html.twig o partials/base.html.twig a seconda del tema. Controlla la struttura del tuo tema per trovare il file corretto che contiene il tag di chiusura </body>.
Metodo alternativo 1: Utilizzo del Grav Asset Manager
L'Asset Manager integrato di Grav offre un modo pulito per aggiungere risorse JavaScript tramite Twig:
- Apri il template Twig base del tuo tema (es., user/themes/yourtheme/templates/partials/base.html.twig)
- Usa l'Asset Manager per aggiungere il JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Oppure aggiungi JavaScript inline per creare l'elemento script dinamicamente nel tuo template base:
<!-- 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>
Nota: Il metodo Asset Manager è l'approccio consigliato da Grav per la gestione delle risorse JavaScript. Offre supporto integrato per il pipelining, l'ordinamento e il raggruppamento delle risorse.
Metodo alternativo 2: Utilizzo del plugin Custom JS
Se preferisci un approccio basato su plugin senza modificare i file del tema:
- Installa il plugin "Custom JS" dal pannello di amministrazione Grav o tramite CLI:
bin/gpm install custom-js
- Vai su Admin > Plugins > Custom JS
- Aggiungi il codice dello script di incorporamento:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Salva la configurazione del plugin
Suggerimento: Utilizzare un plugin per iniettare gli script significa che non devi modificare alcun file del tema. Questo rende più facile cambiare o aggiornare i temi senza perdere l'integrazione del chatbot.
Metodo alternativo 3: Utilizzo dell'override del blocco nel template figlio
Se il tuo tema Grav utilizza l'ereditarietà dei blocchi Twig, puoi sovrascrivere il blocco bottom in un template figlio:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Crea o apri un template figlio che estende il template base del tuo tema
- Aggiungi l'override del blocco mostrato sopra
- La chiamata parent() garantisce che tutto il contenuto esistente nel blocco venga preservato
Nota: Questo metodo utilizza il sistema di ereditarietà dei template di Twig. Assicurati che il nome del blocco (es., bottom) corrisponda al blocco definito nel template base del tuo tema. I nomi di blocco comuni includono bottom, javascripts o footer.
Metodo alternativo 4: Utilizzo del plugin Grav Custom Head
Un'altra opzione basata su plugin è il plugin Custom Head:
- Installa il plugin custom-head tramite CLI o pannello di amministrazione:
bin/gpm install custom-head
- Vai su Admin > Plugins > Custom Head
- Aggiungi il codice dello script di incorporamento Asyntai nella configurazione del plugin:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Salva la configurazione
Suggerimento: Il plugin Custom Head ti permette di iniettare codice nelle sezioni head o body del tuo sito senza toccare i file del tema. Consulta la documentazione del plugin per l'opzione di posizionamento corretta per inserire lo script prima del tag di chiusura </body>.
Passaggio 3: Svuota la cache e verifica
Dopo aver aggiunto il codice, svuota la cache di Grav e verifica l'installazione:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Apri il tuo sito Grav in una nuova scheda del browser. Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra. Cliccaci sopra per assicurarti che si apra e funzioni correttamente.
Non vedi il widget? Assicurati di aver svuotato la cache di Grav con bin/grav clearcache o dal pannello di amministrazione. Verifica di aver sostituito YOUR_WIDGET_ID con l'ID widget effettivo dalla dashboard. Svuota la cache del browser o visualizza in modalità incognito. Apri la console del browser (F12) per verificare eventuali errori JavaScript. Verifica che lo script sia presente nel sorgente della pagina facendo clic destro e selezionando "View Page Source".