Cara Menambahkan Chatbot AI Asyntai ke Statamic

Panduan langkah demi langkah untuk situs web Statamic CMS

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: Pilih Metode Instalasi

Statamic mendukung templating Antlers dan Blade. Pilih metode berdasarkan mesin templating yang Anda gunakan:

Metode 1: Layout Antlers (Direkomendasikan)

Cara termudah untuk menambahkan chatbot adalah menyertakannya di file layout utama Anda. Statamic menggunakan Antlers sebagai mesin templating bawaannya.

Navigasi ke direktori resources/views proyek Statamic Anda
Buka file layout Anda (biasanya layout.antlers.html)
Temukan tag penutup </body>
Tempel kode embed Asyntai Anda tepat sebelum tag </body>
Simpan file

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

Tips: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Metode 2: Layout Blade

If you're using Blade templates instead of Antlers, follow these steps:

Navigasi ke direktori resources/views proyek Statamic Anda
Buka file layout Blade Anda (misalnya, layout.blade.php)
Temukan tag penutup </body>
Tempel kode embed Asyntai Anda tepat sebelum tag </body>
Simpan file

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Catatan: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Metode 3: Menggunakan Partial

Untuk organisasi yang lebih baik, Anda dapat membuat partial yang dapat digunakan kembali untuk chatbot:

Langkah 1: Buat Partial

Buat file baru di resources/views/partials/_chatbot.antlers.html
Tambahkan kode embed Asyntai Anda ke file ini:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Langkah 2: Sertakan di Layout Anda

Buka file layout Anda (layout.antlers.html)
Tambahkan tag partial sebelum </body>:
{{ partial:chatbot }} </body>

Mengapa menggunakan partial? Partial memudahkan pengelolaan skrip eksternal di satu tempat. Jika Anda perlu memperbarui kode chatbot, Anda hanya perlu mengedit satu file.

Menggunakan Beberapa Layout

Jika situs Statamic Anda menggunakan beberapa layout (misalnya, layout berbeda untuk posting blog, halaman arahan, dll.), pastikan untuk menambahkan skrip chatbot ke setiap file layout tempat Anda ingin widget muncul.

You can set which layout a page uses in several ways:

Di entri: Tambahkan layout: your_layout ke front matter
Di koleksi: Tetapkan layout default di file konfigurasi YAML koleksi Anda
Di blueprint: Tambahkan kolom layout yang dapat dipilih oleh editor

Untuk Kit Starter Statamic

Jika Anda menggunakan Kit Starter Statamic, lokasi layout mungkin bervariasi. Lokasi umum meliputi:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html dengan partial di resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Langkah 3: Bersihkan Cache dan Verifikasi

Setelah menambahkan kode, bersihkan cache Statamic Anda untuk memastikan perubahan berlaku:

php artisan cache:clear
php please stache:refresh

Kemudian kunjungi situs web Anda di tab browser baru atau jendela penyamaran. Anda seharusnya melihat tombol widget chat di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda telah membersihkan cache Laravel dan Stache Statamic. Jika Anda menggunakan caching statis, jalankan juga php please static:clear. Periksa konsol browser (F12) untuk kesalahan JavaScript apa pun.

Penting: Jika Anda menggunakan generator situs statis Statamic (ssg), pastikan untuk meregenerasi file statis Anda setelah menambahkan skrip chatbot dengan menjalankan php please ssg:generate.

Dokumentasi