Slik legger du til Asyntai AI-chatbot på Hugo

Trinn-for-trinn-guide for Hugo statisk nettstedsgenerator

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Legg til kode i temadelfil (anbefalt)

Den beste måten å legge til chatboten på alle sider av Hugo-nettstedet ditt er å opprette en delfil:

Naviger til Hugo-prosjektets layouts/partials/-katalog
Opprett en ny fil kalt asyntai-widget.html
Lim inn Asyntai-innbyggingskoden i denne filen:

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

Åpne temaets baseof.html-fil (vanligvis i layouts/_default/baseof.html)
Legg til delfilen før den avsluttende </body>-taggen:

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

Lagre filen og bygg Hugo-nettstedet på nytt

Tips: Bruk av delfiler er Hugo-anbefalt måte å inkludere gjenbrukbare komponenter. Denne metoden sikrer at chatboten vises på hver side som bruker baseof.html-malen, som vanligvis er alle sider på nettstedet ditt.

Alternativ metode 1: Legg til i head-delfil

Hvis temaet ditt har en head-delfil, kan du legge til koden der:

Finn temaets head-delfil (vanligvis layouts/partials/head.html)
Hvis den ikke finnes, opprett layouts/partials/head.html i prosjektets rotkatalog
Legg til Asyntai-innbyggingskoden i denne filen:

<!-- 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 baseof.html inkluderer denne delfilen i <head>-seksjonen:

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

Merk: Hvis temaet ditt allerede har en head.html-delfil med eksisterende innhold, legg Asyntai-koden til på slutten. Ikke erstatt det eksisterende innholdet.

Alternativ metode 2: Statisk mappe med egendefinert JavaScript

For en mer modulær tilnærming ved bruk av Hugos statiske mappe:

Naviger til Hugo-prosjektets static/js/-katalog
Opprett katalogen hvis den ikke finnes
Opprett en ny fil kalt asyntai-loader.js
Legg til følgende kode for å laste 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 filen i baseof.html eller bunntekst-delfilen før </body>:

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

Tips: Filer i static/-katalogen kopieres som de er til roten av det publiserte nettstedet. relURL-funksjonen genererer riktig relativ sti for distribusjonen din.

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

For noen Hugo-temaer som støtter egendefinerte skript via konfigurasjon:

# 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

Merk: Denne metoden fungerer bare hvis temaet ditt støtter customJS-parameteren. Sjekk temaets dokumentasjon. Du kan også måtte legge til data-asyntai-id-attributtet gjennom tematilpasning.

Alternativ metode 4: Front Matter (sidespesifikk)

For å legge til chatboten kun på bestemte sider:

Legg til en egendefinert parameter i sidens front matter:

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

I baseof.html eller delfilen legger du til betinget logikk:

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

Tips: Denne tilnærmingen gir deg detaljert kontroll over hvilke sider som inkluderer chatboten. Det er nyttig for dokumentasjonssider der du bare vil ha widgeten i visse seksjoner.

Alternativ metode 5: Overstyr temalayouter

For å overstyre temaets layout uten å endre temafiler:

Kopier temaets baseof.html fra themes/your-theme/layouts/_default/
Lim den inn i prosjektets layouts/_default/baseof.html
Legg til Asyntai-innbyggingskoden før den avsluttende </body>-taggen
Lagre og bygg nettstedet på nytt

Viktig: Når du overstyrer temafiler, vil du ikke automatisk motta oppdateringer til disse filene når temaet oppdateres. Denne metoden gir deg full kontroll, men krever mer vedlikehold. Vurder å bruke delfiler i stedet for enklere temaoppdateringer.

Trinn 3: Bygg og distribuer

Etter at du har lagt til koden, bygg Hugo-nettstedet:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Det genererte nettstedet vil være i public/-katalogen
Distribuer denne katalogen til hostingplattformen din (Netlify, Vercel, GitHub Pages osv.)

Tips: Under utvikling, bruk hugo server for å forhåndsvise nettstedet lokalt på http://localhost:1313. Chatboten bør vises nederst til høyre på alle sider.

Trinn 4: Bekreft installasjonen

Etter at du har distribuert Hugo-nettstedet, åpne det i en ny nettleserfane. Du bør se chat-widget-knappen nederst til høyre. Klikk på den for å forsikre deg om at den åpnes og fungerer riktig.

Ser du ikke widgeten? Sørg for at du har bygget nettstedet på nytt med hugo-kommandoen etter endringer. Sjekk at du erstattet YOUR_WIDGET_ID med din faktiske widget-ID fra dashbordet. Tøm nettleserens hurtigbuffer eller se i inkognitomodus. Hvis du bruker et CDN, kan det hende du må ugyldiggjøre hurtigbufferen. Åpne nettleserkonsollen (F12) for å se etter JavaScript-feil.

Dokumentasjon