Cara Menambah Chatbot AI Asyntai ke Statamic

Panduan langkah demi langkah untuk laman web Statamic CMS

Platform:

Langkah 1: Dapatkan Kod Benam Anda

Pertama, pergi ke Papan Pemuka Asyntai anda dan tatal ke bawah ke bahagian "Kod Benam". Salin kod benam unik anda yang akan kelihatan seperti ini:

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

Nota: Kod di atas hanyalah contoh. Anda mesti menyalin kod benam unik anda sendiri dari Papan Pemuka anda kerana ia mengandungi ID widget peribadi anda.

Langkah 2: Pilih Kaedah Pemasangan

Statamic menyokong templat Antlers dan Blade. Pilih kaedah berdasarkan enjin templat yang anda gunakan:

Kaedah 1: Layout Antlers (Disyorkan)

Cara paling mudah untuk menambah chatbot adalah dengan menyertakannya dalam fail layout utama anda. Statamic menggunakan Antlers sebagai enjin templat lalainya.

Navigasi ke direktori resources/views projek Statamic anda
Buka fail layout anda (biasanya layout.antlers.html)
Cari tag penutup </body>
Tampal kod benam Asyntai anda sejurus sebelum tag </body>
Simpan fail

<!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>

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

Kaedah 2: Layout Blade

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

Navigasi ke direktori resources/views projek Statamic anda
Buka fail layout Blade anda (contohnya, layout.blade.php)
Cari tag penutup </body>
Tampal kod benam Asyntai anda sejurus sebelum tag </body>
Simpan fail

<!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>

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

Kaedah 3: Menggunakan Partial

Untuk organisasi yang lebih baik, anda boleh mencipta partial boleh guna semula untuk chatbot:

Langkah 1: Cipta Partial

Cipta fail baharu di resources/views/partials/_chatbot.antlers.html
Tambah kod benam Asyntai anda ke fail ini:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Langkah 2: Sertakan dalam Layout Anda

Buka fail layout anda (layout.antlers.html)
Tambah tag partial sebelum </body>:
{{ partial:chatbot }} </body>

Mengapa menggunakan partial? Partial memudahkan pengurusan skrip luaran di satu tempat. Jika anda perlu mengemaskini kod chatbot, anda hanya perlu mengedit satu fail.

Menggunakan Pelbagai Layout

Jika laman Statamic anda menggunakan pelbagai layout (contohnya, layout berbeza untuk catatan blog, halaman pendaratan, dll.), pastikan untuk menambah skrip chatbot ke setiap fail layout di mana anda mahu widget muncul.

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

Dalam entri: Tambah layout: your_layout ke front matter
Dalam koleksi: Tetapkan layout lalai dalam fail konfigurasi YAML koleksi anda
Dalam blueprint: Tambah medan layout yang boleh dipilih oleh editor

Untuk Kit Permulaan Statamic

Jika anda menggunakan Kit Permulaan Statamic, lokasi layout mungkin berbeza. Lokasi biasa termasuk:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

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

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Langkah 3: Kosongkan Cache dan Sahkan

Selepas menambah kod, kosongkan cache Statamic anda untuk memastikan perubahan berkuat kuasa:

php artisan cache:clear
php please stache:refresh

Kemudian lawati laman web anda dalam tab pelayar baharu atau tetingkap inkognito. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah. Klik padanya untuk memastikan ia dibuka dan berfungsi dengan betul.

Tidak nampak widget? Pastikan anda telah mengosongkan cache Laravel dan Stache Statamic. Jika anda menggunakan caching statik, jalankan php please static:clear juga. Semak konsol pelayar anda (F12) untuk sebarang ralat JavaScript.

Penting: Jika anda menggunakan penjana laman statik Statamic (ssg), pastikan untuk menjana semula fail statik anda selepas menambah skrip chatbot dengan menjalankan php please ssg:generate.

Dokumentasi