เชื่อมต่อ Website Chathead

อยากให้ผู้เข้าชมเว็บไซต์สามารถแชทกับ AI Agent ของคุณโดยไม่ต้องออกจากเว็บไซต์หรือเปล่า?

ไอคอน Web Chathead และหน้าต่างแชทที่เปิดออก

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

มาเพิ่ม chat widget ที่ขับเคลื่อนด้วย AI ในไม่กี่นาทีกันเลย 🚀

ทำไมต้องเพิ่ม Website Chathead?

💬 มีส่วนร่วมกับผู้เข้าชมทันที — ลูกค้าสามารถถามคำถามได้โดยไม่ต้องออกจากเว็บไซต์
⚡ พร้อมให้บริการ 24/7 — AI Agent ของคุณตอบกลับแม้ว่าทีมของคุณจะออฟไลน์
🎯 ลด bounce rates — รักษาผู้เข้าชมไว้ด้วยคำตอบที่รวดเร็ว
🛍️ เพิ่มยอดขาย — นำทางลูกค้าผ่านการซื้อสินค้าได้เลยบนเว็บไซต์ของคุณ
🎨 เข้ากับแบรนด์ของคุณ — ปรับแต่งสี chat widget ให้เข้ากับดีไซน์เว็บไซต์

Chat widget บนเว็บไซต์เป็นหนึ่งในวิธีที่มีประสิทธิภาพที่สุดในการจับลูกค้าใหม่และเปลี่ยนผู้เข้าชมให้เป็นลูกค้า ด้วย DealDroid คุณจะได้พลังของการสนทนาที่ขับเคลื่อนด้วย AI ฝังอยู่ในเว็บไซต์ของคุณโดยตรง

ก่อนที่คุณจะเริ่ม

ตรวจสอบให้แน่ใจว่าคุณมี:

✅ สิทธิ์เข้าถึง HTML ของเว็บไซต์ — คุณจะต้องเพิ่มโค้ดลงในเว็บไซต์
✅ บัญชี DealDroid พร้อมกับ Droid (AI Agent) อย่างน้อยหนึ่งตัวที่สร้างไว้แล้ว
✅ ความรู้พื้นฐานเกี่ยวกับตำแหน่งของแท็ก <head> และ <body> ในเว็บไซต์ของคุณ

หมายเหตุ: หากคุณใช้เว็บไซต์บิลเดอร์เช่น WordPress, Shopify หรือ Wix คุณสามารถเพิ่มโค้ดกำหนดเองผ่านแผงการตั้งค่าของพวกเขาได้

ขั้นตอนที่ 1: ไปที่ Channels และสร้าง Website Embed

หน้า Channels พร้อมปุ่ม New Website Embed

เข้าสู่ระบบแดชบอร์ด DealDroid ของคุณ
คลิกที่ Channels ในเมนูแถบด้านซ้าย (ไฮไลท์ด้วยลูกศร)
คุณจะเห็นหน้า “All Channels” ที่แสดงช่องทางที่คุณเชื่อมต่อไว้แล้ว
คลิกปุ่ม New Website Embed (ไฮไลท์ด้วยลูกศร)

ฟอร์มตั้งค่า Website Embed

หลังจากคลิก New Website Embed คุณจะเห็นฟอร์มตั้งค่าพร้อมตัวเลือกดังนี้:

ชื่อ Channel

ตั้งชื่อที่จดจำได้ง่ายเพื่อระบุ channel ในแดชบอร์ดของคุณ

ค่าเริ่มต้น: “Web Channel”
ตัวอย่าง: “แชทเว็บหลัก” หรือ “Widget หน้าสินค้า”

เคล็ดลับ: ใช้ชื่อที่อธิบายได้ชัดเจนหากคุณวางแผนจะฝัง chat widgets บนหลายเว็บไซต์หรือหลายส่วน

สีหลัก

เลือกสีที่เข้ากับแบรนด์ของเว็บไซต์คุณ ไอคอนแชทและส่วนหัวจะใช้สีนี้

คลิกที่ตัวเลือกสีเพื่อเลือกสีที่คุณต้องการ
โค้ดสีจะอัปเดตโดยอัตโนมัติ (เช่น 425067)
สคริปต์ embed จะอัปเดตแบบเรียลไทม์ เมื่อคุณเปลี่ยนสี

เปิดใช้งาน Channel

สลับตัวเลือกนี้เพื่อควบคุมว่า chat widget ของคุณจะทำงานหรือไม่:

เปิดใช้งาน — AI Agent ของคุณจะตอบกลับข้อความของผู้เข้าชม
ปิดใช้งาน — ไอคอนแชทยังคงปรากฏ แต่ AI Agent ของคุณจะไม่ตอบกลับ

เคล็ดลับ: ใช้ฟีเจอร์ปิดใช้งานเมื่อคุณต้องการหยุดแชทชั่วคราวโดยไม่ต้องลบโค้ดออกจากเว็บไซต์

ขั้นตอนที่ 3: เพิ่มโค้ดลงในเว็บไซต์ของคุณ

DealDroid มีโค้ดสองชิ้นที่คุณต้องเพิ่มลงในเว็บไซต์ของคุณ แต่ละชิ้นมีหน้าที่เฉพาะและควรวางไว้ในตำแหน่งที่เฉพาะเจาะจง

CSS Stylesheet — เพิ่มก่อน `</head>`

คัดลอกลิงก์ CSS และวางไว้ภายในส่วน <head> ของคุณ ก่อนแท็กปิด </head>:

<link rel="stylesheet" href="http://happyhead.dealdroid.net/assets/index.css" />

ทำไมต้องวาง CSS ใน <head>?

CSS ใน <head> จะโหลดก่อนที่เนื้อหาหน้าจะแสดงผล
สิ่งนี้ป้องกัน “flash of unstyled content” ที่ chat widget อาจแสดงผลผิดพลาดชั่วครู่
ไอคอนแชทของคุณจะดูถูกต้องตั้งแต่วินาทีที่ปรากฏ

JavaScript — เพิ่มก่อน `</body>`

คัดลอกโค้ด JavaScript และวางไว้ก่อนแท็กปิด </body>:

<script
  type="module"
  src="http://happyhead.dealdroid.net/assets/index.js?scriptId=script_sample&color=425067"
></script>

ทำไมต้องวาง JavaScript ไว้ด้านล่าง?

JavaScript ที่ด้านล่างของ <body> จะโหลดหลังจากเนื้อหาหน้าทั้งหมด
สิ่งนี้ทำให้เนื้อหาหลักของคุณโหลดก่อน ซึ่งช่วยเพิ่มความเร็วในการรับรู้ของหน้า
Chat widget จะเริ่มทำงานหลังจากหน้าพร้อม ป้องกันการบล็อกใดๆ

ตัวอย่างแบบเต็ม

นี่คือโครงสร้าง HTML ของคุณควรมีลักษณะอย่างไรเมื่อใส่โค้ดทั้งสองชิ้นแล้ว:

<!DOCTYPE html>
<html>
  <head>
    <title>เว็บไซต์ของคุณ</title>
    <!-- สไตล์ชีทที่มีอยู่ของคุณ -->
    <link rel="stylesheet" href="your-styles.css" />

    <!-- CSS สำหรับ DealDroid Chat Widget -->
    <link
      rel="stylesheet"
      href="http://happyhead.dealdroid.net/assets/index.css"
    />
  </head>
  <body>
    <!-- เนื้อหาเว็บไซต์ของคุณ -->
    <header>...</header>
    <main>...</main>
    <footer>...</footer>

    <!-- สคริปต์ที่มีอยู่ของคุณ -->
    <script src="your-scripts.js"></script>

    <!-- JavaScript สำหรับ DealDroid Chat Widget -->
    <script
      type="module"
      src="http://happyhead.dealdroid.net/assets/index.js?scriptId=script_sample&color=425067"
    ></script>
  </body>
</html>

ทำไมต้องแยกเป็นสองไฟล์?

คุณอาจสงสัยว่าทำไมเราไม่รวมทุกอย่างไว้ในสคริปต์เดียว การแยก CSS และ JavaScript ออกจากกันให้คุณควบคุมได้มากขึ้น:

🎨 ปรับแต่งสไตล์ — เขียนทับหรือขยายสไตล์เริ่มต้นด้วย CSS ของคุณเอง
⚡ ควบคุมการโหลด — กำหนดได้ว่าแต่ละทรัพยากรจะโหลดเมื่อใด
🔧 โหลดแบบมีเงื่อนไข — โหลด chat widget เฉพาะบางหน้าเท่านั้น

ตัวอย่างกรณีใช้งาน

โหลดแชทเฉพาะหน้าสินค้าเท่านั้น:

<script>
  if (window.location.pathname.includes("/products")) {
    const script = document.createElement("script");
    script.type = "module";
    script.src =
      "http://happyhead.dealdroid.net/assets/index.js?scriptId=script_sample&color=425067";
    document.body.appendChild(script);
  }
</script>

ดีเลย์การโหลดจนกว่าผู้ใช้จะเลื่อนหน้า:

<script>
  let chatLoaded = false;
  window.addEventListener("scroll", function () {
    if (!chatLoaded && window.scrollY > 300) {
      chatLoaded = true;
      const script = document.createElement("script");
      script.type = "module";
      script.src =
        "http://happyhead.dealdroid.net/assets/index.js?scriptId=script_sample&color=425067";
      document.body.appendChild(script);
    }
  });
</script>

เสร็จเรียบร้อย! 🎉

AI Agent ของคุณพร้อมใช้งานบนเว็บไซต์แล้ว!

เมื่อคุณเพิ่มโค้ดทั้งสองชิ้นและบันทึกการเปลี่ยนแปลงแล้ว ไอคอนแชทจะปรากฏที่มุมขวาล่างของเว็บไซต์คุณ ผู้เข้าชมสามารถคลิกเพื่อเริ่มแชทกับ AI Agent ของคุณได้ทันที

AI ของคุณจะจัดการ:

💬 คำถามของผู้เข้าชม — ตอบคำถามเกี่ยวกับสินค้า บริการ และนโยบาย
🛍️ แนะนำสินค้า — แนะนำสินค้าตามความต้องการของผู้เข้าชม
🎯 การสนทนาขาย — นำทางผู้เข้าชมไปสู่การซื้อ
📞 คำขอสนับสนุน — จัดการคำถามสนับสนุนทั่วไปโดยอัตโนมัติ

ต้องการตรวจสอบว่าทุกอย่างทำงานได้หรือไม่? นี่คือวิธีทดสอบ:

เปิดเว็บไซต์ของคุณในเบราว์เซอร์
มองหา ไอคอนแชท ที่มุมขวาล่าง
คลิกไอคอนเพื่อเปิดหน้าต่างแชท
ส่งข้อความทดสอบเช่น “สวัสดี” หรือ “คุณขายอะไรบ้าง?”
AI Agent ของคุณควรตอบกลับภายในไม่กี่วินาที

หากคุณไม่เห็นไอคอนแชท:

✅ ตรวจสอบว่าโค้ดทั้งสองชิ้นถูกเพิ่มอย่างถูกต้อง
✅ ตรวจสอบว่าโค้ดอยู่ในตำแหน่งที่ถูกต้อง (<head> และ <body>)
✅ ล้างแคชเบราว์เซอร์และรีเฟรชหน้า
✅ ตรวจสอบ developer console ของเบราว์เซอร์สำหรับข้อผิดพลาดใดๆ

หากไอคอนปรากฏแต่คุณไม่ได้รับการตอบกลับ:

✅ ตรวจสอบให้แน่ใจว่า เปิดใช้งาน Channel อยู่ใน DealDroid
✅ ตรวจสอบว่า Droid ถูกกำหนดให้กับ channel นี้
✅ ตรวจสอบว่า Droid ของคุณมี Knowledge Base และ Products ที่ตั้งค่าไว้

การสร้าง Script ใหม่

ต้องการสร้าง script ID ใหม่หรือไม่? คลิกปุ่ม Regenerate ในการตั้งค่า channel

หลังจากสร้างใหม่:

คัดลอกโค้ด CSS และ JavaScript ใหม่
แทนที่โค้ดเก่าบนเว็บไซต์ของคุณด้วยโค้ดใหม่
บันทึกและ deploy การเปลี่ยนแปลงเว็บไซต์ของคุณ

เคล็ดลับ: สร้าง script ใหม่เฉพาะเมื่อคุณสงสัยว่า script ID ของคุณถูกเปิดเผยหรือต้องการเริ่มต้นใหม่

อีกอย่างนึง… การปรับแต่งขั้นสูง 🎨

Chat widget ของคุณทำงานได้อย่างสมบูรณ์แบบด้วยการตั้งค่าพื้นฐานแล้ว! แต่ถ้าคุณต้องการยกระดับไปอีกขั้น คุณสามารถเพิ่มการตั้งค่าแบบกำหนดเองเพื่อปรับแต่งประสบการณ์การแชทได้มากขึ้น

ขั้นตอนที่ 4: เพิ่มการตั้งค่าแบบกำหนดเอง (ทางเลือก)

ต้องการปรับแต่งหัวเรื่อง ข้อความต้อนรับ หรือคำถามแนะนำของ chat widget หรือไม่? คุณสามารถเขียนทับการตั้งค่าเริ่มต้นได้โดยเพิ่มออบเจ็กต์ window.ChatHeadConfig ก่อนสคริปต์ DealDroid

Chat widget ที่แสดงหัวเรื่อง ข้อความต้อนรับ และคำถามแนะนำที่ปรับแต่งแล้ว

นี่คือโค้ดที่มีการตั้งค่าแบบกำหนดเอง:

<body>
  <!-- เนื้อหาเว็บไซต์ของคุณ -->
  <header>...</header>
  <main>...</main>
  <footer>...</footer>

  <!-- การตั้งค่า DealDroid Chat -->
  <script>
    // @ts-ignore - ป้องกันข้อผิดพลาด TypeScript ใน IDE
    window.ChatHeadConfig = {
      scriptId: "script_xaugxgesi6a",
      title: "Ask DealDroid",
      openTitle: "How can we help you?",
      theme: {
        primary: "#4f46e5",
      },
      openQuestions: [
        "What is DealDroid?",
        "How to integrate DealDroid?",
        "Pricing details",
      ],
    };
  </script>

  <!-- JavaScript สำหรับ DealDroid Chat Widget -->
  <script
    type="module"
    src="https://happyhead.dealdroid.net/assets/index.js?scriptId=script_xaugxgesi6a"
  ></script>
</body>

สำคัญ: สคริปต์ ChatHeadConfig ต้องวางไว้ ก่อน สคริปต์ widget DealDroid เพื่อให้ทำงานได้อย่างถูกต้อง

อธิบายฟิลด์ ChatHeadConfig

นี่คือสิ่งที่แต่ละฟิลด์ทำและวิธีใช้งานอย่างมีประสิทธิภาพ:

scriptId

จำเป็น รหัสสคริปต์เฉพาะของคุณจากแดชบอร์ด DealDroid

ต้องตรงกับ scriptId ใน URL JavaScript ของคุณ
รับจากการตั้งค่า channel ใน DealDroid

ตัวอย่าง: "script_xaugxgesi6a"

title

ข้อความที่แสดงในส่วนหัวของ chat widget

เคล็ดลับ:

ให้สั้นและเป็นมิตร (2-4 คำ)
ให้ชัดเจนว่าเป็นฟีเจอร์แชทหรือช่วยเหลือ
ใช้ชื่อแบรนด์หรือชื่อผลิตภัณฑ์ของคุณ

ตัวอย่าง:

"Ask DealDroid"
"แชทกับเรา"
"ผู้ช่วยร้านขายสัตว์เลี้ยง"
"ผู้ช่วยร้านกาแฟ"

openTitle

ข้อความต้อนรับที่แสดงเหนือคำถามแนะนำเมื่อแชทเปิดขึ้น

เคล็ดลับ:

ทำให้น่าสนใจและกระตุ้นให้กระทำ
ใช้รูปแบบคำถามเพื่อดึงดูดผู้เข้าชม
ให้เป็นการสนทนาและเป็นมิตร

ตัวอย่าง:

"เราช่วยอะไรคุณได้บ้าง?"
"วันนี้คุณกำลังมองหาอะไรอยู่?"
"ต้องการความช่วยเหลือในการหาอะไรไหม?"
"พร้อมสั่งแล้วหรือยัง?"

openQuestions

อาร์เรย์ของคำถามแนะนำที่ปรากฏเป็นปุ่มที่คลิกได้เมื่อแชทเปิดขึ้น ผู้เข้าชมสามารถแตะปุ่มเหล่านี้แทนการพิมพ์

เคล็ดลับ:

เลือก 3-5 คำถามที่พบบ่อยที่สุด
ทำให้เฉพาะเจาะจงและสามารถดำเนินการได้
จับคู่คำถามกับเป้าหมายทางธุรกิจของคุณ
ใช้ภาษาที่เป็นธรรมชาติและเป็นการสนทนา

ตัวอย่าง:

// ร้านค้าออนไลน์
openQuestions: [
  "วันนี้มีอะไรลดราคาบ้าง?",
  "มีส่งฟรีไหม?",
  "ฉันจะติดตามคำสั่งซื้อได้อย่างไร?",
  "นโยบายการคืนสินค้าเป็นอย่างไร?",
];

// ร้านอาหาร
openQuestions: [
  "วันนี้มีเมนูพิเศษอะไร?",
  "มีเมนูเจหรือไม่?",
  "ฉันจองโต้ะได้ไหม?",
  "เปิดทำการกี่โมง?",
];

// ผลิตภัณฑ์ SaaS
openQuestions: [
  "ราคาเป็นอย่างไร?",
  "ทดลองใช้ฟรีได้ไหม?",
  "รองรับการเชื่อมต่ออะไรบ้าง?",
  "ฉันจะเริ่มต้นได้อย่างไร?",
];

theme.primary

สีหลักสำหรับ chat widget ของคุณ (ไอคอนแชท ส่วนหัว ปุ่ม)

เคล็ดลับ:

ใช้รหัสสี hex (เช่น "#4f46e5")
จับคู่สีแบรนด์ของคุณเพื่อความสอดคล้อง
Widget จะปรับสีข้อความโดยอัตโนมัติเพื่อให้อ่านง่าย

ตัวอย่าง: "#4f46e5" (สีน้ำเงิน indigo)

หมายเหตุ: สีธีมแบบกำหนดเองทำงานในโหมดสว่างเท่านั้น ในโหมดมืด chat widget จะใช้โทนสีเทาที่เป็นกลางเพื่อให้เข้ากับรูปลักษณ์ของระบบ

theme.onPrimary (ทางเลือก)

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

อย่างไรก็ตาม หากคุณต้องการระบุสีข้อความเอง คุณสามารถใช้ theme.onPrimary เพื่อกำหนดสีข้อความที่ต้องการได้

ตัวอย่าง:

theme: {
  primary: "#4f46e5",
  onPrimary: "#ffffff" // บังคับให้เป็นข้อความสีขาว
}

ตัวอย่างจากโลกจริง: ร้านขายสัตว์เลี้ยง

นี่คือตัวอย่างแบบเต็มที่แสดงให้เห็นว่าร้านขายสัตว์เลี้ยงอาจปรับแต่ง chat widget ของตนอย่างไร:

<!DOCTYPE html>
<html>
  <head>
    <title>ร้าน Paws & Claws สัตว์เลี้ยง</title>
    <link
      rel="stylesheet"
      href="http://happyhead.dealdroid.net/assets/index.css"
    />
  </head>
  <body>
    <!-- เนื้อหาเว็บไซต์ร้านสัตว์เลี้ยงของคุณ -->
    <header>
      <h1>🐾 ร้าน Paws & Claws สัตว์เลี้ยง</h1>
    </header>
    <main>
      <!-- รายการสินค้า ฯลฯ -->
    </main>

    <!-- การตั้งค่าแชทร้านสัตว์เลี้ยง -->
    <script>
      // @ts-ignore - ป้องกันข้อผิดพลาด TypeScript ใน IDE
      window.ChatHeadConfig = {
        scriptId: "script_pawsandclaws123",
        title: "ผู้ช่วยร้านสัตว์เลี้ยง",
        openTitle: "วันนี้เราช่วยคุณหาอะไรได้บ้าง?",
        theme: {
          primary: "#10b981", // สีเขียวเพื่อให้เข้ากับธีมสัตว์เลี้ยง/ธรรมชาติ
        },
        openQuestions: [
          "อะไรดีสำหรับลูกสุนัขตัวใหม่?",
          "มีอาหารแมวออร์แกนิกไหม?",
          "แสดงของเล่นสุนัขให้ดูหน่อย",
          "ร้านเปิดกี่โมง?",
        ],
      };
    </script>

    <!-- DealDroid Chat Widget -->
    <script
      type="module"
      src="http://happyhead.dealdroid.net/assets/index.js?scriptId=script_pawsandclaws123"
    ></script>
  </body>
</html>

ด้วยการตั้งค่านี้:

ส่วนหัวแชทแสดง “ผู้ช่วยร้านสัตว์เลี้ยง” แทนหัวเรื่องทั่วไป
ผู้เข้าชมเห็นข้อความที่เป็นมิตร “วันนี้เราช่วยคุณหาอะไรได้บ้าง?”
คำถามแนะนำได้รับการปรับแต่งให้ตรงกับความต้องการทั่วไปของเจ้าของสัตว์เลี้ยง
สีเขียว (#10b981) เข้ากับธีมแบรนด์ที่เป็นธรรมชาติและเป็นมิตรกับสัตว์เลี้ยง

ลำดับความสำคัญของการตั้งค่า

สำคัญที่ต้องรู้: การตั้งค่าใน ChatHeadConfig จะเขียนทับพารามิเตอร์ URL

ตัวอย่างเช่น:

<!-- ChatHeadConfig เขียนเป็นสีม่วง (#4f46e5) -->
<script>
  window.ChatHeadConfig = {
    theme: {
      primary: "#4f46e5", // ตัวนี้ชนะ!
    },
  };
</script>
<!-- ถึงพารามิเตอร์ URL กำหนดสีเป็นสีน้ำเงิน (#425067) แต่ก็จะถูกเขียนทับโดย ChatHeadConfig -->
<script src="...index.js?scriptId=script_sample&color=425067"></script>

เคล็ดลับ: ใช้ ChatHeadConfig สำหรับการปรับแต่งแบบเต็มรูปแบบ หรือใช้พารามิเตอร์ URL สำหรับการเปลี่ยนสีแบบง่ายๆ

ขั้นตอนต่อไป?

ตอนนี้แชทเว็บไซต์ของคุณเชื่อมต่อแล้ว นี่คือสิ่งที่คุณสามารถทำได้:

ทดสอบอย่างละเอียด — ลองถามคำถามต่างๆ เพื่อดูว่า AI ตอบกลับอย่างไร
ปรับแต่งประสบการณ์ — ใช้ ChatHeadConfig เพื่อให้เข้ากับแบรนด์ของคุณ
เพิ่มความรู้เพิ่มเติม — ฝึกฝน AI ของคุณด้วย FAQs และข้อมูลธุรกิจ
อัปโหลดสินค้า — เพิ่มแคตตาล็อกของคุณเพื่อให้ AI แนะนำสินค้าได้
เชื่อมต่อช่องทางเพิ่มเติม — เพิ่ม LINE, Facebook Messenger หรือ WhatsApp

ต้องการความช่วยเหลือ?

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

AI sales agent ของคุณพร้อมที่จะมีส่วนร่วมกับผู้เข้าชมเว็บไซต์แล้ว มาเริ่มเปลี่ยนการสนทนาเหล่านั้นให้เป็นยอดขายกันเลย! 😊

เชื่อมต่อ Website Chathead

ทำไมต้องเพิ่ม Website Chathead?

ก่อนที่คุณจะเริ่ม

ขั้นตอนที่ 1: ไปที่ Channels และสร้าง Website Embed

ขั้นตอนที่ 2: ตั้งค่า Chat Widget ของคุณ

ชื่อ Channel

สีหลัก

เปิดใช้งาน Channel

ขั้นตอนที่ 3: เพิ่มโค้ดลงในเว็บไซต์ของคุณ

CSS Stylesheet — เพิ่มก่อน `</head>`

JavaScript — เพิ่มก่อน `</body>`

ตัวอย่างแบบเต็ม

ทำไมต้องแยกเป็นสองไฟล์?

ตัวอย่างกรณีใช้งาน

เสร็จเรียบร้อย! 🎉

ทดสอบ Chat Widget ของคุณ

การสร้าง Script ใหม่

อีกอย่างนึง… การปรับแต่งขั้นสูง 🎨

ขั้นตอนที่ 4: เพิ่มการตั้งค่าแบบกำหนดเอง (ทางเลือก)

อธิบายฟิลด์ ChatHeadConfig

scriptId

title

openTitle

openQuestions

theme.primary

theme.onPrimary (ทางเลือก)

ตัวอย่างจากโลกจริง: ร้านขายสัตว์เลี้ยง

ลำดับความสำคัญของการตั้งค่า

ขั้นตอนต่อไป?

ต้องการความช่วยเหลือ?

เชื่อมต่อ Website Chathead

ทำไมต้องเพิ่ม Website Chathead?

ก่อนที่คุณจะเริ่ม

ขั้นตอนที่ 1: ไปที่ Channels และสร้าง Website Embed

ขั้นตอนที่ 2: ตั้งค่า Chat Widget ของคุณ

ชื่อ Channel

สีหลัก

เปิดใช้งาน Channel

ขั้นตอนที่ 3: เพิ่มโค้ดลงในเว็บไซต์ของคุณ

CSS Stylesheet — เพิ่มก่อน </head>

JavaScript — เพิ่มก่อน </body>

ตัวอย่างแบบเต็ม

ทำไมต้องแยกเป็นสองไฟล์?

ตัวอย่างกรณีใช้งาน

เสร็จเรียบร้อย! 🎉

ทดสอบ Chat Widget ของคุณ

การสร้าง Script ใหม่

อีกอย่างนึง… การปรับแต่งขั้นสูง 🎨

ขั้นตอนที่ 4: เพิ่มการตั้งค่าแบบกำหนดเอง (ทางเลือก)

อธิบายฟิลด์ ChatHeadConfig

scriptId

title

openTitle

openQuestions

theme.primary

theme.onPrimary (ทางเลือก)

ตัวอย่างจากโลกจริง: ร้านขายสัตว์เลี้ยง

ลำดับความสำคัญของการตั้งค่า

ขั้นตอนต่อไป?

ต้องการความช่วยเหลือ?

CSS Stylesheet — เพิ่มก่อน `</head>`

JavaScript — เพิ่มก่อน `</body>`