Cara Menambah Chatbot AI Asyntai ke Adobe Experience Manager

Panduan langkah demi langkah untuk laman web AEM

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: Tambah Kod Menggunakan Komponen Halaman (Disyorkan)

Kaedah yang disyorkan adalah menambah kod chatbot ke bahagian head komponen halaman AEM anda untuk pemasangan seluruh tapak:

Log masuk ke instans Pengarang AEM anda
Navigasi ke CRXDE Lite (biasanya di http://your-aem-instance:4502/crx/de)
Cari templat komponen halaman anda (biasanya di bawah /apps/your-project/components/page)
Cari atau cipta fail head.html atau headerlibs.html
Tambah kod benam Asyntai anda ke fail ini
Klik "Save All" dalam menu atas
Replikasi perubahan ke instans penerbitan anda

Petua: Meletakkan kod dalam fail head.html memastikan chatbot muncul di semua halaman yang menggunakan templat tersebut. Ini adalah pendekatan paling bersih untuk pemasangan seluruh tapak.

Kaedah Alternatif 1: Perpustakaan Klien (ClientLibs)

Untuk pendekatan yang lebih berstruktur, anda boleh menggunakan sistem Perpustakaan Klien AEM:

Cipta folder perpustakaan klien baharu di bawah /apps/your-project/clientlibs
Tetapkan jenis nod cq:clientLibraryFolder
Cipta fail js.txt yang menyenaraikan fail JavaScript anda
Tambah kod benam Asyntai anda ke fail JavaScript dalam folder ini
Sertakan perpustakaan klien dalam komponen halaman anda menggunakan:

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

Nota: Kaedah ini disyorkan untuk projek dengan struktur ClientLib sedia ada dan menyediakan organisasi yang lebih baik untuk pelaksanaan yang lebih besar.

Kaedah Alternatif 2: Pengurusan Tag (Adobe Launch)

Jika anda menggunakan Adobe Launch (dahulunya DTM) atau pengurus tag lain:

Log masuk ke Adobe Experience Platform Launch
Navigasi ke properti anda
Pergi ke Rules dan cipta peraturan baharu
Tetapkan acara kepada "Page Bottom" atau "DOM Ready"
Tambah tindakan: Custom Code
Tampal kod benam Asyntai anda
Simpan dan terbitkan perpustakaan

Petua: Menggunakan Adobe Launch adalah pendekatan yang disyorkan Adobe untuk menambah skrip pihak ketiga. Ia menyediakan kawalan yang lebih baik, keupayaan ujian dan tidak memerlukan penggunaan kod.

Kaedah Alternatif 3: Fragment Pengalaman

Untuk pelaksanaan yang fleksibel dan mesra pengarang:

Navigasi ke Experience Fragments dalam AEM
Cipta Fragment Pengalaman baharu
Tambah komponen Teks atau komponen HTML
Tukar ke mod sumber HTML
Tampal kod benam Asyntai anda
Sertakan Fragment Pengalaman ini dalam footer templat halaman anda

Penting: Pastikan anda mempunyai kebenaran AEM yang betul untuk mengubah suai templat dan komponen. Untuk AEM sebagai Perkhidmatan Awan, perubahan mungkin perlu melalui saluran paip CI/CD anda.

Langkah 3: Sahkan Pemasangan

Selepas menggunakan perubahan anda, kosongkan cache pelayar anda dan lawati laman web anda. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah. Klik padanya untuk memastikan ia terbuka dan berfungsi dengan betul.

Tidak nampak widget? Semak konsol pelayar anda (F12) untuk ralat JavaScript. Sahkan kod telah digunakan dengan betul ke instans penerbitan anda. Untuk AEM sebagai Perkhidmatan Awan, pastikan perubahan anda berjaya melalui saluran paip penggunaan.