Cara Menambah Chatbot AI Asyntai ke Mana-mana Laman Web
Panduan universal untuk HTML, laman tersuai, dan penjana statik
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 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 ke Fail HTML Anda
Cara paling mudah untuk menambah chatbot ialah menampal kod benam terus ke dalam fail HTML anda:
- Buka fail HTML anda dalam editor teks
- Cari tag penutup
</body> - Tampal kod benam Asyntai anda sejurus sebelum tag
</body> - Simpan fail
<!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>
Petua: Menambah skrip sebelum tag penutup </body> memastikan ia dimuatkan selepas kandungan halaman anda, yang optimum untuk prestasi dan tidak akan melambatkan halaman anda.
Untuk Laman Web Berbilang Halaman
If your website has multiple HTML pages, you have several options:
Pilihan A: Tambah ke Setiap Halaman
Tambah kod benam ke setiap fail HTML di mana anda mahu chatbot muncul.
Pilihan B: Gunakan Sertaan Footer Biasa
If you're using server-side includes (SSI), PHP includes, or similar:
- Buat fail footer.html (atau footer.php)
- Tambah kod benam Asyntai ke fail ini
- Sertakan fail footer ini dalam semua halaman anda:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
Pilihan C: Pemuatan Dinamik JavaScript
Buat satu fail JavaScript yang memuatkan chatbot pada semua halaman:
- Buat fail yang dipanggil 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);
})(); - Gantikan
YOUR_WIDGET_IDdengan ID widget sebenar anda - Sertakan skrip ini dalam semua halaman anda:
<script src="/js/asyntai-loader.js"></script>
Untuk Penjana Laman Statik
Jika anda menggunakan penjana laman statik, tambah kod benam ke susun atur asas atau templat anda:
Tambah ke _includes/footer.html atau _layouts/default.html
Tambah ke layouts/partials/footer.html atau layouts/_default/baseof.html
Add to gatsby-browser.js or use gatsby-ssr.js
Tambah ke pages/_document.js atau gunakan komponen next/script
Tambah ke nuxt.config.js di bawah head.script
Tambah ke susun atur asas anda dalam _includes/
Tambah ke src/layouts/Layout.astro sebelum </body>
Tambah ke .vuepress/config.js di bawah head
Untuk Aplikasi React / Vue / Angular
Untuk aplikasi halaman tunggal (SPA), anda boleh menambah skrip ke index.html anda atau memuatkannya secara dinamik:
React (kaedah 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 (kaedah 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 (dalam 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 (dalam 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: Sahkan Pemasangan
Selepas menambah kod, buka laman web anda dalam tab pelayar baharu atau tetingkap inkognito. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah. Klik untuk memastikan ia terbuka dan berfungsi dengan betul.
Tidak nampak widget? Pastikan skrip diletakkan dengan betul sebelum tag </body>. Pastikan tiada ralat JavaScript dalam konsol pelayar anda (tekan F12 untuk membuka alat pembangun). Cuba kosongkan cache pelayar anda atau lihat dalam tetingkap inkognito.
Penting: Chatbot memerlukan laman web anda dihidangkan melalui HTTP atau HTTPS (tidak dibuka terus sebagai fail). Jika anda menguji secara tempatan, gunakan pelayan pembangunan tempatan.