Come aggiungere il chatbot IA Asyntai a Craft CMS

Guida passo passo per i siti web Craft CMS

Piattaforma:

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: Modifica il template di layout (consigliato)

Il modo più semplice per aggiungere il chatbot a tutte le pagine è modificare il template di layout principale:

Access your Craft CMS project files via FTP, SSH, or your code editor
Vai alla directory templates/
Trova il file di layout principale (comunemente chiamato _layout.twig, _layout.html, o situato in templates/_layouts/)
Trova il tag di chiusura </body>
Incolla il codice di incorporamento Asyntai appena prima del tag </body>
Salva il file

Suggerimento: Aggiungere lo script prima del tag di chiusura </body> assicura che venga caricato dopo il contenuto della pagina, come consigliato per i widget di chat, senza rallentare il caricamento della pagina.

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS fornisce un tag Twig integrato per registrare JavaScript:

Apri il template di layout principale
Aggiungi il seguente codice prima del tag di chiusura </body>:
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
Salva il file

Nota: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Alternativa: Crea un file include separato

Per una migliore organizzazione, crea un file include dedicato:

Crea un nuovo file: templates/_includes/chatbot.twig (o .html)
Aggiungi il codice di incorporamento Asyntai a questo file:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Nel template di layout principale, includi questo file prima di </body>:
{% include '_includes/chatbot' %}
Salva entrambi i file

Suggerimento: L'utilizzo di un file include rende facile abilitare/disabilitare il chatbot su tutto il sito commentando una singola riga.

Alternativa: Caricamento condizionale

Per caricare il chatbot solo su pagine o sezioni specifiche:

Nel template di layout o di pagina, utilizza le condizioni Twig:
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
Oppure verifica sezioni specifiche:
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Passaggio 3: verifica l'installazione

Dopo aver salvato le modifiche, visita il tuo sito web Craft CMS in una nuova scheda del browser o in una finestra di navigazione in incognito. Dovresti vedere il pulsante del widget di chat nell'angolo in basso a destra. Cliccaci sopra per assicurarti che si apra e funzioni correttamente.

Non vedi il widget? Assicurati di aver salvato il file del template e di star modificando il template di layout corretto utilizzato dalle tue pagine. Svuota la cache del browser o visualizza in una finestra di navigazione in incognito. Se utilizzi la cache dei template, svuota la cache di Craft CMS dal Pannello di controllo in Utilities > Clear Caches.

Posizione del template: Le posizioni dei template di Craft CMS possono variare a seconda della configurazione del progetto. Le posizioni comuni includono templates/_layout.twig, templates/_layouts/main.twig o templates/_base.twig. Controlla i template esistenti per trovare dove è definito il tag </body>.