Come aggiungere il chatbot IA Asyntai a Hugo

Guida passo passo per il generatore di siti statici Hugo

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: Aggiungi il codice al Partial del tema (consigliato)

Il modo migliore per aggiungere il chatbot a tutte le pagine del tuo sito Hugo è creare un partial:

Naviga nella directory layouts/partials/ del tuo progetto Hugo
Crea un nuovo file chiamato asyntai-widget.html
Incolla il tuo codice di integrazione Asyntai in questo file:

<!-- layouts/partials/asyntai-widget.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Apri il file baseof.html del tuo tema (solitamente in layouts/_default/baseof.html)
Aggiungi il codice di incorporamento subito prima del tag di chiusura </body>:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Salva il file e ricompila il tuo sito Hugo

Suggerimento: L'utilizzo dei partial è il metodo consigliato da Hugo per includere componenti riutilizzabili. Questo metodo garantisce che il chatbot appaia su ogni pagina che utilizza il template baseof.html, che tipicamente include tutte le pagine del tuo sito.

Metodo alternativo 1: Aggiungi al Partial Head

Se il tuo tema ha un partial head, puoi aggiungere il codice lì:

Individua il partial head del tuo tema (solitamente layouts/partials/head.html)
Se non esiste, crea layouts/partials/head.html nella directory principale del tuo progetto
Aggiungi il codice di incorporamento Asyntai a questo file:

<!-- layouts/partials/head.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Assicurati che il tuo baseof.html includa questo partial nella sezione <head>:

<head>
  {{ partial "head.html" . }}
</head>

Nota: Se il tuo tema ha già un partial head.html con contenuto esistente, aggiungi semplicemente il tuo codice Asyntai in fondo. Non sostituire il contenuto esistente.

Metodo alternativo 2: Cartella Static con JavaScript personalizzato

Per un approccio più modulare utilizzando la cartella static di Hugo:

Naviga nella directory static/js/ del tuo progetto Hugo
Crea la directory se non esiste
Crea un nuovo file chiamato asyntai-loader.js
Aggiungi il seguente codice per caricare il widget:

// static/js/asyntai-loader.js
(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.head.appendChild(script);
})();

Fai riferimento a questo file nel tuo baseof.html o nel partial footer prima di </body>:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

Suggerimento: I file nella directory static/ vengono copiati così come sono nella directory principale del tuo sito pubblicato. La funzione relURL genera il percorso relativo corretto per la tua distribuzione.

Metodo alternativo 3: Configurazione Hugo (config.toml/yaml)

Per alcuni temi Hugo che supportano script personalizzati tramite configurazione:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Nota: Questo metodo funziona solo se il tuo tema supporta il parametro customJS. Consulta la documentazione del tuo tema. Potrebbe anche essere necessario aggiungere l'attributo data-asyntai-id tramite la personalizzazione del tema.

Metodo alternativo 4: Front Matter (specifico per pagina)

Per aggiungere il chatbot solo a pagine specifiche:

Aggiungi un parametro personalizzato al front matter della tua pagina:

---
title: "My Page"
asyntaiWidget: true
---

Nel tuo baseof.html o partial, aggiungi la logica condizionale:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

Suggerimento: Questo approccio ti offre un controllo granulare su quali pagine includono il chatbot. È utile per siti di documentazione dove desideri il widget solo in determinate sezioni.

Metodo alternativo 5: Sovrascrittura dei Layout del Tema

Per sovrascrivere il layout del tuo tema senza modificare i file del tema:

Copia il file baseof.html del tema da themes/your-theme/layouts/_default/
Incollalo in layouts/_default/baseof.html del tuo progetto
Aggiungi il tuo codice di integrazione Asyntai prima del tag di chiusura </body>
Salva e ricostruisci il tuo sito

Importante: Quando sovrascrivi i file del tema, non riceverai automaticamente gli aggiornamenti di quei file quando il tema viene aggiornato. Questo metodo ti offre il pieno controllo ma richiede più manutenzione. Considera l'utilizzo dei partial per aggiornamenti del tema più semplici.

Passaggio 3: Compila e distribuisci

Dopo aver aggiunto il codice, compila il tuo sito Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Il sito generato si troverà nella directory public/
Distribuisci questa directory sulla tua piattaforma di hosting (Netlify, Vercel, GitHub Pages, ecc.)

Suggerimento: Durante lo sviluppo, usa hugo server per visualizzare il tuo sito in locale su http://localhost:1313. Il chatbot dovrebbe apparire nell'angolo in basso a destra su tutte le pagine.

Passaggio 4: Verifica l'installazione

Dopo aver distribuito il tuo sito Hugo, aprilo 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 ricompilato il tuo sito con il comando hugo dopo aver apportato le modifiche. Verifica di aver sostituito YOUR_WIDGET_ID con il tuo ID widget effettivo dalla dashboard. Svuota la cache del browser o visualizza in modalità incognito. Se utilizzi un CDN, potrebbe essere necessario invalidare la cache. Apri la console del browser (F12) per verificare eventuali errori JavaScript.

Documentazione