Kembali ke Papan Pemuka

Dokumentasi

Ketahui cara menggunakan Asyntai

Cara Bermula
Pemasangan Pangkalan Pengetahuan Uji AI Anda Urus Laman Web
Penyesuaian
Warna Widget Nama Pembantu AI Mesej Awal Kedudukan Widget Pencetus Automatik Gelembung Sapaan Lencana Belum Dibaca Mod Arahan Ajukan Soalan Gunakan Emoji Kumpul Emel Kumpul Nombor Telefon Tangkapan Prospek Pintar Penyetempatan Sembunyikan Penjenamaan Pautan Privasi Notis Tersuai Muat Turun Transkrip Perbualan Baharu Sejarah Perbualan Slogan & Titik Status Pertuturan ke Teks Ikon Sembang Logo Syarikat Had Aksara Suhu
Petua Arahan AI Bandingkan Pelan
Ciri-ciri
Rangkak Laman Web Jurang Pengetahuan Kad Produk Kad Produk Dinamik Dynamic Images Konteks Pengguna Pemantauan Langsung Pengambilalihan Manusia Eskalasi Pemberitahuan AI Laporan Harian Suapan Data Masa Nyata Suapan Data Masa Nyata Maks Ahli Pasukan Log Masuk Tunggal Sertakan Imej Penglihatan Imej Widget Terjemahan Penyetempatan Prospek Tangkapan Prospek Pintar Tiket Sokongan Tempahan Benam Kecualikan Halaman IP Disekat Model Lebih Pintar Aktifkan Pemikiran Cadangan Balasan Mesej Susulan Pertuturan ke Teks Muat Turun Transkrip Sembang Terbenam
Analitik
Analitik Sembang Log Sembang
Integrasi
REST API Instagram Messenger WhatsApp Zapier Email Aplikasi Mudah Alih
Lain-lain
Tambah ke Skrin Utama Butang Buka Tersuai
Tanya AI

Cara Menambah Chatbot AI Asyntai ke DatoCMS

Panduan langkah demi langkah untuk laman web berkuasa DatoCMS

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

CMS Tanpa Kepala: DatoCMS ialah CMS tanpa kepala yang menghantar kandungan melalui API. Kod chatbot perlu ditambah ke aplikasi antara muka hadapan anda (Next.js, Gatsby, Nuxt, dll.), bukan ke papan pemuka DatoCMS.

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 Antara Muka Hadapan Next.js (Paling Biasa)

Next.js ialah rangka kerja antara muka hadapan paling popular yang digunakan dengan DatoCMS. Tambah chatbot menggunakan komponen Script:

App Router (app/layout.tsx):

  1. Buka fail susun atur akar anda: app/layout.tsx
  2. Import komponen Script dan tambah chatbot:
    import Script from 'next/script'

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            {children}
            <Script
              src="https://asyntai.com/static/js/chat-widget.js"
              data-asyntai-id="YOUR_WIDGET_ID"
              strategy="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
  4. Simpan fail dan mulakan semula pelayan pembangunan anda

Pages Router (pages/_app.tsx):

  1. Buka fail pages/_app.tsx anda
  2. Tambah komponen Script:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://asyntai.com/static/js/chat-widget.js"
            data-asyntai-id="YOUR_WIDGET_ID"
            strategy="afterInteractive"
          />
        </>
      )
    }

Petua: Menggunakan strategy="afterInteractive" memastikan chatbot dimuatkan sejurus selepas halaman menjadi interaktif, memberikan keseimbangan yang baik antara prestasi dan ketersediaan.

Kaedah Alternatif 1: Antara Muka Hadapan Gatsby

Untuk laman Gatsby yang menarik kandungan dari DatoCMS melalui gatsby-source-datocms:

  1. Buat atau edit gatsby-ssr.js dalam akar projek anda:
    import React from 'react'

    export const onRenderBody = ({ setPostBodyComponents }) => {
      setPostBodyComponents([
        <script
          key="asyntai-chatbot"
          async
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
        />
      ])
    }
  2. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
  3. Mulakan semula pelayan pembangunan Gatsby anda

Kaedah Alternatif 2: Antara Muka Hadapan Nuxt.js

Untuk aplikasi Nuxt.js yang menggunakan kandungan DatoCMS:

  1. Tambah ke nuxt.config.ts anda:
    export default defineNuxtConfig({
      app: {
        head: {
          script: [
            {
              src: 'https://asyntai.com/static/js/chat-widget.js',
              async: true,
              'data-asyntai-id': 'YOUR_WIDGET_ID'
            }
          ]
        }
      }
    })
  2. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
  3. Mulakan semula pelayan pembangunan Nuxt anda

Kaedah Alternatif 3: HTML Biasa / Laman Statik

Jika anda menggunakan Content Delivery API DatoCMS dengan laman HTML statik atau penjana laman statik:

  1. Tambah kod benam ke fail HTML anda sebelum tag penutup </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
  3. Simpan fail dan muat naik ke pengehosan anda

Kaedah Alternatif 4: React (Vite/CRA)

Untuk aplikasi React standard (Create React App, Vite, dll.) menggunakan API DatoCMS:

Pilihan A: Tambah ke public/index.html

  1. Buka fail public/index.html anda (CRA) atau index.html (Vite)
  2. Tambah kod benam sebelum tag penutup </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Simpan fail

Pilihan B: useEffect dalam Komponen Akar

  1. Buat komponen chatbot atau tambah ke komponen akar anda:
    // components/Chatbot.jsx
    import { useEffect } from 'react'

    export default function Chatbot() {
      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)
      }, [])
      return null
    }
  2. Import dan paparkan komponen dalam App.jsx anda atau susun atur akar

Langkah 3: Laksanakan dan Sahkan

Selepas menambah kod chatbot ke laman berkuasa DatoCMS anda, laksanakan atau jalankan pelayan pembangunan anda. Lawati 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 anda telah menambah skrip ke fail yang betul untuk rangka kerja anda. Semak konsol pembangun pelayar anda untuk sebarang ralat. Jika menggunakan pemaparan sisi pelayan, pastikan skrip berjalan di sisi klien. Cuba kosongkan cache pelayar anda atau lihat dalam tetingkap inkognito.

Pemboleh Ubah Persekitaran: Untuk keselamatan dan fleksibiliti yang lebih baik, pertimbangkan untuk menyimpan ID widget anda dalam pemboleh ubah persekitaran (contohnya, NEXT_PUBLIC_ASYNTAI_ID untuk Next.js atau VITE_ASYNTAI_ID untuk Vite) dan bukannya mengekodkannya secara tetap.