Sådan tilføjer du Asyntai AI-chatbot til Hugo

Trin-for-trin guide til Hugo statisk webstedsgenerator

Platform:

Trin 1: Hent din indlejringskode

Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:

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

Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.

Trin 2: Tilføj kode til temapartial (anbefalet)

Den bedste måde at tilføje chatbotten til alle sider på dit Hugo-websted er ved at oprette en partial:

Naviger til dit Hugo-projekts layouts/partials/-mappe
Opret en ny fil kaldet asyntai-widget.html
Indsæt din Asyntai-indlejringskode i denne fil:

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

Åbn dit temas baseof.html-fil (normalt i layouts/_default/baseof.html)
Tilføj partialen før det afsluttende </body>-tag:

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

Gem filen og genopbyg dit Hugo-websted

Tip: Brug af partials er den Hugo-anbefalede måde at inkludere genanvendelige komponenter på. Denne metode sikrer, at chatbotten vises på hver side, der bruger baseof.html-skabelonen, hvilket typisk er alle sider på dit websted.

Alternativ metode 1: Tilføj til head-partial

Hvis dit tema har en head-partial, kan du tilføje koden der:

Find dit temas head-partial (normalt layouts/partials/head.html)
Hvis den ikke findes, skal du oprette layouts/partials/head.html i dit projekts rodmappe
Tilføj din Asyntai-indlejringskode til denne fil:

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

Sørg for, at din baseof.html inkluderer denne partial i <head>-sektionen:

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

Bemærk: Hvis dit tema allerede har en head.html-partial med eksisterende indhold, skal du blot tilføje din Asyntai-kode til den. Erstat ikke det eksisterende indhold.

Alternativ metode 2: Statisk mappe med brugerdefineret JavaScript

For en mere modulær tilgang ved hjælp af Hugos statiske mappe:

Naviger til dit Hugo-projekts static/js/-mappe
Opret mappen, hvis den ikke findes
Opret en ny fil kaldet asyntai-loader.js
Tilføj følgende kode for at indlæse 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);
})();

Referer til denne fil i din baseof.html eller footer-partial før </body>:

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

Tip: Filer i static/-mappen kopieres som de er til roden af dit udgivne websted. relURL-funktionen genererer den korrekte relative sti til din udrulning.

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

For nogle Hugo-temaer, der understøtter brugerdefinerede scripts 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

Bemærk: Denne metode virker kun, hvis dit tema understøtter customJS-parameteren. Tjek dit temas dokumentation. Du skal muligvis også tilføje data-asyntai-id-attributten via tematilpasning.

Alternativ metode 4: Front Matter (sidespecifik)

Sådan tilføjer du chatbotten til kun specifikke sider:

Tilføj en brugerdefineret parameter til din sides front matter:

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

I din baseof.html eller partial skal du tilføje betinget logik:

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

Tip: Denne tilgang giver dig detaljeret kontrol over, hvilke sider der inkluderer chatbotten. Det er nyttigt til dokumentationswebsteder, hvor du kun ønsker widgeten på bestemte sektioner.

Alternativ metode 5: Overskriv temalay-outs

Sådan overskriver du dit temas layout uden at ændre temafiler:

Kopier temaets baseof.html fra themes/your-theme/layouts/_default/
Indsæt det i dit projekts layouts/_default/baseof.html
Tilføj din Asyntai-indlejringskode før det afsluttende </body>-tag
Gem og genbyg dit websted

Vigtigt: Når du overskriver temafiler, modtager du ikke automatisk opdateringer til disse filer, når temaet opdateres. Denne metode giver dig fuld kontrol, men kræver mere vedligeholdelse. Overvej at bruge partials i stedet for lettere temaopdateringer.

Trin 3: Byg og deploy

Efter at have tilføjet koden skal du bygge dit Hugo-websted:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Det genererede websted vil være i public/-mappen
Udrull denne mappe til din hostingplatform (Netlify, Vercel, GitHub Pages osv.)

Tip: Under udvikling skal du bruge hugo server til at forhåndsvise dit websted lokalt på http://localhost:1313. Chatbotten bør vises i det nedre højre hjørne på alle sider.

Trin 4: Verificer installationen

Åbn dit Hugo-websted i en ny browserfane efter at have udrullet det. Du bør se chat-widget-knappen i det nedre højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.

Ser du ikke widget'en? Sørg for, at du har genopbygget dit websted med hugo-kommandoen efter at have foretaget ændringer. Kontroller, at du erstattede YOUR_WIDGET_ID med dit faktiske widget-ID fra dashboardet. Ryd din browsercache eller se i inkognitotilstand. Hvis du bruger et CDN, skal du muligvis ugyldiggøre cachen. Åbn browserkonsollen (F12) for at tjekke for eventuelle JavaScript-fejl.

Dokumentation