Cara Menambah Chatbot AI Asyntai ke WooCommerce

Panduan langkah demi langkah untuk kedai WooCommerce

Dapatkan Kod Benam

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: Menggunakan Plugin (Disyorkan)

Cara paling mudah untuk menambah chatbot ke kedai WooCommerce anda adalah menggunakan plugin header/footer percuma:

  1. Log masuk ke Papan Pemuka Admin WordPress anda
  2. Pergi ke Plugins → Add New
  3. Cari "Insert Headers and Footers" oleh WPCode (atau plugin serupa)
  4. Klik "Install Now" dan kemudian "Activate"
  5. Pergi ke Code Snippets → Header & Footer (atau halaman tetapan plugin)
  6. Tampalkan kod benam Asyntai anda dalam bahagian "Footer"
  7. Klik "Save Changes"

Petua: Menambah kod ke footer memastikan ia dimuat selepas kandungan kedai anda, yang sesuai untuk widget sembang dan tidak akan melambatkan pemuatan halaman anda atau mengganggu fungsi WooCommerce.

Alternatif: Menggunakan Penyesuai Tema

Banyak tema WooCommerce mempunyai pilihan terbina dalam untuk menambah skrip tersuai:

  1. Pergi ke Appearance → Customize
  2. Cari bahagian yang dipanggil "Additional CSS/JS", "Custom Code", atau "Footer Scripts"
  3. Tampalkan kod benam Asyntai anda dalam medan yang sesuai
  4. Klik "Publish" untuk menyimpan perubahan anda

Nota: Tidak semua tema mempunyai pilihan ini. Jika tema anda tidak menyertakan medan skrip tersuai, gunakan kaedah plugin atau sunting fail functions.php tema anda.

Alternatif: Sunting Fail Tema (functions.php)

Untuk pembangun atau mereka yang selesa menyunting fail tema:

  1. Pergi ke Appearance → Theme File Editor
  2. Pilih tema aktif anda (atau sebaiknya tema anak anda)
  3. Buka fail functions.php
  4. Tambahkan kod berikut di akhir fail:
    function add_asyntai_chatbot() {
      echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    }
    add_action('wp_footer', 'add_asyntai_chatbot');
  5. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
  6. Klik "Update File"

Penting: Sentiasa gunakan tema anak apabila menyunting fail tema. Perubahan pada tema induk akan hilang apabila anda mengemas kini tema anda. Jika anda tidak selesa menyunting kod, gunakan kaedah plugin sebaliknya.

Alternatif: Hook Khusus WooCommerce

Untuk memuatkan chatbot hanya pada halaman WooCommerce (kedai, produk, troli, pembayaran):

  1. Tambahkan kod ini ke fail functions.php tema anda:
    function add_asyntai_chatbot_woocommerce() {
      if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) {
        echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
      }
    }
    add_action('wp_footer', 'add_asyntai_chatbot_woocommerce');
  2. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
  3. Simpan fail

Petua: Kaedah ini berguna jika anda hanya mahu chatbot AI muncul di halaman kedai anda untuk membantu pelanggan dengan produk dan pesanan, dan bukan di seluruh laman web anda.

Langkah 3: Sahkan Pemasangan

Selepas menyimpan perubahan anda, lawati kedai WooCommerce anda dalam tab pelayar baharu atau tetingkap inkognito. Anda sepatutnya dapat melihat butang widget sembang di sudut kanan bawah. Klik untuk memastikan ia dibuka dan berfungsi dengan betul.

Tidak nampak widget? Jika anda mempunyai plugin caching dipasang (seperti WP Super Cache, W3 Total Cache, atau WP Rocket), kosongkan cache anda terlebih dahulu. Juga cuba kosongkan cache pelayar anda atau lihat dalam tetingkap inkognito.