Ako pridat Asyntai AI chatbota do Hugo

Návod krok za krokom pre generator statickych stránok Hugo

Platforma:

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.

Krok 2: Pridanie kodu do ciastocnej šablóny temy (odporúčané)

Najlepší sposob pridania chatbota na všetky stránky vasej stránky Hugo je vytvorenie ciastocnej šablóny:

Prejdite do priečinka layouts/partials/ vasho projektu Hugo
Vytvorte novy súbor s názvom asyntai-widget.html
Vložte svoj vkladací kód Asyntai do tohto súboru:

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

Otvorte súbor baseof.html vasej temy (zvyčajne v layouts/_default/baseof.html)
Pridajte čiastočnú šablónu pred uzatváraciu značku </body>:

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

Uložte súbor a prestavajte svoju stránku Hugo

Tip: Použitie ciastocnych šablón je sposobom odporucanym Hugo na zahrnutie opakovane pouzitelnych komponentov. Tato metoda zabezpeci, ze sa chatbot zobrazi na kazdej stránke, ktora pouziva šablónu baseof.html, co su typicky všetky stránky na vasom webe.

Alternativna metoda 1: Pridanie do ciastocnej šablóny hlavičky

Ak ma vasa tema ciastocnu šablónu hlavičky, môžete tam pridat kod:

Najdite ciastocnu šablónu hlavičky vasej temy (zvyčajne layouts/partials/head.html)
Ak neexistuje, vytvorte layouts/partials/head.html v koreni vasho projektu
Pridajte svoj vkladací kod Asyntai do tohto súboru:

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

Uistite sa, ze vas baseof.html zahrna tuto ciastocnu šablónu v sekcii <head>:

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

Poznámka: Ak vasa tema uz ma ciastocnu šablónu head.html s existujucim obsahom, jednoducho pripojte svoj kod Asyntai k nemu. Nenahradajte existujuci obsah.

Alternativna metoda 2: Staticky priečinok s vlastnym JavaScriptom

Pre modularnejsi prístup pomocou statickeho priečinka Hugo:

Prejdite do priečinka static/js/ vasho projektu Hugo
Vytvorte priečinok, ak neexistuje
Vytvorte novy súbor s názvom asyntai-loader.js
Pridajte nasledujuci kod na nacitanie widgetu:

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

Odkazte na tento súbor vo vasom baseof.html alebo ciastocnej šablóne paty pred </body>:

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

Tip: Subory v priečinku static/ sa kopiiruju tak, ako su, do korena vasej publikovanej stránky. Funkcia relURL generuje spravnu relativnu cestu pre vase nasadenie.

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

Pre niektore temy Hugo, ktore podporuju vlastné skripty cez konfiguráciu:

# 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

Poznámka: Tato metoda funguje len ak vasa tema podporuje parameter customJS. Skontrolujte dokumentaciu vasej temy. Mozno budete musiet tiež pridat atribut data-asyntai-id cez prispôsobenie temy.

Alternativna metoda 4: Front Matter (pre konkretnu stránku)

Na pridanie chatbota len na konkretne stránky:

Pridajte vlastný parameter do front matter vasej stránky:

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

Vo vasom baseof.html alebo ciastocnej šablóne pridajte podmienenu logiku:

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

Tip: Tento prístup vam dava detailnu kontrolu nad tym, ktore stránky zahrnaju chatbota. Je uzitocny pre dokumentacne stránky, kde chcete widget len v určitých sekciach.

Alternativna metoda 5: Prepisanie rozložení temy

Na prepisanie rozloženia vasej temy bez upravy súborov temy:

Skopirujte baseof.html temy z themes/vasa-tema/layouts/_default/
Vložíte ho do layouts/_default/baseof.html vasho projektu
Pridajte svoj vkladací kod Asyntai pred uzatvaraci tag </body>
Uložte a prestavajte svoju stránku

Dôležité: Ked prepisete súbory temy, nebudete automaticky prijimat aktualizacie tychto súborov pri aktualizacii temy. Tato metoda vam dava plnu kontrolu, ale vyžaduje viac údržby. Zvazite namiesto toho použitie ciastocnych šablón pre jednoduchsie aktualizacie temy.

Krok 3: Zostavenie a nasadenie

Po pridani kodu zostavte svoju stránku Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Vygenerovana stranka bude v priečinku public/
Nasadte tento priečinok na svoju hostingovu platformu (Netlify, Vercel, GitHub Pages atd.)

Tip: Pocas vyvoja použite hugo server na lokalny nahlad vasej stránky na http://localhost:1313. Chatbot by sa mal zobrazit v pravom dolnom rohu na všetkých strankach.

Krok 4: Overenie inštalácie

Po nasadeni vasej stránky Hugo ju otvorte v novej karte prehliadača. Mali by ste vidiet tlačidlo chatoveho widgetu v pravom dolnom rohu. Kliknite nan, aby ste sa uistili, ze sa otvara a funguje správne.

Nevidíte widget? Uistite sa, ze ste prestavali svoju stránku prikazom hugo po vykonani zmien. Skontrolujte, ze ste nahradili YOUR_WIDGET_ID vasim skutocnym ID widgetu z dashboardu. Vymažte vyrovnávaciu pamat prehliadača alebo zobrazite web v rezime inkognito. Ak používate CDN, možno budete musiet zneplatnit vyrovnávaciu pamat. Otvorte konzolu prehliadača (F12) a skontrolujte pripadne chyby JavaScriptu.

Dokumentácia