Kako dodati Asyntai AI chatbot na Hugo

Vodič korak po korak za Hugo generator statičnih stranica

Platforma:

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Korak 2: Dodajte kod u djelomični predložak teme (Preporučeno)

Najbolji nacin za dodavanje chatbota na sve stranice vase Hugo stranice je izradom djelomicnog predloska:

Navigirajte do direktorija layouts/partials/ svog Hugo projekta
Izradite novu datoteku nazvanu asyntai-widget.html
Zalijepite svoj Asyntai ugradni kod u ovu datoteku:

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

Otvorite datoteku baseof.html teme (obicno u layouts/_default/baseof.html)
Dodajte ugradni kod neposredno prije zavrsne oznake </body>:

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

Spremite datoteku i ponovno izgradite svoju Hugo stranicu

Savjet: Koristenje djelomicnih predlozaka je nacin koji Hugo preporucuje za ukljucivanje visekratnih komponenti. Ova metoda osigurava da se chatbot pojavljuje na svakoj stranici koja koristi predlozak baseof.html, sto su obicno sve stranice na vasem webu.

Alternativna metoda 1: Dodajte u djelomični predložak zaglavlja

Ako vasa tema ima djelomični predložak zaglavlja, možete dodati kod tamo:

Pronadite djelomicni predlozak zaglavlja teme (obicno layouts/partials/head.html)
Ako ne postoji, izradite layouts/partials/head.html u korijenu projekta
Dodajte svoj Asyntai ugradni kod u ovu datoteku:

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

Provjerite ukljucuje li vas baseof.html ovaj djelomicni predlozak u odjeljku <head>:

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

Napomena: Ako vasa tema vec ima djelomicni predlozak head.html s postojecim sadrzajem, jednostavno dodajte svoj Asyntai kod na kraj. Nemojte zamjenjivati postojeci sadrzaj.

Alternativna metoda 2: Statična mapa s prilagođenim JavaScriptom

Za modularniji pristup koristeći statičnu mapu Huga:

Navigirajte do direktorija static/js/ svog Hugo projekta
Izradite direktorij ako ne postoji
Izradite novu datoteku nazvanu asyntai-loader.js
Dodajte sljedeći kod za učitavanje widgeta:

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

Referencirajte ovu datoteku u svom baseof.html ili djelomicnom predlosku podnozja prije </body>:

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

Savjet: Datoteke u direktoriju static/ kopiraju se kakve jesu u korijen objavljene stranice. Funkcija relURL generira ispravan relativni put za vase postavljanje.

Alternativna metoda 3: Hugo konfiguracija (config.toml/yaml)

Za neke Hugo teme koje podržavaju prilagođene skripte putem konfiguracije:

# 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

Napomena: Ova metoda radi samo ako vasa tema podrzava parametar customJS. Provjerite dokumentaciju teme. Takoder cete mozda trebati dodati atribut data-asyntai-id putem prilagodbe teme.

Alternativna metoda 4: Front Matter (Specifično za stranicu)

Za dodavanje chatbota samo na određene stranice:

Dodajte prilagođeni parametar u front matter stranice:

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

U svom baseof.html ili djelomicnom predlošku dodajte uvjetnu logiku:

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

Savjet: Ovaj pristup vam daje detaljnu kontrolu nad time koje stranice ukljucuju chatbot. Koristan je za dokumentacijske stranice gdje zelite widget samo u odredenim odjeljcima.

Alternativna metoda 5: Nadjačavanje rasporeda teme

Za nadjačavanje rasporeda teme bez mijenjanja datoteka teme:

Kopirajte baseof.html teme iz themes/vasa-tema/layouts/_default/
Zalijepite ga u layouts/_default/baseof.html svog projekta
Dodajte svoj Asyntai ugradni kod prije zavrsne oznake </body>
Spremite i ponovno izgradite stranicu

Važno: Kada nadjacate datoteke teme, necete automatski primati azuriranja tih datoteka kada se tema azurira. Ova metoda vam daje potpunu kontrolu, ali zahtijeva vise odrzavanja. Razmislite o koristenju djelomicnih predlozaka za laksa azuriranja teme.

Korak 3: Izgradite i postavite

Nakon dodavanja koda izgradite svoju Hugo stranicu:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Generirana stranica bit će u direktoriju public/
Postavite ovaj direktorij na svoju hosting platformu (Netlify, Vercel, GitHub Pages itd.)

Savjet: Tijekom razvoja koristite hugo server za lokalni pregled stranice na http://localhost:1313. Chatbot bi se trebao pojaviti u donjem desnom kutu na svim stranicama.

Korak 4: Provjerite instalaciju

Nakon postavljanja vase Hugo stranice otvorite je u novoj kartici preglednika. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.

Ne vidite widget? Provjerite jeste li ponovno izgradili stranicu naredbom hugo nakon promjena. Provjerite jeste li zamijenili YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta s nadzorne ploce. Ocistite predmemoriju preglednika ili pregledavajte u anonimnom nacinu. Ako koristite CDN, mozda cete trebati ponishtiti predmemoriju. Otvorite konzolu preglednika (F12) da provjerite postoje li JavaScript greske.

Dokumentacija