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

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

แพลตฟอร์ม:

ขั้นตอนที่ 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: เพิ่มสคริปต์ลงใน docusaurus.config.js (แนะนำ)

วิธีที่ดีที่สุดในการเพิ่มแชทบอทในทุกหน้าของเว็บไซต์ Docusaurus คือผ่านไฟล์การตั้งค่า:

เปิดโปรเจกต์ Docusaurus ของคุณในตัวแก้ไขโค้ด
ค้นหาและเปิดไฟล์ docusaurus.config.js ในรูทโปรเจกต์ของคุณ
ค้นหาอ็อบเจกต์ const config = { }
เพิ่มหรืออัปเดตฟิลด์ scripts ด้วยวิดเจ็ต Asyntai ของคุณ:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

บันทึกไฟล์ docusaurus.config.js
สร้างเว็บไซต์ของคุณใหม่โดยรันคำสั่ง npm run build หรือ yarn build
รีสตาร์ทเซิร์ฟเวอร์การพัฒนาหากรันอยู่ในเครื่อง

เคล็ดลับ: ฟิลด์ scripts รับอาร์เรย์ของแหล่ง JavaScript แท็กสคริปต์จะถูกแทรกใน HTML head ของทุกหน้าโดยอัตโนมัติ นี่เป็นวิธีที่สะอาดและดูแลรักษาง่ายที่สุดสำหรับเว็บไซต์ Docusaurus

วิธีทางเลือกที่ 1: รูปแบบสตริง (ไวยากรณ์ที่ง่ายกว่า)

หากคุณต้องการวิธีที่ง่ายกว่า คุณสามารถใช้รูปแบบสตริงในอาร์เรย์ scripts:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

หมายเหตุ: เมื่อใช้รูปแบบสตริง คุณจะต้องแก้ไข URL สคริปต์เพื่อรวม widget ID เป็นพารามิเตอร์ query หรือใช้รูปแบบอ็อบเจกต์ที่แสดงในขั้นตอนที่ 2 ซึ่งอนุญาตให้คุณตั้งค่าแอตทริบิวต์ data-asyntai-id โดยตรง

วิธีทางเลือกที่ 2: แท็ก Head แบบกำหนดเอง

คุณยังสามารถเพิ่มสคริปต์โดยใช้ฟิลด์ headTags ใน docusaurus.config.js:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

เคล็ดลับ: ฟิลด์ headTags ให้การควบคุมมากขึ้นเกี่ยวกับแท็ก HTML ที่แทรกลงในส่วน <head> วิธีนี้มีฟังก์ชันเทียบเท่ากับการใช้ฟิลด์ scripts

วิธีทางเลือกที่ 3: เทมเพลต HTML แบบกำหนดเอง (ขั้นสูง)

สำหรับผู้ใช้ขั้นสูงที่ต้องการควบคุมเทมเพลต HTML อย่างสมบูรณ์:

สร้างไดเรกทอรีใหม่: src/theme (ถ้ายังไม่มี)
สร้างไฟล์: src/theme/Root.js
เพิ่มโค้ดต่อไปนี้เพื่อแทรกสคริปต์แบบไดนามิก:

import React, { useEffect } from 'react';

export default function Root({children}) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.head.appendChild(script);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

บันทึกไฟล์และสร้างเว็บไซต์ของคุณใหม่

สำคัญ: คอมโพเนนต์ Root.js ครอบคลุมแอปพลิเคชันทั้งหมดของคุณ วิธีขั้นสูงนี้ควรใช้เฉพาะเมื่อคุณต้องการลอจิก JavaScript แบบกำหนดเองหรือมีข้อกำหนดเฉพาะที่ไม่สามารถทำได้ด้วยวิธีไฟล์การตั้งค่า

วิธีทางเลือกที่ 4: Swizzle คอมโพเนนต์ Footer

คุณสามารถปรับแต่ง footer เพื่อรวมสคริปต์:

รันคำสั่ง swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
นี่จะสร้างสำเนาของคอมโพเนนต์ Footer ใน src/theme/Footer/
แก้ไขคอมโพเนนต์ Footer เพื่อรวมแท็กสคริปต์ของคุณ
เพิ่มสคริปต์ก่อนแท็กปิดของ footer
บันทึกและสร้างเว็บไซต์ของคุณใหม่

หมายเหตุ: Swizzling ให้คุณควบคุมคอมโพเนนต์ Docusaurus ได้อย่างเต็มที่ แต่หมายความว่าคุณจะต้องดูแลรักษาคอมโพเนนต์นั้นเอง การอัปเดต Docusaurus จะไม่อัปเดตคอมโพเนนต์ที่ swizzle โดยอัตโนมัติ

ขั้นตอนที่ 3: สร้างและ Deploy

หลังจากเพิ่มโค้ดแล้ว ให้สร้างและ deploy เว็บไซต์ Docusaurus ของคุณ:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

เคล็ดลับ: ในระหว่างการพัฒนา ให้รัน npm start หรือ yarn start เพื่อดูตัวอย่างการเปลี่ยนแปลงในเครื่อง แชทบอทควรปรากฏที่มุมขวาล่างในทุกหน้า

ขั้นตอนที่ 4: ตรวจสอบการติดตั้ง

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

ไม่เห็นวิดเจ็ต? ตรวจสอบให้แน่ใจว่าคุณได้สร้างเว็บไซต์ใหม่หลังจากทำการเปลี่ยนแปลง ตรวจสอบว่าคุณได้แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงจากแดชบอร์ด ล้างแคชเบราว์เซอร์หรือดูในโหมดส่วนตัว เปิดคอนโซลเบราว์เซอร์ (F12) เพื่อตรวจสอบข้อผิดพลาด JavaScript