Cara Menambahkan Chatbot AI Asyntai ke ProcessWire

Panduan langkah demi langkah untuk situs web ProcessWire 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: Tambahkan ke File Template (Direkomendasikan)

ProcessWire menggunakan file template PHP yang terletak di direktori site/templates/. Pendekatan termudah adalah menambahkan kode embed langsung ke file template utama Anda:

Akses file instalasi ProcessWire Anda melalui FTP, SSH, atau pengelola file Anda
Navigasi ke site/templates/
Buka file template utama Anda — biasanya _main.php atau basic-page.php tergantung pada profil situs Anda
Jika Anda menggunakan strategi output tertunda (bawaan untuk sebagian besar profil situs), buka _main.php
Temukan tag penutup </body>
Tempel kode embed Asyntai Anda tepat sebelumnya:

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

Tip: Menempatkan skrip tepat sebelum tag penutup </body> memastikan chatbot dimuat setelah konten halaman, yang direkomendasikan untuk kinerja optimal dan tidak akan memperlambat rendering halaman Anda.

Metode Alternatif 1: Menggunakan _foot.inc atau File Append _main.php

Jika situs ProcessWire Anda menggunakan pendekatan file append (umum di banyak profil situs), Anda dapat menambahkan kode embed ke include footer bersama:

Navigasi ke site/templates/
Buka _foot.inc (atau file include footer yang setara)
Tempel kode embed Asyntai Anda tepat sebelum tag penutup </body>
Simpan file

Strategi output tertunda ProcessWire biasanya bekerja dengan tiga file utama:

_init.php — dijalankan sebelum setiap template, menginisialisasi variabel
File template Anda (misalnya, basic-page.php) — mengisi variabel konten
_main.php — menghasilkan markup HTML akhir menggunakan variabel tersebut

Jika situs Anda menggunakan pendekatan ini, menambahkan skrip ke _main.php sebelum </body> memastikan skrip muncul di setiap halaman.

Catatan: Nama file _init.php dan _main.php dikonfigurasi di site/config.php Anda melalui pengaturan $config->prependTemplateFile dan $config->appendTemplateFile. Periksa konfigurasi Anda jika file Anda bernama berbeda.

Metode Alternatif 2: Menggunakan Array $config->scripts

ProcessWire menyediakan FilenameArray $config->scripts yang dapat Anda gunakan untuk mengelola file JavaScript. Di _init.php atau file template individual Anda, tambahkan:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Kemudian di _main.php (atau include footer) Anda, lakukan loop melalui array skrip untuk menampilkannya:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Penting: Pendekatan $config->scripts menangani atribut src skrip, tetapi atribut data-asyntai-id perlu ditangani secara terpisah. Anda perlu menambahkan atribut data secara manual di output loop, atau gunakan metode tag skrip langsung dari Langkah 2 untuk pengaturan yang paling sederhana.

Metode Alternatif 3: Menggunakan Hook (ready.php)

Untuk pendekatan yang lebih canggih, Anda dapat menggunakan sistem hook ProcessWire untuk secara otomatis menyuntikkan skrip chatbot ke setiap halaman. Tambahkan kode berikut ke file site/ready.php Anda:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Hook ini mencegat output HTML yang dirender dari setiap halaman dan menyuntikkan skrip Asyntai tepat sebelum tag penutup </body> secara otomatis.

Tip: Pendekatan hook ready.php ideal jika Anda ingin chatbot di setiap halaman tanpa memodifikasi file template apa pun. Pendekatan ini juga bertahan dari perubahan template dan pembaruan tema karena berada di luar file template.

Langkah 3: Verifikasi Instalasi

Setelah menyimpan perubahan Anda, kunjungi situs ProcessWire 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 menyimpan semua file yang dimodifikasi. Coba bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika cache template ProcessWire diaktifkan, Anda mungkin perlu membersihkannya dengan membuka Modules → Core → Template Engine Cache atau dengan menambahkan ?nocache=1 ke URL Anda. Verifikasi juga bahwa file template Anda benar-benar digunakan oleh halaman yang Anda lihat.