Cara Menambahkan Chatbot AI Asyntai ke TYPO3

Panduan langkah demi langkah untuk situs web TYPO3

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: Menggunakan TypoScript footerData (Direkomendasikan)

Cara termudah untuk menambahkan chatbot ke semua halaman adalah menggunakan TypoScript footerData:

Masuk ke Backend TYPO3 Anda
Buka Web → Template
Pilih halaman root Anda di pohon halaman
Klik pada "Edit the whole template record" (atau pilih "Info/Modify" lalu "Setup")
Di kolom Setup, tambahkan kode TypoScript berikut:
page.footerData.99 = TEXT page.footerData.99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya dari dashboard
Klik "Save"
Bersihkan cache TYPO3: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

Tips: Menggunakan footerData menempatkan skrip tepat sebelum tag penutup </body>, yang direkomendasikan untuk widget chat karena tidak akan memperlambat pemuatan halaman Anda.

Alternatif: Menggunakan Paket Situs (Untuk Paket Situs)

Jika Anda menggunakan paket situs, Anda dapat menambahkan skrip melalui file konfigurasi TypoScript Anda:

Navigasi ke folder paket situs Anda: packages/your_sitepackage/Configuration/TypoScript/
Buka atau buat setup.typoscript
Tambahkan kode berikut:
page.footerData { 99 = TEXT 99.value = <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> }
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Bersihkan cache di backend TYPO3

Alternatif: Menggunakan Template Fluid (FooterAssets)

For sites using Fluid templates, you can use the FooterAssets section:

Navigasi ke file template Fluid Anda (biasanya di Resources/Private/Templates/)
Tambahkan bagian FooterAssets di layout atau template Anda:
<f:section name="FooterAssets"> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </f:section>
Pastikan layout halaman Anda merender bagian FooterAssets:
<f:render section="FooterAssets" optional="true" />
Bersihkan cache TYPO3

Penting: Fitur FooterAssets memerlukan TYPO3 v8 atau yang lebih baru. Untuk versi yang lebih lama, gunakan metode TypoScript footerData.

Alternatif: Menggunakan AssetCollector (Untuk Pengembang)

Untuk pengembang ekstensi, TYPO3 v10.3+ menawarkan API AssetCollector:

Di kode PHP Anda (misalnya, controller atau middleware), inject AssetCollector
Tambahkan skrip dengan atribut kustom:
use TYPO3\CMS\Core\Page\AssetCollector; $this->assetCollector->addJavaScript( 'asyntai_chatbot', 'https://asyntai.com/static/js/chat-widget.js', ['async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'] );

Langkah 3: Verifikasi Instalasi

Setelah menyimpan perubahan dan membersihkan cache, kunjungi situs web Anda di tab browser baru atau jendela penyamaran. Anda akan melihat tombol widget obrolan di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan untuk membersihkan semua cache: buka Admin Tools → Maintenance → Flush TYPO3 and PHP Cache. Coba juga bersihkan cache browser Anda atau lihat di jendela penyamaran. Jika menggunakan TypoScript, verifikasi bahwa template Anda disertakan dengan benar dalam hierarki halaman.