Cara Menambahkan Chatbot AI Asyntai ke Hugo

Panduan langkah demi langkah untuk generator situs statis Hugo

Platform:

Langkah 1: Dapatkan Kode Embed Anda

Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:

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

Catatan: Kode di atas hanya contoh. Anda harus menyalin kode embed unik Anda sendiri dari Dasbor karena berisi ID widget personal Anda.

Langkah 2: Tambahkan Kode ke Partial Tema (Disarankan)

Cara terbaik untuk menambahkan chatbot ke semua halaman situs Hugo Anda adalah dengan membuat partial:

Navigasi ke direktori layouts/partials/ proyek Hugo Anda
Buat file baru bernama asyntai-widget.html
Tempelkan kode embed Asyntai Anda ke file ini:

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

Buka file baseof.html tema Anda (biasanya di layouts/_default/baseof.html)
Tambahkan partial sebelum tag penutup </body>:

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

Simpan file dan bangun ulang situs Hugo Anda

Tip: Menggunakan partial adalah cara yang direkomendasikan Hugo untuk menyertakan komponen yang dapat digunakan kembali. Metode ini memastikan chatbot muncul di setiap halaman yang menggunakan template baseof.html, yang biasanya adalah semua halaman di situs Anda.

Metode Alternatif 1: Tambahkan ke Partial Head

Jika tema Anda memiliki partial head, Anda dapat menambahkan kode di sana:

Temukan partial head tema Anda (biasanya layouts/partials/head.html)
Jika tidak ada, buat layouts/partials/head.html di root proyek Anda
Tambahkan kode embed Asyntai Anda ke file ini:

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

Pastikan baseof.html Anda menyertakan partial ini di bagian <head>:

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

Catatan: Jika tema Anda sudah memiliki partial head.html dengan konten yang ada, cukup tambahkan kode Asyntai Anda ke dalamnya. Jangan mengganti konten yang ada.

Metode Alternatif 2: Folder Static dengan JavaScript Kustom

Untuk pendekatan yang lebih modular menggunakan folder static Hugo:

Navigasi ke direktori static/js/ proyek Hugo Anda
Buat direktori jika belum ada
Buat file baru bernama asyntai-loader.js
Tambahkan kode berikut untuk memuat widget:

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

Referensikan file ini di baseof.html atau partial footer Anda sebelum </body>:

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

Tip: File di direktori static/ disalin apa adanya ke root situs Anda yang dipublikasikan. Fungsi relURL menghasilkan jalur relatif yang benar untuk deployment Anda.

Metode Alternatif 3: Konfigurasi Hugo (config.toml/yaml)

Untuk beberapa tema Hugo yang mendukung skrip kustom melalui konfigurasi:

# 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

Catatan: Metode ini hanya berfungsi jika tema Anda mendukung parameter customJS. Periksa dokumentasi tema Anda. Anda mungkin juga perlu menambahkan atribut data-asyntai-id melalui kustomisasi tema.

Metode Alternatif 4: Front Matter (Khusus Halaman)

Untuk menambahkan chatbot hanya ke halaman tertentu:

Tambahkan parameter kustom ke front matter halaman Anda:

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

Di baseof.html atau partial Anda, tambahkan logika bersyarat:

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

Tip: Pendekatan ini memberi Anda kontrol terperinci atas halaman mana yang menyertakan chatbot. Ini berguna untuk situs dokumentasi di mana Anda hanya ingin widget di bagian tertentu.

Metode Alternatif 5: Override Layout Tema

Untuk meng-override layout tema Anda tanpa memodifikasi file tema:

Salin baseof.html tema dari themes/your-theme/layouts/_default/
Tempelkan ke layouts/_default/baseof.html proyek Anda
Tambahkan kode embed Asyntai Anda sebelum tag penutup </body>
Simpan dan bangun ulang situs Anda

Penting: Ketika Anda meng-override file tema, Anda tidak akan secara otomatis menerima pembaruan pada file tersebut saat tema diperbarui. Metode ini memberi Anda kontrol penuh tetapi memerlukan lebih banyak pemeliharaan. Pertimbangkan untuk menggunakan partial sebagai gantinya untuk pembaruan tema yang lebih mudah.

Langkah 3: Build dan Deploy

Setelah menambahkan kode, bangun situs Hugo Anda:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Situs yang dihasilkan akan berada di direktori public/
Deploy direktori ini ke platform hosting Anda (Netlify, Vercel, GitHub Pages, dll.)

Tip: Selama pengembangan, gunakan hugo server untuk melihat pratinjau situs Anda secara lokal di http://localhost:1313. Chatbot akan muncul di pojok kanan bawah pada semua halaman.

Langkah 4: Verifikasi Instalasi

Setelah men-deploy situs Hugo Anda, buka di tab browser baru. Anda akan melihat tombol widget obrolan di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda telah membangun ulang situs Anda dengan perintah hugo setelah melakukan perubahan. Periksa bahwa Anda telah mengganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya dari dashboard. Bersihkan cache browser Anda atau lihat dalam mode penyamaran. Jika menggunakan CDN, Anda mungkin perlu membatalkan cache. Buka konsol browser (F12) untuk memeriksa kesalahan JavaScript.

Dokumentasi