กลับไปที่แดชบอร์ด

เอกสาร

เรียนรู้วิธีใช้ Asyntai

เริ่มต้นใช้งาน
การติดตั้ง ฐานความรู้ ทดสอบ AI ของคุณ จัดการเว็บไซต์
การปรับแต่ง
สีวิดเจ็ต ชื่อผู้ช่วย AI ข้อความเริ่มต้น ตำแหน่งวิดเจ็ต ทริกเกอร์อัตโนมัติ ฟองข้อความต้อนรับ ป้ายข้อความยังไม่อ่าน โหมดคำสั่ง ถามคำถาม ใช้อิโมจิ เก็บอีเมล เก็บหมายเลขโทรศัพท์ การจับลูกค้าเป้าหมายอัจฉริยะ การปรับให้เข้ากับท้องถิ่น ซ่อนแบรนด์ ลิงก์ความเป็นส่วนตัว ประกาศที่กำหนดเอง ดาวน์โหลดบันทึกการสนทนา การสนทนาใหม่ ประวัติการสนทนา แท็กไลน์และจุดสถานะ เสียงเป็นข้อความ ไอคอนแชท โลโก้บริษัท จำกัดตัวอักษร อุณหภูมิ
เคล็ดลับคำสั่ง AI เปรียบเทียบแผน
ฟีเจอร์
การรวบรวมข้อมูลเว็บไซต์ ช่องว่างความรู้ การ์ดสินค้า การ์ดสินค้าแบบไดนามิก Dynamic Images บริบทผู้ใช้ การติดตามแบบเรียลไทม์ Human Takeover การยกระดับ การแจ้งเตือน AI รายงานประจำวัน ฟีดข้อมูลแบบเรียลไทม์ ฟีดข้อมูลแบบเรียลไทม์ Max สมาชิกในทีม การลงชื่อเข้าใช้ครั้งเดียว รวมรูปภาพ การมองเห็นรูปภาพ วิดเจ็ตแปลภาษา การปรับให้เข้ากับท้องถิ่น ลูกค้าเป้าหมาย การจับลูกค้าเป้าหมายอัจฉริยะ ตั๋วสนับสนุน การจอง การฝัง ยกเว้นหน้า IP ที่ถูกบล็อก โมเดลที่ฉลาดกว่า เปิดใช้งานการคิดวิเคราะห์ คำแนะนำการตอบกลับ ข้อความติดตามผล เสียงเป็นข้อความ ดาวน์โหลดบันทึกการสนทนา แชทแบบฝังตัว
การวิเคราะห์
การวิเคราะห์แชท บันทึกการแชท
การเชื่อมต่อ
REST API Instagram Messenger WhatsApp Zapier Email แอปมือถือ
อื่นๆ
เพิ่มลงในหน้าจอหลัก ปุ่มเปิดแบบกำหนดเอง
ถาม AI

วิธีเพิ่มแชทบอท AI Asyntai ลงใน DatoCMS

คู่มือทีละขั้นตอนสำหรับเว็บไซต์ที่ใช้ DatoCMS

รับโค้ดฝัง
แพลตฟอร์ม:
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

Headless CMS: DatoCMS เป็น headless CMS ที่ส่งมอบเนื้อหาผ่าน API โค้ดแชทบอทต้องถูกเพิ่มลงในแอปพลิเคชันฟรอนต์เอนด์ของคุณ (Next.js, Gatsby, Nuxt ฯลฯ) ไม่ใช่ในแดชบอร์ด DatoCMS

ขั้นตอนที่ 1: รับโค้ดฝังตัวของคุณ

ก่อนอื่น ไปที่แดชบอร์ด Asyntai ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

หมายเหตุ: โค้ดด้านบนเป็นเพียงตัวอย่าง คุณต้องคัดลอกโค้ดฝังตัวเฉพาะของคุณจากแดชบอร์ดเนื่องจากมี widget ID ส่วนตัวของคุณ

ขั้นตอนที่ 2: เพิ่มลงในฟรอนต์เอนด์ Next.js (พบมากที่สุด)

Next.js เป็นเฟรมเวิร์กฟรอนต์เอนด์ที่นิยมใช้กับ DatoCMS มากที่สุด เพิ่มแชทบอทโดยใช้คอมโพเนนต์ Script:

App Router (app/layout.tsx):

  1. เปิดไฟล์เลย์เอาต์หลักของคุณ: app/layout.tsx
  2. นำเข้าคอมโพเนนต์ Script และเพิ่มแชทบอท:
    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. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
  4. บันทึกไฟล์และรีสตาร์ทเซิร์ฟเวอร์การพัฒนาของคุณ

Pages Router (pages/_app.tsx):

  1. เปิดไฟล์ pages/_app.tsx ของคุณ
  2. เพิ่มคอมโพเนนต์ 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"
          />
        </>
      )
    }

เคล็ดลับ: การใช้ strategy="afterInteractive" ช่วยให้แชทบอทโหลดทันทีหลังจากหน้าเว็บพร้อมใช้งาน ให้สมดุลที่ดีระหว่างประสิทธิภาพและความพร้อมใช้งาน

วิธีทางเลือกที่ 1: ฟรอนต์เอนด์ Gatsby

สำหรับเว็บไซต์ Gatsby ที่ดึงเนื้อหาจาก DatoCMS ผ่าน gatsby-source-datocms:

  1. สร้างหรือแก้ไข gatsby-ssr.js ในรูทโปรเจกต์ของคุณ:
    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. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
  3. รีสตาร์ทเซิร์ฟเวอร์การพัฒนา Gatsby ของคุณ

วิธีทางเลือกที่ 2: ฟรอนต์เอนด์ Nuxt.js

สำหรับแอปพลิเคชัน Nuxt.js ที่ใช้เนื้อหา DatoCMS:

  1. เพิ่มลงใน nuxt.config.ts ของคุณ:
    export default defineNuxtConfig({
      app: {
        head: {
          script: [
            {
              src: 'https://asyntai.com/static/js/chat-widget.js',
              async: true,
              'data-asyntai-id': 'YOUR_WIDGET_ID'
            }
          ]
        }
      }
    })
  2. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
  3. รีสตาร์ทเซิร์ฟเวอร์การพัฒนา Nuxt ของคุณ

วิธีทางเลือกที่ 3: HTML ธรรมดา / เว็บไซต์แบบคงที่

หากคุณใช้ Content Delivery API ของ DatoCMS กับเว็บไซต์ HTML แบบคงที่หรือตัวสร้างเว็บไซต์แบบคงที่:

  1. เพิ่มโค้ดฝังลงในไฟล์ HTML ของคุณก่อนแท็กปิด </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ
  3. บันทึกไฟล์และอัปโหลดไปยังโฮสติ้งของคุณ

วิธีทางเลือกที่ 4: React (Vite/CRA)

สำหรับแอป React มาตรฐาน (Create React App, Vite) ที่ใช้ DatoCMS API:

ตัวเลือก A: เพิ่มลงใน public/index.html

  1. เปิดไฟล์ public/index.html (CRA) หรือ index.html (Vite) ของคุณ
  2. เพิ่มโค้ดฝังก่อนแท็กปิด </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. บันทึกไฟล์

ตัวเลือก B: useEffect ในคอมโพเนนต์หลัก

  1. สร้างคอมโพเนนต์แชทบอทหรือเพิ่มลงในคอมโพเนนต์หลักของคุณ:
    // 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. นำเข้าและเรนเดอร์คอมโพเนนต์ใน App.jsx หรือเลย์เอาต์หลักของคุณ

ขั้นตอนที่ 3: Deploy และตรวจสอบ

หลังจากเพิ่มโค้ดแชทบอทลงในเว็บไซต์ที่ใช้ DatoCMS แล้ว ให้ deploy หรือเรียกใช้เซิร์ฟเวอร์การพัฒนาของคุณ เยี่ยมชมเว็บไซต์ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างส่วนตัว คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมขวาล่าง คลิกเพื่อตรวจสอบว่าเปิดและทำงานได้อย่างถูกต้อง

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มสคริปต์ลงในไฟล์ที่ถูกต้องสำหรับเฟรมเวิร์กของคุณ ตรวจสอบคอนโซลนักพัฒนาของเบราว์เซอร์เพื่อดูข้อผิดพลาด หากใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ ให้แน่ใจว่าสคริปต์ทำงานฝั่งไคลเอนต์ ลองล้างแคชเบราว์เซอร์หรือดูในหน้าต่างส่วนตัว

ตัวแปรสภาพแวดล้อม: เพื่อความปลอดภัยและความยืดหยุ่นที่ดีขึ้น ให้พิจารณาเก็บ widget ID ของคุณในตัวแปรสภาพแวดล้อม (เช่น NEXT_PUBLIC_ASYNTAI_ID สำหรับ Next.js หรือ VITE_ASYNTAI_ID สำหรับ Vite) แทนที่จะเขียนลงในโค้ดโดยตรง