Jak přidat Asyntai AI chatbota na Hugo

Podrobný návod pro statický generátor webů Hugo

Platforma:

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání kódu do částečné šablony motivu (doporučeno)

Nejlepší způsob, jak přidat chatbota na všechny stránky vašeho webu Hugo, je vytvoření částečné šablony:

Přejděte do adresáře layouts/partials/ vašeho projektu Hugo
Vytvořte nový soubor s názvem asyntai-widget.html
Vložte váš Asyntai embed kód do tohoto souboru:

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

Otevřete soubor baseof.html vašeho motivu (obvykle v layouts/_default/baseof.html)
Přidejte vložený kód těsně před uzavírací tag </body>:

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

Uložte soubor a znovu sestavte svůj web Hugo

Tip: Použití částečných šablon je způsob doporučený Hugo pro zahrnutí opakovaně použitelných komponent. Tato metoda zajistí, že se chatbot zobrazí na každé stránce, která používá šablonu baseof.html, což jsou obvykle všechny stránky vašeho webu.

Alternativní metoda 1: Přidání do částečné šablony head

Pokud má váš motiv částečnou šablonu head, můžete kód přidat tam:

Najděte částečnou šablonu head vašeho motivu (obvykle layouts/partials/head.html)
Pokud neexistuje, vytvořte layouts/partials/head.html v kořenovém adresáři projektu
Přidejte svůj Asyntai embed kód do tohoto souboru:

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

Ujistěte se, že váš baseof.html zahrnuje tuto částečnou šablonu v sekci <head>:

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

Poznámka: Pokud váš motiv již má částečnou šablonu head.html s existujícím obsahem, jednoduše k ní přidejte váš Asyntai kód. Nenahrazujte existující obsah.

Alternativní metoda 2: Statická složka s vlastním JavaScriptem

Pro modulárnější přístup s využitím statické složky Hugo:

Přejděte do adresáře static/js/ vašeho projektu Hugo
Vytvořte adresář, pokud neexistuje
Vytvořte nový soubor s názvem asyntai-loader.js
Přidejte následující kód pro načtení 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);
})();

Odkažte na tento soubor v baseof.html nebo částečné šabloně zápatí před </body>:

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

Tip: Soubory v adresáři static/ jsou zkopírovány beze změn do kořenového adresáře publikovaného webu. Funkce relURL generuje správnou relativní cestu pro vaše nasazení.

Alternativní metoda 3: Konfigurace Hugo (config.toml/yaml)

Pro některé motivy Hugo, které podporují vlastní skripty přes konfiguraci:

# 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 pouze pokud váš motiv podporuje parametr customJS. Zkontrolujte dokumentaci svého motivu. Možná budete také muset přidat atribut data-asyntai-id přes přizpůsobení motivu.

Alternativní metoda 4: Front Matter (pro konkrétní stránku)

Pro přidání chatbota pouze na konkrétní stránky:

Přidejte vlastní parametr do front matter vaší stránky:

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

Do baseof.html nebo částečné šablony přidejte podmíněnou 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 přístup vám dává detailní kontrolu nad tím, které stránky zahrnují chatbota. Je užitečný pro dokumentační weby, kde chcete widget pouze v určitých sekcích.

Alternativní metoda 5: Přepsání rozložení motivu

Pro přepsání rozložení motivu bez úpravy souborů motivu:

Zkopírujte baseof.html motivu z themes/your-theme/layouts/_default/
Vložte ho do layouts/_default/baseof.html vašeho projektu
Přidejte váš Asyntai embed kód před uzavírací značku </body>
Uložte a znovu sestavte svůj web

Důležité: Když přepíšete soubory motivu, nebudete automaticky dostávat aktualizace těchto souborů při aktualizaci motivu. Tato metoda vám dává plnou kontrolu, ale vyžaduje více údržby. Zvažte použití částečných šablon pro snazší aktualizace motivu.

Krok 3: Sestavení a nasazení

Po přidání kódu sestavte svůj web Hugo:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Vygenerovaný web bude v adresáři public/
Nasaďte tento adresář na vaši hostingovou platformu (Netlify, Vercel, GitHub Pages atd.)

Tip: Během vývoje použijte hugo server pro lokální náhled webu na http://localhost:1313. Chatbot by se měl zobrazit v pravém dolním rohu na všech stránkách.

Krok 4: Ověření instalace

Po nasazení webu Hugo ho otevřete v nové záložce prohlížeče. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ověřte, že se správně otevírá a funguje.

Nevidíte widget? Ujistěte se, že jste po provedení změn znovu sestavili web příkazem hugo. Zkontrolujte, že jste nahradili YOUR_WIDGET_ID skutečným ID widgetu z dashboardu. Vymažte mezipaměť prohlížeče nebo web zobrazte v anonymním režimu. Pokud používáte CDN, možná budete muset invalidovat mezipaměť. Otevřete konzoli prohlížeče (F12) a zkontrolujte případné chyby JavaScriptu.

Dokumentace