Cara Menambahkan Chatbot AI Asyntai ke MODX

Panduan langkah demi langkah untuk situs web MODX 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 Template MODX (Direkomendasikan)

Cara yang direkomendasikan untuk menambahkan chatbot adalah dengan mengedit Template MODX Anda langsung di MODX Manager:

Masuk ke MODX Manager Anda (panel admin)
Di sidebar kiri, buka Elements > Templates
Buka template situs Anda (biasanya disebut "BaseTemplate" atau template aktif Anda)
Temukan tag penutup </body> di kode template
Tempel kode embed Asyntai Anda tepat sebelum tag penutup </body>
Klik "Save" untuk menyimpan template

<!-- Your existing template content -->

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

Tip: Menambahkan kode tepat sebelum tag penutup </body> memastikan chatbot dimuat setelah semua konten halaman, yang merupakan penempatan yang direkomendasikan untuk widget chat dan tidak akan memperlambat pemuatan halaman Anda.

Metode Alternatif 1: Menggunakan MODX Chunk

Anda dapat menggunakan MODX Chunk untuk menjaga kode embed tetap terpisah dan dapat digunakan kembali:

Di MODX Manager, buka Elements > Chunks
Klik "New Chunk" untuk membuat chunk baru
Beri nama chunk "asyntaiWidget"
Tempel kode embed Asyntai Anda ke area konten chunk
Klik "Save"
Buka template Anda (di bawah Elements > Templates)
Tambahkan pemanggilan chunk [[$asyntaiWidget]] tepat sebelum tag penutup </body>
Simpan template

<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

Tip: Menggunakan Chunk memudahkan pengelolaan dan pembaruan kode embed di satu tempat, terutama jika Anda menggunakan beberapa template di seluruh situs Anda.

Metode Alternatif 2: Menggunakan Pengaturan Sistem MODX (HTML Head/Footer)

Beberapa pengaturan MODX menyertakan placeholder untuk skrip footer melalui Pengaturan Sistem:

Di MODX Manager, buka System > System Settings
Filter berdasarkan "htmlhead" atau cari pengaturan sistem kustom untuk skrip footer
Jika pengaturan Anda memiliki placeholder untuk skrip footer (seperti [[++footer_scripts]]), Anda dapat menggunakannya
Tetapkan nilai pengaturan sistem ke kode embed Asyntai Anda
Pastikan placeholder yang sesuai [[++footer_scripts]] ada di template Anda sebelum tag penutup </body>
Simpan pengaturan sistem

<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

Catatan: Metode ini bergantung pada pengaturan MODX Anda yang memiliki pengaturan sistem kustom untuk skrip footer. Jika belum ada, Anda dapat membuat pengaturan sistem kustom dan mereferensikannya di template Anda menggunakan sintaks [[++setting_key]].

Metode Alternatif 3: Menggunakan Plugin MODX (OnWebPagePrerender)

Untuk pendekatan tingkat lanjut, Anda dapat membuat Plugin MODX yang secara otomatis menyuntikkan kode chatbot ke setiap halaman:

Di MODX Manager, buka Elements > Plugins
Klik "New Plugin" untuk membuat plugin baru
Beri nama plugin "AsyntaiChatbot"
Tempel kode PHP berikut ke area kode plugin:

$output = &$modx->resource->_output;
$script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
$output = str_replace('</body>', $script . '</body>', $output);

Klik tab "System Events"
Centang kotak di samping "OnWebPagePrerender" untuk menjalankan plugin ini pada event tersebut
Klik "Save"

Penting: Ganti YOUR_WIDGET_ID dengan ID widget sebenarnya dari Dasbor Asyntai. Plugin ini akan secara otomatis menyuntikkan skrip chatbot ke setiap halaman di situs MODX Anda sebelum dirender.

Langkah 3: Bersihkan Cache dan Verifikasi

Setelah menambahkan kode embed menggunakan salah satu metode di atas, Anda perlu membersihkan cache MODX dan memverifikasi instalasi:

Di MODX Manager, buka Manage > Clear Cache (atau klik ikon bersihkan cache di menu atas)
Buka situs web Anda di tab browser baru atau jendela penyamaran
Anda seharusnya melihat tombol widget chat di pojok kanan bawah halaman Anda
Klik untuk memastikan widget terbuka dan berfungsi dengan benar

Tidak melihat widget? Pastikan Anda telah membersihkan cache MODX dari Manage > Clear Cache di MODX Manager. Coba juga bersihkan cache browser Anda atau lihat situs di jendela penyamaran. Jika Anda menggunakan metode Plugin, verifikasi bahwa event sistem "OnWebPagePrerender" telah dicentang untuk plugin Anda.