เว็บไซต์

มีสามวิธีนำ AI Agent ของ Quickchat ไปใช้บนเว็บ เลือกรูปแบบที่เหมาะกับพื้นที่ที่ต้องการแสดง:

• Widget: ปุ่มแชตแบบลอยที่มุมเว็บไซต์ เหมาะกับงานช่วยเหลือทั่วไป
• Embed: หน้าต่างแชตที่อยู่ในหน้าเว็บตรงตำแหน่งที่ต้องการ เหมาะกับฝัง AI ในหน้าจอแอป หน้าศูนย์ช่วยเหลือ หรือหน้ารายละเอียดสินค้า
• Chat Page: หน้าแชตเต็มจอที่ Quickchat โฮสต์ให้ ไม่ต้องติดตั้งหรือเขียนโค้ด เหมาะกับแชร์ลิงก์ให้ผู้อื่น เช่น ผ่านอีเมลช่วยเหลือ Slack ภายใน หรือผู้ทดสอบเบตา โดยไม่ต้องปรับเบราว์เซอร์ของพวกเขา

ติดตั้งรูปแบบที่เลือกจาก Channels → Your Website → Install หน้านี้มีสามแท็บย่อย ได้แก่ Install สำหรับเลือกวิธีเพิ่ม AI Agent, Appearance สำหรับรูปแบบภาพ และ Text Content สำหรับข้อความและป้ายที่ผู้เข้าชมเห็น แท็บ Install เริ่มด้วยตัวเลือกวิธีติดตั้ง แยกความพร้อมใช้งานและสิทธิ์เข้าถึงไว้ในส่วนของตัวเอง และแสดง Scenario ID ที่คัดลอกได้สำหรับปลั๊กอินและ API

เครื่องมือเสริมสำหรับการตั้งค่า

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

• เปรียบเทียบ HTML และ Markdown ของหน้าตัวอย่าง ดึง HTML เริ่มต้น เนื้อหา Markdown และลิงก์เครื่องมือจากตัวอย่าง Quickchat AI ที่กำหนดไว้ เครื่องมือนี้ไม่ประมวลผล JavaScript หรือตรวจสอบเว็บไซต์ใดก็ได้

Widget

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

วิธีเพิ่ม Widget ในเว็บไซต์

เปิด Channels → Your Website → Install แท็บเริ่มด้วย “How do you want to add your AI Agent?” และเรียงวิธีติดตั้งจากง่ายที่สุด เลือกวิธีที่ตรงกับเว็บไซต์:

• WordPress: ติดตั้ง ปลั๊กอิน Quickchat AI Agent ฟรี วาง Scenario ID แล้ว Widget จะปรากฏเอง ไม่ต้องแก้โค้ดธีม
• Shopify: เพิ่ม Widget ผ่าน Theme Editor ของร้าน ดู คู่มือ Shopify
• Webflow, Wix & others: คัดลอกโค้ดหนึ่งชุดแล้ววางในการตั้งค่าโค้ดเฉพาะที่ใช้ทั่วเว็บไซต์ของเครื่องมือสร้างเว็บ ให้มีผลกับทุกหน้า อย่าใช้องค์ประกอบ Embed หรือ HTML บนหน้าใดหน้าหนึ่ง ดู เครื่องมือสร้างเว็บไซต์
• Share a link instead: ไม่ต้องติดตั้งอะไร แชร์ลิงก์ Chat Page ที่โฮสต์ไว้ได้เลย
• Install manually with code: คัดลอกโค้ด Widget หรือ Embed แล้ววางลง HTML เอง

แต่ละวิธีเปิดแผงคำแนะนำทีละขั้นที่เน้นเฉพาะโค้ดหรือ ID ที่จำเป็น

Scenario ID อยู่ด้านบนแท็บ Install ในช่องที่คัดลอกได้ เป็นรหัสที่ปลั๊กอินและ API ต้องใช้ จึงคัดลอกจากตรงนี้ได้ทุกครั้งที่ขั้นตอนตั้งค่าขอ

ติดตั้งด้วยโค้ดเอง

หากคุณจัดการ HTML เอง ให้ขยาย Install manually with code บนแท็บ Install แล้ว:

1. คัดลอกโค้ด Widget
2. เปิดไฟล์ HTML ของหน้า หากใช้เครื่องมือสร้างเว็บ ให้ใช้การตั้งค่าโค้ดทั่วเว็บไซต์แทน ดู เครื่องมือสร้างเว็บไซต์
3. วางโค้ดก่อนแท็กปิด </body> ของทุกหน้าที่ต้องการให้ Widget ปรากฏ

ตรวจสอบโค้ด Widget เทียบกับ Scenario ID ที่ระบุ เครื่องมือตรวจโค้ดที่วาง ไม่ได้ดึงเว็บไซต์ของคุณ

เครื่องมือสร้างเว็บไซต์

บน Webflow, Wix, Squarespace, Hostinger และเครื่องมือคล้ายกัน ให้เพิ่ม Widget ครั้งเดียวผ่านการตั้งค่าโค้ดทั่วเว็บไซต์:

1. เปิดการตั้งค่าที่เพิ่มโค้ดให้ทุกหน้า อาจเรียกว่า Custom code, Code injection, Footer code หรือ Body end
2. วางโค้ด Widget แล้วใช้กับ ทุกหน้า หากเลือกตำแหน่งได้ ให้เลือกส่วนท้ายเว็บหรือท้าย body โค้ดนี้ไม่ทำงานใน head
3. เผยแพร่เว็บไซต์ ปุ่มแชตจะปรากฏทุกหน้า

คำเตือน

อย่าเพิ่ม Widget ผ่านองค์ประกอบ Embed หรือ HTML ที่วางบนหน้า เครื่องมือสร้างเว็บหลายตัวแสดงองค์ประกอบเหล่านี้ในเฟรมเล็กแยกต่างหาก ทำให้ Widget เปิดไม่ได้ แม้โหลดได้ ก็จะปรากฏเฉพาะหน้านั้นเท่านั้น

ตำแหน่งการตั้งค่าทั่วเว็บไซต์:

เครื่องมือสร้างเว็บ	การตั้งค่าโค้ดทั่วเว็บไซต์
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code แล้วเลือก All pages และ Body - end ต้องมีโดเมนที่เชื่อมต่อ
Squarespace	Custom Code → Code Injection → Footer บนแพ็กเกจ Core, Plus, Advanced และแพ็กเกจเก่าบางรายการ
Hostinger Website Builder	More (⋯) → Integrations → Custom code สคริปต์โหลดท้ายหน้าโดยอัตโนมัติ

เมนูอาจเปลี่ยนหรือแปลตามภาษาของเครื่องมือสร้างเว็บ หากเครื่องมือหรือแพ็กเกจไม่มีการตั้งค่าโค้ดทั่วเว็บไซต์ ให้แชร์ลิงก์ Chat Page แทน

ต้องการคนช่วย?

ไม่ใช่นักพัฒนาใช่ไหม? แท็บ Install มีทางลัดสองรายการใต้ Need a hand?:

• Ask AI for help: เปิดผู้ช่วยในแอป โดยใส่คำถามเรื่องเพิ่ม Agent ในเว็บไซต์ไว้ให้
• Email instructions to a developer: ส่งทุกอย่างที่เพื่อนร่วมทีมต้องใช้ ได้แก่ โค้ด Widget, Scenario ID และลิงก์คู่มือนี้ เพื่อให้ติดตั้งแทนคุณ

หากต้องการความช่วยเหลือเพิ่มเติม ติดต่อ contact@quickchat.ai

Chat Page

Chat Page เป็น AI Agent เวอร์ชันเต็มหน้าจอที่โฮสต์บน URL ของ Quickchat ไม่ต้องติดตั้ง เพียงแชร์ลิงก์ ผู้เข้าชมก็แชตกับ Agent ในเบราว์เซอร์ได้โดยตรง ใช้เมื่อ:

• คุณต้องการแชตแต่ไม่มีเว็บไซต์ หรือไม่ต้องการแก้โค้ดเว็บไซต์
• คุณแชร์ AI ภายในกลุ่มเล็ก เช่น ผู้ทดสอบเบตา ทีมช่วยเหลือ หรือลูกค้าเป้าหมาย และต้องการลิงก์ควบคุมสิทธิ์แทน Widget สาธารณะ
• คุณต้องการส่ง AI เป็นช่องทางติดตามผลผ่านอีเมล Slack หรือ CRM

กำหนดว่าใครเปิด Chat Page ได้ที่ Install → Chat Page Access ดู การควบคุมสิทธิ์เข้าถึง ด้านล่าง

เริ่มบทสนทนาใหม่

หากต้องการเริ่มแชตใหม่:

• Widget หรือ Embed: เปิดแชตแล้วคลิก ปุ่มรูปปากกาในสี่เหลี่ยม ที่มุมขวาบนของหน้าต่างแชต
• Chat Page: เลือก New chat ในแถบด้านข้าง หรือใช้ปุ่มรูปปากกาในสี่เหลี่ยมที่ส่วนหัว

การทำเช่นนี้เริ่มบทสนทนาใหม่กับ AI Agent บทสนทนาเดิมยังอยู่ใน Inbox การปิดแล้วเปิด Widget หรือรีเฟรชหน้าอาจกลับไปต่อบทสนทนาเดิม การขอให้ AI “รีเซ็ต” หรือ “ล้างแชต” ไม่ได้เริ่มบทสนทนาใหม่ คุณไม่ต้องล้างคุกกี้เบราว์เซอร์

การควบคุมสิทธิ์เข้าถึง

แท็บ Install เก็บการควบคุมสิทธิ์ในส่วน Availability and access ที่ยุบได้ ขยายเพื่อดูตัวควบคุมสองรายการสำหรับการเผยแพร่ของคุณ:

สิทธิ์เข้าถึง Widget และ Embed

สวิตช์ด้านบน Availability and access เมื่อ เปิด สคริปต์ Widget และ Embed ทำงานตามปกติในเบราว์เซอร์ผู้เข้าชม เมื่อ ปิด ทั้งสองจะไม่พร้อมใช้งานบนเว็บไซต์ แม้ยังวางสคริปต์ไว้ เหมาะกับปิด AI ชั่วคราวโดยไม่ลบโค้ด หรือจำกัดการเข้าถึงสาธารณะขณะที่ยังเปิด Chat Page ให้ผู้ได้รับเชิญ

Chat Page Access

คุณจำกัดผู้เปิด Chat Page ได้แยกจากสวิตช์ Widget และ Embed:

• Anyone: URL ของ Chat Page เป็นสาธารณะ ทุกคนที่มีลิงก์ใช้ได้
• Invited users only: เฉพาะ Chat Users ที่คุณเชิญทางอีเมลใช้ Chat Page ได้ และต้องยืนยันตัวตน
• Nobody: ปิด Chat Page ทั้งหมด

ลิงก์ Invite Chat Users เปิด Settings → Organization → Team Members แบบฟอร์มเชิญปัจจุบันมีบทบาททีมที่ให้สิทธิ์แดชบอร์ด ไม่ได้มีบทบาทเฉพาะแชตหรือส่วน Chat Users แยก อ่าน สมาชิกทีมและบทบาท ก่อนเชิญใคร

การปรับแต่ง

แท็บย่อย Appearance และ Text Content ให้คุณปรับรูปลักษณ์ของ Widget, Embed และ Chat Page รวมถึงข้อความที่ผู้เข้าชมเห็น ทั้งสามรูปแบบใช้การตั้งค่าร่วมกัน เปลี่ยนครั้งเดียวมีผลทุกที่ที่เผยแพร่ Agent

แผงขวาของแท็บ Install/Appearance/Text Content มีการควบคุมตัวอย่างของตัวเอง สลับระหว่าง Widget, Embed, Chat Page และมุมมอง Desktop, Mobile เพื่อดูการเปลี่ยนแปลงก่อนเผยแพร่

Appearance

รูปแบบภาพของแชตแบ่งเป็น Branding, Size & Position, Theme และ Other Settings

Branding

• AI Agent Avatar: รูปโปรไฟล์หรือโลโก้ของ Agent เป็นภาพเดียวที่ใช้ทั้งส่วนหัวแชตและปุ่มเปิดแชต ขนาดไม่เกิน 5 MB นี่คือการตั้งค่าเดียว ไม่ใช่สองรายการ อัปโหลดหนึ่งภาพแล้วปรากฏทั้งสองที่ แทน “header logo” และ “launcher icon” ที่เคยแยกกัน Agent ทุกตัวเริ่มด้วยรูปเริ่มต้น Reset to default คืนรูปนั้น ส่วนการลบจะไม่แสดงรูปใดเลย ใช้ได้ทุกแพ็กเกจ รวม Free

AI Agent Avatar ใช้กับ Widget, Embed และ Chat Page แต่ไม่ใช้กับ Discord ซึ่งรูปบอตมาจากแอป Discord ของบอต ดู Discord

Size & Position

• Launcher size: Classic, Input Only หรือ Small กำหนดหน้าตาปุ่มเปิดแชตก่อนเปิด
• การปิดปุ่มเปิดแชต: แบบ Classic มีปุ่มปิดเล็กที่มุมขวาบน แสดงเมื่อเมาส์ชี้บนเดสก์ท็อปและแสดงตลอดบนอุปกรณ์สัมผัส ปุ่มซ่อน Widget เฉพาะการดูหน้าครั้งนี้ และจะกลับมาเมื่อโหลดหน้าครั้งถัดไป ขนาดอื่นไม่มีปุ่มปิด
• Launcher label: แสดงเฉพาะเมื่อเลือก Small เป็นข้อความบนปุ่มขนาดเล็ก สูงสุด 25 อักขระ เช่น “Ask AI” หรือ “Chat” ปล่อยว่างเพื่อใช้เฉพาะไอคอน
• Widget position: ล่างซ้าย ล่างกลาง หรือล่างขวา
• ขนาดหน้าต่างแชต: ความกว้าง 300–700px และความสูง 400–1200px
• Draggable launcher: ให้ผู้เข้าชมลากปุ่มไปตำแหน่งอื่น เหมาะเมื่อปุ่มบังเนื้อหาสำคัญ

Theme

เลือกสีของพื้นผิวแชต:

• Light และ Dark เป็นรูปแบบสำเร็จรูปที่แสดงเหมือนกันในทุกบัญชี
• Custom เปิดให้ใช้ชุดสีของคุณเองทั้งหมด เมื่อเลือกจะมีตัวควบคุมสีพื้นหลัง ส่วนหัวและข้อความส่วนหัว สีเน้นที่ใช้กับปุ่มเริ่มก่อนแชต ชิปคำแนะนำ และการให้คะแนน ฟองข้อความและตัวอักษร ข้อความ AI สีลิงก์ ช่องกรอก เส้นขอบ และอื่น ๆ แต่ละสีจะตรวจความต่างกับพื้นหลังตาม WCAG AA และเตือนเมื่อคู่สีอ่านยาก

สีส่วนหัวและสีเน้นของแบรนด์อยู่ในธีม Custom ส่วน Light และ Dark ยังคงเป็นรูปแบบกลาง การสลับจึงไม่พาสีที่กำหนดเองติดไปด้วย

ใต้ Transparency การตั้งค่า Background เลือกความโปร่งใสของหน้าต่างแชต ใช้ได้กับทุกโหมดธีม โดยธีมเป็นตัวกำหนดสีเคลือบ:

• Solid: หน้าต่างแชตมีพื้นหลังทึบ เป็นค่าเริ่มต้น
• Glass: หน้าต่างมองทะลุได้และเว็บไซต์ด้านหลังเบลอเหมือนกระจกฝ้า สีเคลือบเป็นขาวใน Light สีมืดใน Dark และสีพื้นหลังของคุณใน Custom ซึ่งจะรักษาสีส่วนหัวที่ต่างจากพื้นหลังไว้ให้แบรนด์ยังเห็นชัด Glass opacity กำหนดว่าสีเคลือบทับหน้าเข้มเพียงใด เริ่มจากระดับต่ำสุดที่ยังอ่านตัวอักษรได้บนทุกเว็บไซต์ คือ 50% ใน Light, 65% ใน Dark และขึ้นอยู่กับสีของคุณใน Custom จนถึง 95% หากไม่มีระดับที่ทำให้ตัวอักษรอ่านได้ด้วยสี Custom ระบบจะใช้พื้นหลังทึบและอธิบายเหตุผลในการตั้งค่า Glass ยังคงถูกเลือก และจะกลับมาใช้เมื่อปรับสีตัวอักษรหรือพื้นหลังให้มีความต่างเพียงพอ

ความโปร่งใสใช้กับ Widget รวมถึงบนมือถือ และ Embed ส่วน Chat Page เต็มหน้ามีพื้นหลังทึบเสมอ ผู้เข้าชมที่เปิด “Reduce transparency” บนอุปกรณ์จะเห็นแบบ Solid ใน Chrome และ Edge ซึ่งส่งการตั้งค่านี้ให้เว็บไซต์ เบราว์เซอร์ที่เบลอหน้าไม่ได้จะแสดง Glass เกือบทึบเพื่อให้ข้อความอ่านได้

เมื่อเลือก Custom Chat Page ยังมีสีแถบด้านข้างแยก ได้แก่ Sidebar background, Sidebar text, Sidebar hover และ Sidebar hover text ใช้เฉพาะ Chat Page เต็มหน้า ไม่ใช้กับ Widget หรือ Embed หากไม่กำหนดสีข้อความ Chat Page จะเลือกสีที่อ่านง่ายกับพื้นหลังให้อัตโนมัติ

คุณตั้ง รัศมีมุม ซึ่งกำหนดความโค้งของฟองข้อความ ช่องกรอก และปุ่ม รวมถึง ขนาดข้อความ ได้ด้วย ทั้งสองใช้กับทุกโหมดธีม

Other Settings

• Voice Input: ให้ผู้เข้าชมบันทึกข้อความเสียงด้วยไมโครโฟนในกล่องแชต ระบบถอดเสียงลงช่องกรอกเพื่อแก้ก่อนส่ง การบันทึกหยุดเองหลังสองนาที ใช้ได้บนแพ็กเกจแบบชำระเงิน
• File Attachments: ให้แนบภาพหรือเอกสารกับข้อความ เปิดเป็นค่าเริ่มต้น ปิดเพื่อเอาปุ่มแนบไฟล์ออกจากแชต
• Auto-open Widget: เปิด Widget อัตโนมัติเมื่อหน้าโหลด
• Hide Quickchat AI Branding: ซ่อนข้อความท้าย “Powered by Quickchat AI” เพื่อให้เป็นแบรนด์ของคุณทั้งหมด ใช้ได้บนแพ็กเกจที่รองรับ white-labeling

หากต้องการให้ผู้เข้าชมให้คะแนนบทสนทนา เปิด Conversations → Insights → Conversation Rating การตั้งค่าและผลลัพธ์อยู่ในแท็บนี้ ดู การให้คะแนนบทสนทนา

Text Content

เปิด Channels → Your Website → Text Content เพื่อแก้คำทักทายและข้อความที่ผู้เข้าชมเห็น:

• Header text: ข้อความด้านบนหน้าต่างแชต
• Welcome message: ข้อความแรกจาก AI Agent เมื่อเริ่มแต่ละบทสนทนา เช่น “สวัสดี ต้องการความช่วยเหลือไหม?”
• Show as a pop-up: สวิตช์แสดงคำทักทายเป็นฟองข้อความลอยข้างปุ่มเปิดแชต บางคนเรียก “teaser” หรือ “launcher message” เพื่อดึงความสนใจก่อนคลิก ฟองนี้แสดงข้อความ Welcome message โดยตรง จึงแก้ช่องนั้นเพื่อเปลี่ยนคำพูด
• Conversation starters: ข้อความตัวอย่างสูงสุด 3 รายการก่อนผู้เข้าชมเริ่มพิมพ์ คลิกแล้วจะส่งเป็นข้อความแรก เหมาะกับชี้นำไปยังจุดแข็งของ AI เช่น “ติดตั้ง Widget อย่างไร?” หรือ “รองรับการเชื่อมต่ออะไรบ้าง?”
• Input placeholder: ข้อความแนะนำในช่องพิมพ์ที่ว่าง
• Disclaimer text: ข้อความที่แสดงด้านหลังการสนทนา โดยทั่วไปแจ้งว่ากำลังคุยกับ AI เราแนะนำให้ชัดเจนและมองเห็นง่าย

ส่วน Pre-chat Screen อยู่ใต้ช่องเหล่านี้ในแท็บ Text Content เดียวกัน เปิดใช้งานและแก้ข้อความหัวเรื่อง ปุ่ม และข้อความได้ที่นั่น

ภาษาและคำแปล

ค่าเริ่มต้นจะแสดง Text Content ให้ทุกคนตามที่คุณพิมพ์ บนแพ็กเกจแบบชำระเงิน คุณเพิ่ม คำแปลแยกตามภาษา ให้ผู้เข้าชมเห็น Widget ในภาษาของตนได้

1. เปิดแท็บย่อย Text Content แล้วคลิก Translate ใน Other languages แผง Translate widget text จะเปิดพร้อมข้อความหลักข้างคำแปลแต่ละภาษาในชื่อ Default (source)
2. คลิก Add language แล้วเลือกภาษา Quickchat AI สร้างคำแปลจากข้อความปัจจุบัน ตรวจและแก้ช่องต่าง ๆ ของภาษานั้น ได้แก่ ส่วนหัว คำทักทาย ข้อความเริ่มสนทนา ข้อความในช่องพิมพ์ หน้าก่อนแชต และข้อความแจ้ง การเปลี่ยนแปลงบันทึกอัตโนมัติ
3. ช่องที่ปล่อยว่างใช้ข้อความเริ่มต้นแทน คุณจึงแปลเฉพาะสิ่งที่ต้องการเปลี่ยน หากแปลอัตโนมัติล้มเหลว ยังใส่ข้อความเองได้

จำนวนภาษาที่เพิ่มได้ขึ้นอยู่กับแพ็กเกจ

วิธีเลือกภาษาของผู้เข้าชม

สำหรับ Widget และ Embed Quickchat เลือกภาษาตามลำดับนี้:

1. ค่าที่ระบุให้ใช้โดยตรง ในตัวโหลด: _quickchat("language", "de") โดยเรียกก่อน _quickchat("init", ...)
2. แอตทริบิวต์ <html lang> ของหน้า เช่น <html lang="de"> จะใช้คำแปลเยอรมัน วิธีนี้แนะนำให้ใช้ ตั้ง lang ให้ถูกต้องบนแต่ละหน้าที่แปลแล้ว Widget จะตามให้อัตโนมัติ
3. ภาษาของเบราว์เซอร์ผู้เข้าชม แล้วใช้ข้อความ Default หากไม่มีภาษาตรงกัน

หมายเหตุ

หากไม่มีคำแปลภาษาของผู้เข้าชม ระบบจะแสดงข้อความ Default เสมอ ไม่ปล่อยว่าง

ฟีเจอร์ขั้นสูง: พารามิเตอร์เฉพาะ

Widget และ Embed ของ Quickchat AI ให้ส่ง พารามิเตอร์เฉพาะ ตอนเริ่มต้นได้ ใช้เพื่อ:

• เพิ่มข้อมูลวิเคราะห์ โดยข้อมูลอยู่ในการส่งออก CSV บนแพลตฟอร์ม Quickchat
• ส่งค่าให้ API Actions และปรับคำตอบเฉพาะบุคคลเมื่อได้รับอนุญาต AI รับเฉพาะข้อมูลส่วนที่กรองแล้ว ไม่ใช่ทุกพารามิเตอร์ ดู บริบทโมเดลและการอนุญาต

ตัวอย่างพารามิเตอร์ที่มีประโยชน์:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

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

หากต้องการเพิ่มพารามิเตอร์ข้างต้น ให้ใส่ส่วนต่อไปนี้ในสคริปต์ที่พบใต้ Your Website > Install

Widget และ Embed ใช้รูปแบบการเรียกเหมือนกัน:

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

แอตทริบิวต์เหล่านี้กำหนดให้ทุกบทสนทนาใหม่ เราแนะนำให้ใช้เพียงไม่กี่คีย์

เคล็ดลับ

พารามิเตอร์เฉพาะที่ตั้งชื่อแบบ snake_case เช่น order_id, customer_tier ใส่ใน API Actions โดยตรงเป็น {{metadata_order_id}}, {{metadata_customer_tier}} ฯลฯ ได้ ดูรายละเอียดที่ ตัวแปร AI Action

ตัวอย่างสคริปต์:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Embed ให้คุณวาง AI Agent ของ Quickchat ลงในหน้าโดยตรงเป็นหน้าต่างแชต แทนปุ่มแบบลอย เหมาะเมื่อต้องการแชตในตำแหน่งเฉพาะ เช่น คอลัมน์ศูนย์ช่วยเหลือ หน้าติดต่อ หรือแถบด้านข้างในแอป

วิธีเพิ่ม Embed

1. รับโค้ด Embed

   • เข้าสู่ Quickchat AI App
   • ไปที่ Channels → Your Website ในแถบซ้าย
   • คลิกแท็บ Install แล้วขยาย Install manually with code
   • คัดลอก โค้ด Embed ซึ่งมีทั้งคอนเทนเนอร์ <div id="quickchat-embedded"> และสคริปต์โหลด

2. เปิดไฟล์ HTML ของเว็บไซต์ หรือหน้าในเครื่องมือสร้างเว็บ

3. วางโค้ด

   • ใส่โค้ด Embed ใน <body> ของหน้า
   • วางตรงจุดที่ต้องการให้หน้าต่างแชตปรากฏ <div> ควบคุมขนาด ปรับ style="height:600px" ให้พอดีกับพื้นที่ในเลย์เอาต์
   • บนเครื่องมือสร้างเว็บ ให้เพิ่มองค์ประกอบโค้ดหรือ HTML ในตำแหน่งแชต แล้ววางโค้ดข้างใน

หมายเหตุ

Embed ทำงานเมื่อเครื่องมือสร้างเว็บใส่โค้ดในหน้าโดยตรงเท่านั้น บางเครื่องมือ เช่น Wix แสดง HTML ในเฟรมแยก และ Embed โหลดในเฟรมไม่ได้ หากไม่เห็นหน้าต่างแชตบนหน้าที่เผยแพร่ ให้เพิ่ม Widget ผ่านการตั้งค่าโค้ดทั่วเว็บไซต์ หรือแชร์ลิงก์ Chat Page แทน