Hur du lägger till Asyntai AI-chattbot i Hugo

Steg-för-steg-guide för Hugo statisk webbplatsgenerator

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din Dashboard eftersom den innehåller ditt personliga widget-ID.

Steg 2: Lägg till kod i temats partial (rekommenderas)

Det bästa sättet att lägga till chattboten på alla sidor på din Hugo-webbplats är att skapa en partial:

Navigera till ditt Hugo-projekts katalog layouts/partials/
Skapa en ny fil med namnet asyntai-widget.html
Klistra in din Asyntai-inbäddningskod i den här filen:

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

Öppna temats baseof.html-fil (vanligtvis i layouts/_default/baseof.html)
Lägg till partialen före den avslutande </body>-taggen:

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

Spara filen och bygg om din Hugo-webbplats

Tips: Att använda partials är Hugos rekommenderade sätt att inkludera återanvändbara komponenter. Denna metod säkerställer att chatboten visas på varje sida som använder mallen baseof.html, vilket vanligtvis är alla sidor på din webbplats.

Alternativ metod 1: Lägg till i head-partial

Om ditt tema har en head-partiell kan du lägga till koden där:

Hitta temats head-partial (vanligtvis layouts/partials/head.html)
Om den inte finns, skapa layouts/partials/head.html i din projektrot
Lägg till din Asyntai-inbäddningskod i den här filen:

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

Se till att din baseof.html inkluderar denna partial i avsnittet <head>:

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

Obs! Om ditt tema redan har en head.html-partiell med befintligt innehåll, lägg bara till din Asyntai-kod i slutet av den. Ersätt inte det befintliga innehållet.

Alternativ metod 2: Statisk mapp med anpassad JavaScript

För ett mer modulärt tillvägagångssätt med Hugos statiska mapp:

Navigera till ditt Hugo-projekts katalog static/js/
Skapa katalogen om den inte finns
Skapa en ny fil med namnet asyntai-loader.js
Lägg till följande kod för att ladda widgeten:

// 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);
})();

Referera till denna fil i din baseof.html eller sidfots-partial före </body>:

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

Tips: Filer i katalogen static/ kopieras som de är till roten av din publicerade webbplats. Funktionen relURL genererar den korrekta relativa sökvägen för din driftsättning.

Alternativ metod 3: Hugo-konfiguration (config.toml/yaml)

För vissa Hugo-teman som stöder anpassade skript via konfiguration:

# 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

Obs! Den här metoden fungerar bara om ditt tema stöder parametern customJS. Kontrollera temats dokumentation. Du kan också behöva lägga till attributet data-asyntai-id via temakonfiguration.

Alternativ metod 4: Front Matter (sidspecifik)

För att lägga till chattboten endast på specifika sidor:

Lägg till en anpassad parameter i sidans front matter:

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

I din baseof.html eller partial, lägg till villkorlig logik:

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

Tips: Det här tillvägagångssättet ger dig detaljerad kontroll över vilka sidor som inkluderar chattboten. Det är användbart för dokumentationswebbplatser där du bara vill ha widgeten i vissa sektioner.

Alternativ metod 5: Åsidosätt temalayouter

För att åsidosätta ditt temas layout utan att ändra temafiler:

Kopiera temats baseof.html från themes/your-theme/layouts/_default/
Klistra in det i ditt projekts layouts/_default/baseof.html
Lägg till din Asyntai-inbäddningskod före den avslutande </body>-taggen
Spara och bygg om din webbplats

Viktigt: När du skriver över temafiler får du inte automatiskt uppdateringar av dessa filer när temat uppdateras. Denna metod ger dig full kontroll men kräver mer underhåll. Överväg att använda partials istället för enklare temauppdateringar.

Steg 3: Bygg och driftsätt

När du har lagt till koden, bygg din Hugo-webbplats:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Den genererade webbplatsen finns i katalogen public/
Driftsätt den här katalogen på din värdplattform (Netlify, Vercel, GitHub Pages osv.)

Tips: Under utveckling, använd hugo server för att förhandsgranska din webbplats lokalt på http://localhost:1313. Chattboten ska visas i det nedre högra hörnet på alla sidor.

Steg 4: Verifiera installationen

Efter att du har driftsatt din Hugo-webbplats, öppna den i en ny webbläsarflik. Du bör se widgetknappen för chatten i det nedre högra hörnet. Klicka på den för att säkerställa att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du byggt om din webbplats med kommandot hugo efter att ha gjort ändringar. Kontrollera att du ersatte YOUR_WIDGET_ID med ditt faktiska widget-ID från instrumentpanelen. Rensa webbläsarens cache eller visa sidan i inkognitoläge. Om du använder ett CDN kan du behöva ogiltigförklara cachen. Öppna webbläsarkonsolen (F12) för att kontrollera eventuella JavaScript-fel.

Dokumentation