วิธีฝัง Copilot Agent บนเว็บไซต์ สร้าง AI Chatbot ตอบลูกค้าอัตโนมัติ

วิธีฝัง Copilot Agent บนเว็บไซต์ ทำได้โดยสร้าง AI Agent ใน Microsoft Copilot Studio ให้พร้อมใช้งาน จากนั้นกด Publish เปิดเมนู Channels เลือก Web app หรือ Custom website ตามหน้าจอที่รองรับ แล้วคัดลอก Embed Code เพื่อนำไปวางในหน้าเว็บไซต์ผ่าน HTML หรือ Custom HTML Block สำหรับผู้ใช้ WordPress เมื่อติดตั้งเสร็จจะสามารถแสดงหน้าต่าง AI Chatbot ให้ผู้เข้าชมสนทนากับ Agent ได้

อย่างไรก็ตาม วิธีฝังด้วย Embed Code สำเร็จรูปมีเงื่อนไขสำคัญคือ ต้องตั้งค่า Authentication เป็น No authentication จึงจะแสดงตัวเลือกโค้ดสำหรับฝังเว็บไซต์ หากต้องการให้ผู้ใช้ลงชื่อเข้าใช้หรือควบคุมการเข้าถึงข้อมูล ต้องใช้แนวทางการเชื่อมต่อที่รองรับการยืนยันตัวตน เช่น Microsoft 365 Agents SDK หรือ Direct Line ที่ออกแบบระบบรักษาความปลอดภัยอย่างเหมาะสม

Copilot Agent เป็น AI Chatbot ที่สามารถตอบคำถามลูกค้าจาก Knowledge ซึ่งผู้สร้างกำหนดไว้ เช่น รายละเอียดสินค้า บริการ คำถามที่พบบ่อย และข้อมูลที่เผยแพร่บนเว็บไซต์บริษัท

ตัวอย่างเช่น เว็บไซต์รับติดตั้งระบบ LAN, Wi-Fi, CCTV และ Fiber Optic สามารถมี AI Chatbot สำหรับช่วยลูกค้าค้นหาข้อมูลบริการ เตรียมรายละเอียดก่อนขอใบเสนอราคา และแนะนำช่องทางติดต่อเจ้าหน้าที่

หากเชื่อม Tools หรือ Workflows ที่รองรับ Agent ยังสามารถดำเนินงานเพิ่มเติม เช่น สร้างคำขอบริการหรือส่งข้อมูลติดต่อไปยังระบบภายในได้ตามสิทธิ์และเงื่อนไขที่กำหนด

แต่การฝัง Chatbot บนเว็บไซต์ไม่ได้ทำให้เกิดระบบจองคิว ส่งอีเมล หรือบันทึกข้อมูลลูกค้าโดยอัตโนมัติ ต้องสร้างเครื่องมือสำหรับดำเนินงานเหล่านั้นเพิ่มเติม

บทความนี้ comsiam จะสอนวิธีฝัง Copilot Agent บนเว็บไซต์อย่างละเอียด ตั้งแต่การเตรียม Knowledge การตั้งค่า Authentication การ Publish การนำ Embed Code ไปใช้กับ WordPress การออกแบบหน้าต่างแชต การสร้าง AI Chatbot ตอบลูกค้า และการแก้ปัญหาเมื่อ Chatbot ไม่แสดงหรือไม่ตอบคำถาม

🤖 Copilot Agent บนเว็บไซต์คืออะไร?

Copilot Agent บนเว็บไซต์ คือ AI Agent ที่พัฒนาด้วย Microsoft Copilot Studio แล้วนำมาเชื่อมกับหน้าเว็บไซต์ เพื่อให้ผู้เข้าชมสามารถสนทนากับระบบ AI ผ่าน Web Chat ได้

Chatbot ประเภทนี้เหมาะกับเว็บไซต์ธุรกิจที่ต้องการตอบคำถามซ้ำๆ และแนะนำข้อมูลให้ลูกค้าโดยอัตโนมัติ

ตัวอย่างคำถามที่ Chatbot สามารถตอบได้

• บริษัทให้บริการอะไรบ้าง?
• รับติดตั้งระบบ Wi-Fi หรือไม่?
• สาย Fiber Optic แบบ Single Mode ต่างจาก Multimode อย่างไร?
• ต้องเตรียมข้อมูลอะไรเพื่อขอใบเสนอราคา?
• รับติดตั้ง CCTV หรือไม่?
• ติดต่อเจ้าหน้าที่ผ่านช่องทางไหน?
• มีขั้นตอนแจ้งซ่อมอย่างไร?
• มีบริการ Maintenance หรือไม่?

คำตอบเหล่านี้ขึ้นอยู่กับ Knowledge และ Instructions ที่เตรียมไว้

Copilot Agent ต่างจาก Live Chat ปกติอย่างไร?

Live Chat: ผู้ใช้งานสนทนากับเจ้าหน้าที่หรือระบบรับส่งข้อความ

Copilot Agent: ใช้ AI วิเคราะห์คำถามและสร้างคำตอบจากข้อมูลที่กำหนด

อย่างไรก็ตาม หากต้องการให้ AI ส่งต่อการสนทนาให้เจ้าหน้าที่จริง ต้องออกแบบกระบวนการ Handoff และเชื่อมระบบที่รองรับเพิ่มเติม

✨ ประโยชน์ของการฝัง Copilot Agent บนเว็บไซต์

1. ตอบคำถามลูกค้าอัตโนมัติ

ช่วยตอบคำถามเกี่ยวกับสินค้าและบริการที่มีข้อมูลรองรับ

2. ลดคำถามซ้ำ

ลดภาระเจ้าหน้าที่ในการตอบคำถามเดิม

3. ให้บริการได้ตลอดเวลาที่ระบบพร้อมใช้งาน

ลูกค้าสามารถส่งคำถามได้โดยไม่ต้องรอเจ้าหน้าที่ประจำหน้าจอ

4. ใช้ Knowledge จากเว็บไซต์

นำข้อมูลบริการและบทความที่เกี่ยวข้องมาใช้ประกอบคำตอบ

5. สนับสนุนงานขาย

ช่วยแนะนำรายละเอียดสินค้าและบริการเบื้องต้น

6. ช่วยรับข้อมูลขอใบเสนอราคา

ถามรายละเอียดโครงการตามขั้นตอนที่กำหนด

7. ใช้ร่วมกับ Power Automate

เมื่อเชื่อม Tool ที่เหมาะสม สามารถส่งข้อมูลเข้าสู่ระบบธุรกิจ

8. ปรับหน้าต่างแชตได้

สามารถปรับขนาด ตำแหน่งและรูปแบบการแสดงผลผ่านการพัฒนาเว็บไซต์

9. รองรับเว็บไซต์หลายประเภท

เช่น WordPress หรือเว็บไซต์ที่สามารถฝัง Web Chat ตามข้อกำหนดทางเทคนิค

10. ช่วยติดตามคุณภาพการตอบ

ใช้ระบบทดสอบและ Analytics ที่รองรับเพื่อปรับปรุง Agent

🧩 สิ่งที่ต้องใช้ในการฝัง Copilot Agent

องค์ประกอบ	หน้าที่
Microsoft Copilot Studio	สร้าง Agent
Agent	ระบบ AI ตอบคำถาม
Instructions	กำหนดพฤติกรรม
Knowledge	แหล่งข้อมูล
Publish	เผยแพร่ Agent
Channel	ช่องทางเชื่อมเว็บไซต์
Embed Code	โค้ดฝังหน้าต่างแชต
HTML / iframe	แสดง Chatbot
Authentication	ยืนยันตัวตน
Web Chat	หน้าต่างสนทนา
WordPress	ตัวอย่างแพลตฟอร์มเว็บไซต์
Tools	เรียกงานระบบภายนอก
Analytics	ติดตามผลการใช้งาน

🆚 วิธีฝัง Copilot Agent บนเว็บไซต์มีกี่แบบ?

โดยทั่วไปแบ่งได้เป็น 3 แนวทางหลัก

วิธีที่ 1: ใช้ Embed Code สำเร็จรูป

เป็นวิธีง่ายที่สุด

เหมาะกับ

• เว็บไซต์บริษัท
• เว็บไซต์บริการ
• เว็บไซต์แนะนำสินค้า
• FAQ Chatbot
• Chatbot สาธารณะ

เงื่อนไขสำคัญคือ Agent ต้องตั้งค่า No authentication จึงใช้ Embed Code สำเร็จรูปได้

วิธีที่ 2: ใช้ Microsoft 365 Agents SDK

เหมาะกับเว็บไซต์หรือ Web Application ที่ต้องการควบคุมการเชื่อมต่อและรองรับการลงชื่อเข้าใช้

ต้องมีความรู้ด้านพัฒนาเว็บและการยืนยันตัวตน

วิธีที่ 3: ใช้ Direct Line และ Web Chat แบบกำหนดเอง

เหมาะกับนักพัฒนาที่ต้องการปรับแต่งหน้าต่างแชตและการเชื่อมต่ออย่างละเอียด

ต้องจัดการ Tokens, Web Security และระบบหลังบ้านให้ถูกต้อง

ตารางเปรียบเทียบ

วิธี	ความยาก	เหมาะกับ
Embed Code	ง่าย	Chatbot สาธารณะ
Microsoft 365 Agents SDK	ปานกลาง–สูง	เว็บที่ต้องลงชื่อเข้าใช้
Direct Line / Custom Web Chat	สูง	ระบบเว็บที่ต้องปรับแต่งมาก

สำหรับผู้เริ่มต้นที่ต้องการ Chatbot ตอบข้อมูลสาธารณะบน WordPress แนะนำให้ทดลองด้วย Embed Code ก่อน

✅ ก่อนฝัง Copilot Agent ต้องเตรียมอะไรบ้าง?

1. มี Copilot Agent ที่พร้อมใช้งาน

สร้าง Agent และกำหนดบทบาทให้ชัดเจน

2. มี Knowledge ที่ถูกต้อง

เตรียมข้อมูลสินค้า บริการ หรือคำถามที่พบบ่อย

3. ทดสอบ Agent

ตรวจสอบคำถามและคำตอบก่อนเผยแพร่

4. มีสิทธิ์ Publish

ต้องมี License และสิทธิ์ที่รองรับการเผยแพร่ Agent

5. มีเว็บไซต์

เช่น WordPress หรือเว็บไซต์ HTML

6. มีสิทธิ์แก้ไขหน้าเว็บไซต์

สำหรับ WordPress ต้องสามารถเพิ่ม Custom HTML ได้

7. กำหนด Authentication

เลือกให้เหมาะกับข้อมูลที่ Agent เข้าถึง

8. ตรวจสอบ Web Security

โดยเฉพาะเมื่อเปิดให้บุคคลทั่วไปใช้งาน

9. เตรียมข้อความต้อนรับ

แนะนำว่าลูกค้าสามารถถามเรื่องใดได้บ้าง

10. เตรียมช่องทางติดต่อเจ้าหน้าที่

เพื่อรองรับกรณี AI ตอบไม่ได้

🚀 วิธี Publish Copilot Agent ก่อนฝังเว็บไซต์

ขั้นตอนที่ 1: เปิด Microsoft Copilot Studio

ลงชื่อเข้าใช้บัญชีที่มีสิทธิ์สร้างและเผยแพร่ Agent

ขั้นตอนที่ 2: เลือก Environment

ตรวจสอบ Environment ที่ใช้

ขั้นตอนที่ 3: เปิด Agent

เลือก Agent ที่ต้องการนำไปฝังเว็บไซต์

ตัวอย่าง:

Website Customer Assistant

ขั้นตอนที่ 4: ตรวจสอบ Instructions

กำหนดให้ Agent ตอบคำถามลูกค้าอย่างสุภาพ และไม่สร้างข้อมูลที่ไม่มีหลักฐาน

ขั้นตอนที่ 5: ตรวจสอบ Knowledge

เพิ่มแหล่งข้อมูลที่ต้องการ เช่น เว็บไซต์บริการและ FAQ

ขั้นตอนที่ 6: เปิด Test Agent

ทดลองคำถามจริง

ขั้นตอนที่ 7: กด Publish

เลือก Publish ใน Copilot Studio

ขั้นตอนที่ 8: ยืนยันการเผยแพร่

ดำเนินการตามขั้นตอนที่ระบบแสดง

ขั้นตอนที่ 9: ตรวจสอบสถานะ

เมื่อ Publish สำเร็จ จึงเตรียมเชื่อม Website Channel

ข้อควรระวัง

บัญชีทดลองบางประเภทสามารถสร้างและทดสอบ Agent ได้ แต่ไม่สามารถ Publish ใช้งานจริงได้ตามข้อจำกัด License

🔐 วิธีตั้งค่า Authentication ก่อนนำ Agent ไปฝังเว็บไซต์

ขั้นตอนนี้สำคัญมาก เพราะมีผลต่อความปลอดภัยของข้อมูล

ขั้นตอนที่ 1: เปิด Agent

ขั้นตอนที่ 2: เลือก Settings

ขั้นตอนที่ 3: เปิด Security

ขั้นตอนที่ 4: เลือก Authentication

ขั้นตอนที่ 5: ตรวจสอบตัวเลือก

ตัวอย่าง:

• Authenticate with Microsoft
• Authenticate manually
• No authentication

ขั้นตอนที่ 6: เลือกให้เหมาะกับเว็บไซต์

หากต้องการใช้ Embed Code สำเร็จรูปสำหรับเว็บไซต์สาธารณะ ให้เลือก No authentication

ขั้นตอนที่ 7: กด Save

บันทึกการตั้งค่า

ทำไมต้องใช้ No authentication สำหรับ Embed Code?

เพราะ Microsoft กำหนดให้ Embed Code สำเร็จรูปแสดงเฉพาะ Agent ที่ไม่ต้องยืนยันตัวตนในรูปแบบนี้

ข้อควรระวังสำคัญ

No authentication หมายถึงผู้ที่เข้าถึงช่องทางแชตสามารถสนทนากับ Agent ได้โดยไม่ต้องลงชื่อเข้าใช้

จึงไม่ควรนำ Agent ที่เข้าถึงเอกสารภายใน ข้อมูลลูกค้า หรือ Tools ที่มีสิทธิ์สำคัญมาเปิดใช้แบบสาธารณะโดยไม่ได้ตรวจสอบความปลอดภัย

นอกจากนี้ เมื่อเลือก No authentication Agent จะไม่สามารถใช้ Tools ที่ต้องใช้ Credentials ของผู้ใช้ได้ตามข้อจำกัดของช่องทาง

🌐 วิธีนำ Embed Code จาก Copilot Studio มาใช้

เมื่อ Agent พร้อมและเลือก Authentication เหมาะสมแล้ว ให้ดำเนินการดังนี้

ขั้นตอนที่ 1: เปิด Agent

ขั้นตอนที่ 2: เลือก Channels

ขั้นตอนที่ 3: เลือก Web app หรือ Custom website

ชื่อ Channel อาจแตกต่างตามประสบการณ์ Copilot Studio

ขั้นตอนที่ 4: ค้นหา Embed Code

หากเลือก No authentication ระบบจะแสดงโค้ดสำหรับฝังเว็บไซต์ตามช่องทางที่รองรับ

ขั้นตอนที่ 5: กด Copy

คัดลอก Embed Code ของ Agent

ขั้นตอนที่ 6: เปิดระบบจัดการเว็บไซต์

เช่น WordPress

ขั้นตอนที่ 7: เลือกหน้าเว็บ

เลือกตำแหน่งที่ต้องการให้ Chatbot แสดง

ขั้นตอนที่ 8: เพิ่ม HTML

นำ Embed Code ไปวางในส่วนที่รองรับ

ขั้นตอนที่ 9: บันทึกหน้า

ขั้นตอนที่ 10: ทดสอบ

เปิดหน้าเว็บจริงแล้วทดลองถามคำถาม

🖥️ ตัวอย่าง HTML สำหรับฝัง Copilot Agent

เมื่อคัดลอก Embed Code จาก Copilot Studio แล้ว สามารถนำไปวางในหน้า HTML ได้

ตัวอย่างโครงสร้างทั่วไป:

<div class="copilot-chat-container">
  <iframe
    src="YOUR_COPILOT_STUDIO_EMBED_URL"
    title="AI Customer Assistant"
    width="100%"
    height="600"
    style="border:0;"
    loading="lazy">
  </iframe>
</div>

ต้องแก้ไขอะไร?

แทนที่

YOUR_COPILOT_STUDIO_EMBED_URL

ด้วย URL สำหรับฝังที่ได้รับจาก Copilot Studio จริง

ข้อควรระวัง

ตัวอย่างนี้แสดงโครงสร้าง HTML เท่านั้น ไม่ใช่โค้ดที่เชื่อม Agent ได้โดยไม่ต้องตั้งค่า

ควรใช้ Embed Code จาก Copilot Studio เป็นหลัก เพราะ URL และรูปแบบการเชื่อมต่อขึ้นอยู่กับ Agent และ Channel

อย่านำ Direct Line Secret หรือ API Secret มาใส่ใน iframe หรือ JavaScript ของหน้าเว็บ

🧱 วิธีฝัง Copilot Agent ใน WordPress ทีละขั้นตอน

สำหรับเว็บไซต์ WordPress สามารถใช้ Custom HTML Block ได้

ขั้นตอนที่ 1: เข้าสู่ WordPress Dashboard

ลงชื่อเข้าใช้ด้วยบัญชีที่มีสิทธิ์แก้ไขหน้าเว็บ

ขั้นตอนที่ 2: เปิด Pages

เลือกเมนู Pages

ขั้นตอนที่ 3: เลือกหน้าที่ต้องการ

ตัวอย่าง:

• Home
• Services
• Contact
• FAQ
• Support

ขั้นตอนที่ 4: กด Edit

เปิด WordPress Block Editor

ขั้นตอนที่ 5: เพิ่ม Custom HTML Block

กดเครื่องหมาย + แล้วค้นหา

Custom HTML

ขั้นตอนที่ 6: วาง Embed Code

คัดลอกโค้ดจาก Copilot Studio มาวาง

ขั้นตอนที่ 7: ตรวจสอบ HTML

ตรวจสอบว่าโค้ดครบถ้วน

ขั้นตอนที่ 8: กด Preview

ทดลองดูการแสดงผล

ขั้นตอนที่ 9: กด Update หรือ Publish

บันทึกหน้าเว็บ

ขั้นตอนที่ 10: เปิดเว็บไซต์จริง

ตรวจสอบหน้าต่าง Chatbot

ขั้นตอนที่ 11: ทดลองถามคำถาม

ใช้คำถามที่มีคำตอบอยู่ใน Knowledge

ขั้นตอนที่ 12: ทดสอบบนโทรศัพท์มือถือ

ตรวจสอบขนาดและความสะดวกในการใช้งาน

🎨 ตัวอย่าง CSS สำหรับปรับขนาดหน้าต่าง Chatbot

สำหรับ WordPress สามารถเพิ่ม CSS ตามวิธีที่ธีมรองรับ

ตัวอย่าง:

.copilot-chat-container {
  width: 100%;
  max-width: 440px;
  margin: 20px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.copilot-chat-container iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}

@media (max-width: 768px) {
  .copilot-chat-container {
    max-width: 100%;
    margin: 12px auto;
  }

  .copilot-chat-container iframe {
    height: 70vh;
    min-height: 420px;
  }
}

CSS นี้ทำอะไร?

• จำกัดความกว้างบน Desktop
• เพิ่มมุมโค้ง
• เพิ่มเงา
• ทำให้ iframe เต็มพื้นที่
• ปรับความสูงบนมือถือ

ข้อจำกัด

CSS ของเว็บไซต์สามารถปรับขนาดและรูปแบบกล่อง iframe ได้ แต่ไม่สามารถควบคุมทุกองค์ประกอบภายในหน้าต่างแชตที่อยู่คนละโดเมนได้

หากต้องการปรับรายละเอียดภายใน Web Chat มากขึ้น ควรใช้ Custom Web Chat Canvas

💬 ทำ Chatbot เป็นปุ่มลอยมุมขวาล่างได้ไหม?

ทำได้ด้วยการพัฒนา Front-End เพิ่มเติม

เช่น สร้างปุ่ม Chatbot ที่เปิดหรือปิดกล่อง iframe

แนวทางการทำงาน

1. มีปุ่ม Chatbot
2. ผู้ใช้กดปุ่ม
3. แสดงหน้าต่าง Web Chat
4. ผู้ใช้สนทนา
5. กดปิดเพื่อซ่อนหน้าต่าง

ตัวอย่าง CSS สำหรับตำแหน่งลอย

.copilot-floating-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(380px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 100px));
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
  z-index: 9999;
}

.copilot-floating-chat iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 600px) {
  .copilot-floating-chat {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    height: min(70vh, 560px);
  }
}

ข้อควรระวัง

CSS นี้เป็นเพียงตัวอย่างกำหนดตำแหน่งกล่องลอย ยังต้องพัฒนาปุ่มเปิด–ปิดและจัดการการแสดงผลเพิ่มเติม

ควรตรวจสอบไม่ให้ Chatbot บังปุ่มสำคัญของเว็บไซต์ เช่น ปุ่มติดต่อหรือปุ่มสั่งซื้อ

🧠 วิธีเตรียม Knowledge ให้ Chatbot ตอบลูกค้าได้ตรงคำถาม

ก่อนฝัง Agent ควรเตรียม Knowledge อย่างเหมาะสม

Knowledge ที่เหมาะกับเว็บไซต์ธุรกิจ

• Company Profile
• รายละเอียดสินค้า
• รายละเอียดบริการ
• ขั้นตอนการติดต่อ
• FAQ
• คู่มือใช้งาน
• คำอธิบายบริการ
• ข้อมูลทางเทคนิค
• เงื่อนไขบริการที่อนุมัติ
• ข้อมูลติดต่อ

ตัวอย่าง Knowledge สำหรับบริษัทบริการ IT

LAN Services

ข้อมูลบริการติดตั้งระบบ LAN

Wi-Fi Solutions

รายละเอียดระบบเครือข่ายไร้สาย

Fiber Optic Services

ข้อมูลบริการเดินสายและ Splicing

CCTV Services

ข้อมูลบริการกล้องวงจรปิด

Maintenance & Support

รายละเอียดบริการดูแลระบบ

ทำไมต้องจัด Knowledge ให้ชัดเจน?

เพราะช่วยให้ Agent ค้นหาข้อมูลที่เกี่ยวข้องได้เหมาะสมขึ้น และลดการตอบข้อมูลที่ไม่เกี่ยวข้อง

📝 ตัวอย่าง Instructions สำหรับ AI Chatbot บนเว็บไซต์

ตัวอย่าง Instructions ภาษาอังกฤษสำหรับนำไปปรับใช้กับเว็บไซต์ธุรกิจ

ROLE

You are a customer service assistant for an IT services company.

OBJECTIVE

Help website visitors understand available services and prepare information for contacting the company.

SCOPE

Answer questions about LAN installation, Wi-Fi solutions, Fiber Optic installation, CCTV installation, and IT Maintenance.

KNOWLEDGE RULES

Use approved public website knowledge for company-specific information.

Do not invent service prices, warranty terms, certifications, customer references, or confirmed appointments.

If information is unavailable, clearly explain that it cannot be confirmed.

RESPONSE STYLE

Respond in polite Thai.

Keep answers clear and concise.

Use numbered steps when explaining procedures.

CUSTOMER REQUESTS

When a visitor requests a quotation, explain which project details are needed.

Do not request passwords or unnecessary sensitive information.

TOOLS

Use connected tools only when they are available and appropriate.

Never claim that a request was submitted unless the tool confirms success.

ESCALATION

Recommend contacting a staff member when a request requires an official quotation, appointment confirmation, or technical site survey.

🏢 ตัวอย่างสร้าง Chatbot สำหรับเว็บไซต์บริการ IT

สมมติว่าบริษัทมีเว็บไซต์บริการดังนี้

• รับเดินสาย LAN
• ติดตั้ง Wi-Fi
• รับติดตั้ง Fiber Optic
• ติดตั้ง CCTV
• ซ่อมบำรุงระบบ IT

ชื่อ Agent

IT Customer Assistant

หน้าที่

ตอบคำถามผู้เข้าชมเว็บไซต์

ตัวอย่างคำถาม

1. บริษัทรับเดินสาย LAN หรือไม่?
2. มีบริการติดตั้ง Wi-Fi ในสำนักงานไหม?
3. รับสไปซ์สาย Fiber Optic หรือไม่?
4. ต้องเตรียมข้อมูลอะไรเพื่อขอใบเสนอราคา?
5. ติดตั้ง CCTV สำหรับโรงงานได้ไหม?
6. มีบริการดูแลระบบหลังติดตั้งหรือไม่?
7. ติดต่อเจ้าหน้าที่อย่างไร?
8. ต้องสำรวจหน้างานก่อนติดตั้งหรือไม่?

ตัวอย่างการสนทนา

ลูกค้า: ต้องการติดตั้ง Fiber Optic ภายในโรงงาน

Agent: กรุณาแจ้งจังหวัด ระยะทางโดยประมาณ และจำนวนจุดเชื่อมต่อ เพื่อช่วยเตรียมรายละเอียดก่อนติดต่อเจ้าหน้าที่

ลูกค้า: ขอนแก่น ระยะทาง 500 เมตร มี 4 จุด

Agent: ข้อมูลเบื้องต้นคือสถานที่ติดตั้งอยู่ขอนแก่น ระยะทางประมาณ 500 เมตร และต้องการเชื่อมต่อ 4 จุด การประเมินราคาจริงต้องตรวจสอบรายละเอียดงานและหน้างานเพิ่มเติม

ถ้าต้องการให้ส่งข้อมูลไปบริษัทอัตโนมัติ?

ต้องเพิ่ม Tool เช่น CreateServiceRequest หรือ Agent Flow ที่รับข้อมูลและส่งเข้าสู่ระบบจริง

หากยังไม่มี Tool ไม่ควรให้ Agent แจ้งว่าบันทึกคำขอแล้ว

🛒 ตัวอย่าง Chatbot สำหรับเว็บไซต์ขายสินค้า

Copilot Agent สามารถใช้ข้อมูลสินค้าที่เผยแพร่เป็น Knowledge ได้

ตัวอย่างคำถาม

• สาย LAN CAT6 ต่างจาก CAT6A อย่างไร?
• สาย Indoor กับ Outdoor ต่างกันอย่างไร?
• สาย Fiber Optic ประเภทใดเหมาะกับอาคาร?
• สินค้ารุ่นนี้มีคุณสมบัติอะไร?
• มีคู่มือใช้งานหรือไม่?

ข้อควรระวัง

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

Agent สั่งซื้อแทนลูกค้าได้ไหม?

ทำได้เมื่อออกแบบเครื่องมือสำหรับสร้างคำสั่งซื้อ พร้อม Authentication, Authorization และการยืนยันที่เหมาะสม

ไม่ใช่ความสามารถที่เกิดจากการฝัง Chatbot เพียงอย่างเดียว

🔒 Direct Line Security คืออะไร?

Direct Line เป็นช่องทางสำหรับเชื่อมเว็บหรือแอปเข้ากับ Copilot Studio Agent

หากต้องการพัฒนา Chatbot แบบกำหนดเอง อาจต้องใช้ Direct Line Secrets และ Tokens

Direct Line Secret

เป็นข้อมูลลับสำหรับยืนยันการเชื่อมต่อระดับระบบ

Direct Line Token

เป็น Token สำหรับการสนทนา ซึ่งสามารถสร้างจาก Secret ผ่านกระบวนการที่รองรับ

ต้องเปิดเผย Secret ในหน้าเว็บหรือไม่?

ห้ามเปิดเผย Direct Line Secret ใน HTML หรือ JavaScript ฝั่ง Browser

เพราะผู้เข้าชมสามารถตรวจสอบ Source Code และ Network Requests ได้

แนวทางที่เหมาะสม

1. จัดเก็บ Secret บน Server
2. ให้ Server ขอ Token จากระบบ
3. ส่งเฉพาะ Token ที่เหมาะสมให้ Web Client
4. เปิดการสนทนา
5. จัดการ Token ตามอายุและข้อกำหนด
6. ตรวจสอบการเข้าถึง

ทำไมต้องใช้ Server?

เพราะช่วยป้องกัน Secret ไม่ให้ถูกเปิดเผยแก่ผู้เข้าชมเว็บไซต์

มีข้อจำกัดอะไรอีก?

การเปลี่ยนค่า Require secured access อาจใช้เวลาสูงสุดประมาณสองชั่วโมงกว่าการตั้งค่าจะมีผลครบถ้วนตามระบบ

จึงต้องวางแผนก่อนเปลี่ยนการตั้งค่าด้านความปลอดภัย

🔐 วิธีเปิด Web Channel Security

สำหรับ Agent ที่ใช้ Direct Line สามารถกำหนดให้การเชื่อมต่อจำเป็นต้องใช้ Token หรือ Secret ได้

ขั้นตอน

1. เปิด Agent
2. ไปที่ Settings
3. เลือก Security
4. เปิด Web channel security
5. เปิด Require secured access
6. ตรวจสอบ Secret ที่ระบบเตรียมไว้
7. จัดเก็บ Secret อย่างปลอดภัย
8. ใช้ Server เพื่อสร้าง Token
9. ทดสอบการเชื่อมต่อ
10. ตรวจสอบการเข้าถึงจากเว็บไซต์จริง

ข้อควรระวัง

การเปิด Require secured access อาจกระทบช่องทางเว็บที่ใช้งานอยู่ก่อนแล้ว

ควรทดสอบระบบเชื่อมต่อใหม่และตรวจสอบว่าไม่มีการเปิดเผย Secret

🛡️ วิธีรักษาความปลอดภัย Chatbot บนเว็บไซต์

1. อย่าเปิดข้อมูลลับผ่าน Agent สาธารณะ

2. ตรวจสอบ Knowledge ที่เพิ่ม

3. จำกัดสิทธิ์ Tools

4. ไม่ฝัง API Keys ใน HTML

5. ใช้ HTTPS

6. ตรวจสอบ Authentication

7. ตรวจสอบ Authorization

8. ไม่ขอข้อมูลส่วนบุคคลเกินจำเป็น

9. กำหนดข้อความแจ้งนโยบายความเป็นส่วนตัวตามความเหมาะสม

10. ตรวจสอบการเชื่อมต่อระบบภายนอก

11. ใช้ Rate Limiting เมื่อออกแบบระบบเอง

12. ตรวจสอบ Logs และ Analytics

13. ทดสอบ Prompt Injection

14. ป้องกันการเรียก Tools โดยไม่ได้รับอนุญาต

15. ติดตามต้นทุนการใช้งาน

ข้อสำคัญ: การฝัง Agent บนเว็บไซต์สาธารณะต้องตรวจสอบทั้งข้อมูลที่เปิดเผยและการดำเนินงานที่ Tool สามารถทำได้ ไม่ใช่เพียงตรวจสอบหน้าต่างแชตว่าแสดงผลถูกต้อง

🧪 วิธีทดสอบ Chatbot หลังฝังเว็บไซต์

ทดสอบที่ 1: แสดงผลบน Desktop

ตรวจสอบขนาดและตำแหน่ง

ทดสอบที่ 2: แสดงผลบน Mobile

ตรวจสอบ Responsive Layout

ทดสอบที่ 3: คำถามพื้นฐาน

ถามข้อมูลบริษัทและบริการ

ทดสอบที่ 4: คำถามที่ไม่มีใน Knowledge

ดูว่า Agent แจ้งข้อจำกัดหรือสร้างคำตอบผิด

ทดสอบที่ 5: ภาษาไทย

ใช้ภาษาที่ลูกค้าจริงพิมพ์

ทดสอบที่ 6: ข้อมูลราคา

ตรวจสอบว่า Agent ไม่คาดเดาราคา

ทดสอบที่ 7: Tool

ตรวจสอบว่าระบบปลายทางได้รับคำขอจริง

ทดสอบที่ 8: Authentication

ตรวจสอบว่าผู้ใช้เข้าถึงเฉพาะข้อมูลที่ได้รับอนุญาต

ทดสอบที่ 9: เบราว์เซอร์

ทดลอง Chrome, Edge และ Safari ตามกลุ่มผู้ใช้งาน

ทดสอบที่ 10: ความเร็วเว็บไซต์

ตรวจสอบว่า iframe ไม่กระทบประสบการณ์ใช้งานมากเกินไป

ทดสอบที่ 11: หลัง Publish ใหม่

ตรวจสอบการแสดงผลของ Agent เวอร์ชันล่าสุด

ทดสอบที่ 12: ช่องทางติดต่อเจ้าหน้าที่

ตรวจสอบว่าผู้ใช้ยังสามารถติดต่อเจ้าหน้าที่ได้เมื่อ AI ช่วยไม่ได้

🔧 Copilot Agent ไม่แสดงบนเว็บไซต์ แก้อย่างไร?

ปัญหาที่ 1: ยังไม่ได้ Publish

ตรวจสอบว่า Publish Agent แล้ว

ปัญหาที่ 2: ไม่มี Embed Code

ตรวจสอบว่า Agent ตั้ง Authentication เป็น No authentication สำหรับวิธีฝังสำเร็จรูป

ปัญหาที่ 3: เลือก Channel ผิด

ตรวจสอบ Web app หรือ Custom website

ปัญหาที่ 4: iframe ไม่แสดง

ตรวจสอบว่าคัดลอก Embed Code ถูกต้อง

ปัญหาที่ 5: WordPress ลบโค้ด

ตรวจสอบสิทธิ์ผู้ใช้และการกรอง HTML ของ WordPress

ปัญหาที่ 6: Chatbot แสดง แต่ไม่ตอบ

ตรวจสอบ Agent, Knowledge และ Channel

ปัญหาที่ 7: Agent ตอบข้อมูลเก่า

ตรวจสอบ Knowledge และ Publish เวอร์ชันล่าสุด

ปัญหาที่ 8: Chatbot ถูกบัง

ตรวจสอบ CSS, z-index และตำแหน่งองค์ประกอบ

ปัญหาที่ 9: หน้าต่างแชตเล็กเกินไป

ปรับความกว้างและความสูง iframe

ปัญหาที่ 10: Chatbot ล้นหน้าจอมือถือ

เพิ่ม Responsive CSS

ปัญหาที่ 11: แสดงผลเฉพาะบางหน้า

ตรวจสอบว่า Embed Code อยู่ในหน้าใดหรือ Template ใด

ปัญหาที่ 12: JavaScript Error

ตรวจสอบ Browser Console

ปัญหาที่ 13: Content Security Policy บล็อก

ตรวจสอบนโยบาย CSP และโดเมนที่เกี่ยวข้องตามระบบ

ปัญหาที่ 14: Authentication Error

ตรวจสอบรูปแบบการเชื่อมต่อและ Credentials

ปัญหาที่ 15: Direct Line Token หมดอายุ

ตรวจสอบกลไก Refresh Token

ปัญหาที่ 16: Secret รั่วไหล

เปลี่ยน Secret และตรวจสอบระบบที่ได้รับผลกระทบ

ปัญหาที่ 17: Tool ใช้งานไม่ได้

ตรวจสอบ Connection, Authentication และสิทธิ์ระบบปลายทาง

ปัญหาที่ 18: Chatbot ตอบจาก Knowledge ไม่ครบ

ตรวจสอบแหล่งข้อมูล Description และเนื้อหาต้นทาง

ปัญหาที่ 19: Agent ไม่แสดงในเบราว์เซอร์บางตัว

ตรวจสอบการบล็อก Cookies, Scripts และข้อกำหนดของเบราว์เซอร์

ปัญหาที่ 20: ค่าใช้จ่ายสูง

ตรวจสอบปริมาณการสนทนา Copilot Credits และการใช้ Tools

📊 Checklist ก่อนเปิด Chatbot ให้ลูกค้าใช้จริง

รายการ	สิ่งที่ต้องตรวจสอบ
Agent Name	ชัดเจน
Instructions	พร้อมใช้งาน
Knowledge	ถูกต้อง
Publish	สำเร็จ
Website Channel	เชื่อมแล้ว
Authentication	เหมาะสม
Web Security	ตรวจสอบแล้ว
Embed Code	ถูกต้อง
HTTPS	เปิดใช้งาน
Desktop Layout	ผ่านการทดสอบ
Mobile Layout	ผ่านการทดสอบ
Tools	พร้อมและได้รับอนุญาต
Privacy	เหมาะสม
Fallback	มีแนวทาง
Contact Channel	ใช้งานได้
Error Handling	ครบถ้วน
Billing	ตรวจสอบแล้ว
Analytics	พร้อมติดตาม
Agent Owner	มีผู้รับผิดชอบ

📈 10 เทคนิคสร้าง AI Chatbot บนเว็บไซต์ให้มีประสิทธิภาพ

1. กำหนดหน้าที่ Chatbot ให้ชัดเจน

2. ใช้ Knowledge ที่ถูกต้อง

3. เขียน Instructions ให้ตรงกับธุรกิจ

4. ทำข้อความต้อนรับให้น่าใช้งาน

5. แนะนำตัวอย่างคำถาม

6. ออกแบบหน้าต่างแชตให้ใช้บนมือถือได้

7. มีช่องทางติดต่อเจ้าหน้าที่

8. ตรวจสอบความปลอดภัยก่อนเปิดสาธารณะ

9. ติดตามคำถามที่ AI ตอบไม่ได้

10. ปรับปรุง Knowledge อย่างต่อเนื่อง

สำหรับเว็บไซต์ธุรกิจ ควรเริ่มจาก Chatbot ที่ตอบคำถามเกี่ยวกับบริการได้อย่างถูกต้อง ก่อนเพิ่มความสามารถสร้างรายการหรือดำเนินงานผ่าน API

❓ คำถามที่พบบ่อยเกี่ยวกับการฝัง Copilot Agent บนเว็บไซต์

วิธีฝัง Copilot Agent บนเว็บไซต์ทำอย่างไร?

Publish Agent แล้วเปิด Channels เลือก Web app หรือ Custom website คัดลอก Embed Code และนำไปวางใน HTML ของเว็บไซต์

Copilot Studio ใช้กับ WordPress ได้ไหม?

ได้ โดยสามารถนำ Embed Code ที่รองรับมาใส่ใน Custom HTML Block

ต้องเขียนโค้ดหรือไม่?

หากใช้ Embed Code สำเร็จรูป ไม่จำเป็นต้องพัฒนาโค้ดเชื่อมต่อทั้งหมดเอง แต่หากต้องการปรับแต่งหรือเพิ่มระบบยืนยันตัวตน อาจต้องเขียนโปรแกรมเพิ่มเติม

Embed Code แสดงเมื่อใด?

สำหรับ Web Chat Embed Code สำเร็จรูป ต้องตั้ง Authentication เป็น No authentication

Copilot Agent ใช้กับเว็บไซต์ที่ต้อง Login ได้ไหม?

ได้ด้วยแนวทางการเชื่อมต่อที่รองรับ Authentication เช่น Agents SDK หรือระบบที่พัฒนาเองอย่างเหมาะสม

Copilot Studio ฝัง Chatbot ในทุกหน้าเว็บได้ไหม?

ทำได้ตามความสามารถของแพลตฟอร์มเว็บไซต์ โดยอาจใช้ Template หรือวิธีฝังโค้ดร่วมกันหลายหน้า

Copilot Agent ตอบคำถามจากเว็บไซต์ของตัวเองได้ไหม?

ได้เมื่อเพิ่มเว็บไซต์เป็น Knowledge และเนื้อหาอยู่ในรูปแบบที่ระบบค้นหาได้

Chatbot ตอบภาษาไทยได้ไหม?

ได้ตามความสามารถของ Agent ที่รองรับ แต่ควรทดสอบคำถามภาษาไทยจริง

Chatbot รับข้อมูลขอใบเสนอราคาได้ไหม?

สามารถถามและรวบรวมข้อมูลได้ หากต้องการส่งข้อมูลเข้าระบบต้องมี Tool หรือ Workflow เพิ่มเติม

Copilot Studio เชื่อม Power Automate ได้ไหม?

ได้ โดยสามารถเพิ่ม Agent Flow หรือ Tool ที่รองรับการเรียกกระบวนการอัตโนมัติ

Chatbot ส่งข้อมูลลูกค้าเข้า SharePoint ได้ไหม?

ได้เมื่อเชื่อม Tool ที่มีสิทธิ์สร้างรายการจริง

Chatbot ส่งอีเมลอัตโนมัติได้ไหม?

ได้เมื่อมี Connector หรือ Flow ที่รองรับและกำหนดสิทธิ์ถูกต้อง

Copilot Studio ทำ Chatbot เป็นปุ่มลอยได้ไหม?

ได้เมื่อปรับแต่ง Front-End เพิ่มเติม

สามารถเปลี่ยนสี Chatbot ได้ไหม?

สามารถปรับบางส่วนผ่านการตั้งค่าหรือสร้าง Custom Web Chat Canvas ตามระดับการปรับแต่งที่ต้องการ

Copilot Studio ใช้ iframe ได้ไหม?

ได้สำหรับรูปแบบ Web Chat ที่รองรับการฝังด้วย iframe

Direct Line คืออะไร?

เป็นช่องทางเชื่อมเว็บหรือแอปเข้ากับ Agent ผ่าน API ที่รองรับ

Direct Line Secret ใส่ใน JavaScript ได้ไหม?

ไม่ควรเด็ดขาด เพราะจะทำให้ผู้ใช้เข้าถึง Secret ได้

เว็บไซต์ต้องใช้ HTTPS ไหม?

ควรใช้ HTTPS เพื่อความปลอดภัยในการรับส่งข้อมูล

ทำไม Chatbot ไม่แสดง?

อาจเกิดจาก Embed Code ไม่ถูกต้อง ยังไม่ได้ Publish การตั้งค่า Authentication หรือข้อจำกัดของเว็บไซต์

ฝัง Copilot Agent บนเว็บไซต์มีค่าใช้จ่ายไหม?

ขึ้นอยู่กับ License, Copilot Studio Capacity, Copilot Credits และบริการที่เชื่อมต่อ ควรประเมินค่าใช้จ่ายตามจำนวนผู้ใช้งานก่อนเปิดให้บริการสาธารณะ

✅ สรุปวิธีฝัง Copilot Agent บนเว็บไซต์ สร้าง AI Chatbot ตอบลูกค้าอัตโนมัติ

Microsoft Copilot Studio สามารถนำ AI Agent ไปฝังบนเว็บไซต์ผ่าน Web Chat Embed Code หรือพัฒนาเชื่อมต่อด้วย Agents SDK และ Direct Line ตามความต้องการ

สำหรับเว็บไซต์ WordPress วิธีเริ่มต้นที่ง่ายคือ Publish Agent แล้วเลือก Web Channel คัดลอก Embed Code มาวางใน Custom HTML Block

สิ่งสำคัญคือต้องทราบว่า Embed Code สำเร็จรูปต้องใช้ No authentication ซึ่งเปิดให้บุคคลทั่วไปที่เข้าถึงช่องทางสนทนากับ Agent ได้ จึงควรใช้กับข้อมูลสาธารณะและตรวจสอบ Tools อย่างรอบคอบ

หากต้องการ Agent ที่เข้าถึงข้อมูลภายในองค์กรหรือมีระบบ Login ควรใช้แนวทาง Authentication และ Web Security ที่เหมาะสม

สำหรับธุรกิจบริการ IT สามารถสร้าง Chatbot เพื่อตอบคำถามเกี่ยวกับ LAN, Wi-Fi, Fiber Optic, CCTV และ Maintenance พร้อมช่วยรวบรวมข้อมูลก่อนขอใบเสนอราคาได้

comsiam แนะนำให้ใช้แนวทาง สร้าง Agent → เตรียม Knowledge → ตั้ง Instructions → ทดสอบ → Publish → ตั้ง Authentication → เลือก Web Channel → ฝัง Embed Code → ทดสอบ Desktop และ Mobile → ตรวจสอบความปลอดภัย → ติดตามผล

การฝัง Copilot Agent อย่างถูกต้องจะช่วยให้เว็บไซต์มีผู้ช่วย AI สำหรับตอบคำถามลูกค้า เพิ่มความสะดวกในการเข้าถึงข้อมูลบริการ และเป็นพื้นฐานสำหรับการพัฒนาระบบ Customer Service Automation ที่เชื่อมกับเครื่องมือธุรกิจในอนาคต