Kuidas lisada Asyntai AI vestlusrobotit Hugole

Samm-sammuline juhend Hugo staatilise saidi generaatori jaoks

Platvorm:

1. samm: hankige oma manuskood

Esmalt minge oma Asyntai juhtpaneelile ja kerige alla jaotiseni "Manuskood". Kopeerige oma unikaalne manuskood, mis näeb välja selline:

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

Märkus: Ülalolev kood on vaid näide. Peate kopeerima oma unikaalse manuskoodi oma juhtpaneelilt, kuna see sisaldab teie isiklikku vidina ID-d.

Samm 2: koodi lisamine teema osalisele (soovitatav)

Parim viis vestlusroboti lisamiseks kõikidele oma Hugo saidi lehtedele on osamalli loomine:

Navigeerige oma Hugo projekti kataloogi layouts/partials/
Looge uus fail nimega asyntai-widget.html
Kleepige oma Asyntai manuskood sellesse faili:

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

Avage oma teema fail baseof.html (tavaliselt kaustas layouts/_default/baseof.html)
Lisage osaline enne sulgevat </body> silti:

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

Salvestage fail ja ehitage oma Hugo sait uuesti

Vihje: Osamallide kasutamine on Hugo poolt soovitatav viis korduvkasutatavate komponentide kaasamiseks. See meetod tagab, et vestlusrobot ilmub igale lehele, mis kasutab baseof.html malli, mis on tavaliselt kõik teie saidi lehed.

Alternatiivne meetod 1: lisage päise osamallile

Kui teie teemal on päise osamall, saate koodi sinna lisada:

Leidke oma teema päise osamall (tavaliselt layouts/partials/head.html)
Kui seda ei eksisteeri, looge layouts/partials/head.html oma projekti juurkausta
Lisage oma Asyntai manuskood sellesse faili:

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

Veenduge, et teie baseof.html sisaldab seda osamalli jaotises <head>:

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

Märkus: Kui teie teemal on juba olemasoleva sisuga head.html osamall, lisage lihtsalt oma Asyntai kood selle lõppu. Ärge asendage olemasolevat sisu.

Alternatiivne meetod 2: staatiline kaust kohandatud JavaScriptiga

Modulaarsema lähenemise jaoks kasutades Hugo staatilist kausta:

Navigeerige oma Hugo projekti kausta static/js/
Looge kaust, kui seda pole olemas
Looge uus fail nimega asyntai-loader.js
Lisage järgmine kood vidina laadimiseks:

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

Viidake sellele failile oma baseof.html või jaluse osamallis enne </body>:

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

Vihje: Failid kataloogis static/ kopeeritakse muutmata teie avaldatud saidi juurkausta. Funktsioon relURL genereerib teie juurutuse jaoks õige suhtelise tee.

Alternatiivne meetod 3: Hugo seadistus (config.toml/yaml)

Mõnede Hugo teemade jaoks, mis toetavad kohandatud skripte konfiguratsiooni kaudu:

# 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

Märkus: See meetod töötab ainult siis, kui teie teema toetab parameetrit customJS. Kontrollige oma teema dokumentatsiooni. Võib-olla peate atribuudi data-asyntai-id lisama ka teema kohandamise kaudu.

Alternatiivne meetod 4: eeskirjad (lehepõhine)

Vestlusroboti lisamiseks ainult kindlatele lehtedele:

Lisage kohandatud parameeter oma lehe eelmetaandmetesse:

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

Oma baseof.html või osamallis lisage tingimuslik loogika:

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

Vihje: See lähenemine annab teile detailse kontrolli selle üle, millised lehed vestlusrobotit sisaldavad. See on kasulik dokumentatsioonisaitidele, kus soovite vidinat ainult teatud jaotistesse.

Alternatiivne meetod 5: teema paigutuste ülekirjutamine

Oma teema paigutuse ülekirjutamiseks ilma teemafaile muutmata:

Kopeerige teema baseof.html kaustast themes/teie-teema/layouts/_default/
Kleepige see oma projekti kausta layouts/_default/baseof.html
Lisage oma Asyntai manuskood enne sulgevat </body> silti
Salvestage ja ehitage oma sait uuesti üles

Oluline: Teemafailide ülekirjutamisel ei saa te nende failide uuendusi automaatselt, kui teemat uuendatakse. See meetod annab teile täieliku kontrolli, kuid nõuab rohkem hooldust. Kaaluge lihtsamate teemauuenduste jaoks osamallide kasutamist.

3. samm: Ehitage ja juurutage

Pärast koodi lisamist ehitage oma Hugo sait:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Genereeritud sait on kaustas public/
Jüüruta see kataloog oma hostinguplatvormile (Netlify, Vercel, GitHub Pages jne)

Vihje: Arenduse ajal kasutage hugo server, et vaadata oma saiti kohapeal aadressil http://localhost:1313. Vestlusrobot peaks ilmuma kõikide lehtede alumises paremas nurgas.

4. samm: kontrollige paigaldust

Pärast oma Hugo saidi juurutamist avage see uues brauseri vahekaardil. Peaksite nägema vestlusvidina nuppu alumises paremas nurgas. Klõpsake sellel, et veenduda, et see avaneb ja töötab korrektselt.

Ei näe vidinat? Veenduge, et olete oma saidi pärast muudatuste tegemist uuesti ehitanud käsuga hugo. Kontrollige, et asendasite YOUR_WIDGET_ID oma tegeliku vidina ID-ga juhtpaneelilt. Tühjendage brauseri vahemälu või vaadake inkognito režiimis. CDN-i kasutamisel võib olla vajalik vahemälu tühistamine. Avage brauseri konsool (F12), et kontrollida JavaScripti vigasid.

Dokumentatsioon