Hoe voegt u de Asyntai AI-chatbot toe aan Hugo

Stapsgewijze handleiding voor de Hugo statische sitegenerator

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Code toevoegen aan thema-partial (aanbevolen)

De beste manier om de chatbot aan alle pagina's van uw Hugo-site toe te voegen is door een partial aan te maken:

Navigeer naar de map layouts/partials/ van uw Hugo-project
Maak een nieuw bestand aan met de naam asyntai-widget.html
Plak uw Asyntai-insluitcode in dit bestand:

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

Open het bestand baseof.html van uw thema (meestal in layouts/_default/baseof.html)
Voeg de partial toe v\u00f3\u00f3r de afsluitende </body>-tag:

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

Sla het bestand op en bouw uw Hugo-site opnieuw

Tip: Het gebruik van partials is de door Hugo aanbevolen manier om herbruikbare componenten toe te voegen. Deze methode zorgt ervoor dat de chatbot op elke pagina verschijnt die de baseof.html-template gebruikt, wat doorgaans alle pagina's van uw site zijn.

Alternatieve methode 1: Toevoegen aan head-partial

Als uw thema een head-partial heeft, kunt u de code daar toevoegen:

Zoek de head-partial van uw thema (meestal layouts/partials/head.html)
Als deze niet bestaat, maak dan layouts/partials/head.html aan in de hoofdmap van uw project
Voeg uw Asyntai-insluitcode toe aan dit bestand:

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

Zorg ervoor dat uw baseof.html deze partial bevat in de <head>-sectie:

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

Opmerking: Als uw thema al een head.html-partial met bestaande inhoud heeft, voeg dan simpelweg uw Asyntai-code eraan toe. Vervang de bestaande inhoud niet.

Alternatieve methode 2: Statische map met aangepast JavaScript

Voor een meer modulaire aanpak met de statische map van Hugo:

Navigeer naar de map static/js/ van uw Hugo-project
Maak de map aan als deze niet bestaat
Maak een nieuw bestand aan met de naam asyntai-loader.js
Voeg de volgende code toe om de widget te laden:

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

Verwijs naar dit bestand in uw baseof.html of footer-partial voor </body>:

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

Tip: Bestanden in de static/-map worden ongewijzigd gekopieerd naar de hoofdmap van uw gepubliceerde site. De relURL-functie genereert het juiste relatieve pad voor uw implementatie.

Alternatieve methode 3: Hugo-configuratie (config.toml/yaml)

Voor sommige Hugo-thema's die aangepaste scripts ondersteunen via configuratie:

# 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

Opmerking: Deze methode werkt alleen als uw thema de customJS-parameter ondersteunt. Raadpleeg de documentatie van uw thema. Mogelijk moet u ook het data-asyntai-id-attribuut toevoegen via thema-aanpassing.

Alternatieve methode 4: Front matter (paginaspecifiek)

Om de chatbot alleen aan specifieke pagina's toe te voegen:

Voeg een aangepaste parameter toe aan de front matter van uw pagina:

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

Voeg voorwaardelijke logica toe in uw baseof.html of partial:

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

Tip: Deze aanpak geeft u gedetailleerde controle over welke pagina's de chatbot bevatten. Het is handig voor documentatiesites waar u de widget alleen op bepaalde secties wilt.

Alternatieve methode 5: Thema-layouts overschrijven

Om de lay-out van uw thema te overschrijven zonder themabestanden te wijzigen:

Kopieer de baseof.html van het thema vanuit themes/your-theme/layouts/_default/
Plak het in de layouts/_default/baseof.html van uw project
Voeg uw Asyntai-insluitcode toe voor de afsluitende </body>-tag
Sla op en bouw uw site opnieuw

Belangrijk: Wanneer u themabestanden overschrijft, ontvangt u niet automatisch updates voor die bestanden wanneer het thema wordt bijgewerkt. Deze methode geeft u volledige controle maar vereist meer onderhoud. Overweeg in plaats daarvan partials te gebruiken voor eenvoudigere thema-updates.

Stap 3: Bouwen en deployen

Bouw na het toevoegen van de code uw Hugo-site:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

De gegenereerde site bevindt zich in de map public/
Implementeer deze map op uw hostingplatform (Netlify, Vercel, GitHub Pages, enz.)

Tip: Gebruik tijdens de ontwikkeling hugo server om uw site lokaal te bekijken op http://localhost:1313. De chatbot zou rechtsonder in de hoek op alle pagina's moeten verschijnen.

Stap 4: Installatie verifiëren

Open na het implementeren van uw Hugo-site deze in een nieuw browsertabblad. U zou de chatwidgetknop rechtsonder in de hoek moeten zien. Klik erop om te controleren of deze correct opent en functioneert.

Ziet u de widget niet? Zorg ervoor dat u uw site opnieuw hebt gebouwd met het hugo-commando na het aanbrengen van wijzigingen. Controleer of u YOUR_WIDGET_ID hebt vervangen door uw daadwerkelijke widget-ID uit het dashboard. Wis uw browsercache of bekijk in incognitomodus. Als u een CDN gebruikt, moet u mogelijk de cache ongeldig maken. Open de browserconsole (F12) om te controleren op JavaScript-fouten.

Documentatie