Cara Menambahkan Chatbot AI Asyntai ke Adobe Experience Manager

Panduan langkah demi langkah untuk situs web AEM

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 Menggunakan Komponen Halaman (Disarankan)

Metode yang disarankan adalah menambahkan kode chatbot ke bagian head komponen halaman AEM Anda untuk instalasi di seluruh situs:

Masuk ke AEM Author instance Anda
Navigasi ke CRXDE Lite (biasanya di http://your-aem-instance:4502/crx/de)
Temukan templat komponen halaman Anda (biasanya di bawah /apps/your-project/components/page)
Temukan atau buat file head.html atau headerlibs.html
Tambahkan kode embed Asyntai Anda ke file ini
Klik "Save All" di menu atas
Replikasi perubahan ke instans publish Anda

Tip: Menempatkan kode di file head.html memastikan chatbot muncul di semua halaman yang menggunakan templat tersebut. Ini adalah pendekatan paling bersih untuk instalasi di seluruh situs.

Metode Alternatif 1: Client Libraries (ClientLibs)

Untuk pendekatan yang lebih terstruktur, Anda dapat menggunakan sistem Client Library AEM:

Buat folder client library baru di bawah /apps/your-project/clientlibs
Atur tipe node cq:clientLibraryFolder
Buat file js.txt yang mencantumkan file JavaScript Anda
Tambahkan kode embed Asyntai Anda ke file JavaScript di folder ini
Sertakan client library di komponen halaman Anda menggunakan:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Catatan: Metode ini disarankan untuk proyek dengan struktur ClientLib yang sudah ada dan memberikan organisasi yang lebih baik untuk implementasi yang lebih besar.

Metode Alternatif 2: Manajemen Tag (Adobe Launch)

Jika Anda menggunakan Adobe Launch (sebelumnya DTM) atau pengelola tag lainnya:

Masuk ke Adobe Experience Platform Launch
Navigasi ke properti Anda
Buka Rules dan buat aturan baru
Atur peristiwa ke "Page Bottom" atau "DOM Ready"
Tambahkan aksi: Custom Code
Tempel kode embed Asyntai Anda
Simpan dan terbitkan library

Tip: Menggunakan Adobe Launch adalah pendekatan yang direkomendasikan Adobe untuk menambahkan skrip pihak ketiga. Ini memberikan kontrol yang lebih baik, kemampuan pengujian, dan tidak memerlukan deployment kode.

Metode Alternatif 3: Experience Fragment

Untuk implementasi yang fleksibel dan ramah penulis:

Navigasi ke Experience Fragments di AEM
Buat Experience Fragment baru
Tambahkan komponen Teks atau komponen HTML
Beralih ke mode sumber HTML
Tempel kode embed Asyntai Anda
Sertakan Experience Fragment ini di footer templat halaman Anda

Penting: Pastikan Anda memiliki izin AEM yang tepat untuk memodifikasi templat dan komponen. Untuk AEM as a Cloud Service, perubahan mungkin perlu melalui pipeline CI/CD Anda.

Langkah 3: Verifikasi Instalasi

Setelah menerapkan perubahan, bersihkan cache browser Anda dan kunjungi situs web Anda. Anda seharusnya melihat tombol widget obrolan di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Periksa konsol browser Anda (F12) untuk error JavaScript. Verifikasi bahwa kode telah diterapkan dengan benar ke instans publish Anda. Untuk AEM as a Cloud Service, pastikan perubahan Anda telah berhasil melalui pipeline deployment.