Cara Menambahkan Chatbot AI Asyntai ke Situs Web Mana Pun
Panduan universal untuk HTML, situs kustom, dan generator statis
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:
<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 File HTML Anda
Cara paling sederhana untuk menambahkan chatbot adalah menempelkan kode embed langsung ke file HTML Anda:
- Buka file HTML Anda di editor teks
- Temukan tag penutup
</body> - Tempel kode embed Asyntai Anda tepat sebelum tag
</body> - Simpan file
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
Tips: Menambahkan skrip sebelum tag penutup </body> memastikan skrip dimuat setelah konten halaman Anda, yang optimal untuk performa dan tidak akan memperlambat halaman Anda.
Untuk Situs Web Multi-Halaman
If your website has multiple HTML pages, you have several options:
Opsi A: Tambahkan ke Setiap Halaman
Tambahkan kode embed ke setiap file HTML tempat Anda ingin chatbot muncul.
Opsi B: Gunakan Include Footer Bersama
If you're using server-side includes (SSI), PHP includes, or similar:
- Buat file footer.html (atau footer.php)
- Tambahkan kode embed Asyntai ke file ini
- Sertakan file footer ini di semua halaman Anda:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Opsi C: Pemuatan Dinamis JavaScript
Buat satu file JavaScript yang memuat chatbot di semua halaman:
- Buat file bernama asyntai-loader.js:
(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);
})(); - Ganti
YOUR_WIDGET_IDdengan ID widget Anda yang sebenarnya - Sertakan skrip ini di semua halaman Anda:
<script src="/js/asyntai-loader.js"></script>
Untuk Generator Situs Statis
Jika Anda menggunakan generator situs statis, tambahkan kode embed ke layout dasar atau template Anda:
Tambahkan ke _includes/footer.html atau _layouts/default.html
Tambahkan ke layouts/partials/footer.html atau layouts/_default/baseof.html
Add to gatsby-browser.js or use gatsby-ssr.js
Tambahkan ke pages/_document.js atau gunakan komponen next/script
Tambahkan ke nuxt.config.js di bawah head.script
Tambahkan ke layout dasar Anda di _includes/
Tambahkan ke src/layouts/Layout.astro sebelum </body>
Tambahkan ke .vuepress/config.js di bawah head
Untuk Aplikasi React / Vue / Angular
Untuk aplikasi satu halaman (SPA), Anda dapat menambahkan skrip ke index.html atau memuatnya secara dinamis:
React (metode index.html)
<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
React (metode useEffect)
// In your App.js or a component
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
Vue (di main.js atau App.vue)
// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
Angular (di index.html)
<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Langkah 3: Verifikasi Instalasi
Setelah menambahkan kode, buka 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? Periksa bahwa skrip ditempatkan dengan benar sebelum tag </body>. Pastikan tidak ada kesalahan JavaScript di konsol browser Anda (tekan F12 untuk membuka alat pengembang). Coba bersihkan cache browser Anda atau lihat di jendela penyamaran.
Penting: Chatbot memerlukan situs web Anda disajikan melalui HTTP atau HTTPS (tidak dibuka langsung sebagai file). Jika Anda menguji secara lokal, gunakan server pengembangan lokal.