Cara Menambahkan Chatbot AI Asyntai ke Umbraco

Platform:

Umbraco

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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:

Langkah 2: Edit Template Master (Direkomendasikan)

Cara termudah untuk menambahkan chatbot ke semua halaman adalah dengan mengedit template Master Anda:

1. Masuk ke Umbraco Backoffice Anda
2. Buka Settings di sidebar kiri
3. Perluas Templates
4. Klik pada template Master Anda (atau template layout utama yang digunakan situs Anda)
5. Temukan tag penutup </body>
6. Tempel kode embed Asyntai Anda tepat sebelum tag </body>
7. Klik "Save"

Alternatif: Menggunakan Tipe Dokumen Pengaturan Situs

Untuk fleksibilitas lebih, Anda dapat menambahkan kolom kustom untuk mengelola skrip footer:

1. Buka Settings → Document Types
2. Edit tipe dokumen Site Settings Anda (atau buat jika belum ada)
3. Tambahkan properti baru bernama "Footer Scripts" dengan tipe data Textarea
4. Simpan Tipe Dokumen
5. Buka Content dan edit node Pengaturan Situs Anda
6. Tempel kode embed Asyntai Anda di kolom Footer Scripts
7. Di template Master Anda, tambahkan kode ini sebelum </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Simpan konten dan template

Alternatif: Menggunakan Folder Scripts

Anda juga dapat membuat file JavaScript di Umbraco Backoffice:

1. Buka Settings → Scripts
2. Klik kanan pada Scripts dan pilih "Create"
3. Buat file baru bernama asyntai-chatbot.js
4. Tambahkan kode berikut:
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
5. Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
6. Simpan file
7. Sertakan skrip ini di template Master Anda sebelum </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Alternatif: Khusus Halaman dengan RenderSection

Jika Anda hanya ingin chatbot di halaman tertentu:

1. Di template Master Anda, tambahkan sebelum </body>:
   @RenderSection("footerScripts", required: false)
2. Di template halaman tertentu tempat Anda ingin chatbot, tambahkan:
   @section footerScripts {
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}

Langkah 3: Verifikasi Instalasi

Setelah menyimpan perubahan Anda, 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.