ข้ามไปที่เนื้อหาหลัก
Demos and onboarding

บันทึกเดโมเว็บแอปโดยอัตโนมัติด้วย AI

บันทึกเดโมเว็บแอปโดยอัตโนมัติ: เตรียมบัญชีเดโม เขียนคำสั่งให้เอเจนต์ AI ทำตาม และรู้ว่าเมื่อใดที่สคริปต์ Playwright เป็นทางเลือกที่ดีกว่า

Roozbeh Firoozmandใช้เวลาอ่าน 17 นาที

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

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

วิธีการบันทึกเว็บไซต์อัตโนมัติ

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

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

ขั้นตอนที่ 1: เตรียมบัญชีเดโมและข้อมูลเดโม

ทุกสิ่งที่เอเจนต์เห็นจะปรากฏในวิดีโอ ให้ตั้งค่าบัญชีก่อนที่คุณจะเขียนคำสั่งแม้แต่บรรทัดเดียว

  • ใช้บัญชีเดโมโดยเฉพาะ อย่าให้เอเจนต์เข้าถึงบัญชีผู้ดูแลระบบในสภาพแวดล้อมจริง (production) พื้นที่ทำงานเดโมที่มีการล็อกอินแยกต่างหากจะช่วยป้องกันไม่ให้ข้อมูลลูกค้าจริงหลุดออกไป และจำกัดความเสียหายหากเกิดข้อผิดพลาด
  • ใส่ข้อมูลที่สมจริง แดชบอร์ดที่ว่างเปล่าทำให้เดโมดูไม่น่าสนใจ เพิ่มข้อมูล 10 ถึง 20 รายการที่มีชื่อ จำนวนเงิน และวันที่ที่ดูสมจริง เพื่อให้ตาราง แผนภูมิ และผลการค้นหาดูเหมือนว่ามีทีมงานใช้งานผลิตภัณฑ์จริงๆ หลีกเลี่ยงการใช้ชื่ออย่าง "Test 1", "asdf" และชื่อลูกค้าจริง
  • ตั้งค่าสถานะเริ่มต้นของขั้นตอน หากเดโมแสดงเรื่อง "การสร้างโปรเจกต์แรกของคุณ" ตรวจสอบให้แน่ใจว่ายังไม่มีโปรเจกต์ใดๆ อยู่ หากแสดงเรื่องการแก้ไขใบแจ้งหนี้ ตรวจสอบให้แน่ใจว่ามีใบแจ้งหนี้อยู่จริงและมีชื่อที่ชัดเจนซึ่งคำสั่งสามารถอ้างถึงได้
  • จัดการสิ่งรบกวนที่เกิดขึ้นครั้งเดียว ปิดทัวร์แนะนำการใช้งาน โมดอล "มีอะไรใหม่" และแบนเนอร์ทดลองใช้ในบัญชีนั้นก่อน สิ่งใดก็ตามที่เด้งขึ้นมาครั้งเดียวต่อผู้ใช้หนึ่งคน จะเด้งขึ้นมาในการบันทึกของคุณด้วย
  • ตรวจสอบว่าแอปสามารถเข้าถึงได้จากอินเทอร์เน็ต เอเจนต์ทำงานในเบราว์เซอร์บนคลาวด์ ดังนั้นจึงไม่สามารถเปิด localhost, เซิร์ฟเวอร์ทดสอบ (staging) ที่อยู่หลัง VPN หรือสิ่งที่จำกัด IP เฉพาะในออฟฟิศของคุณได้ ให้ใช้สภาพแวดล้อมเดโมหรือแซนด์บ็อกซ์ที่เป็นสาธารณะ

ขั้นตอนที่ 2: เขียนคำสั่งที่เอเจนต์สามารถทำตามได้

การบันทึกด้วย AI ที่ไม่ดีส่วนใหญ่เกิดจากคำสั่งที่คลุมเครือ เอเจนต์จะทำตามสิ่งที่คุณเขียน ตามลำดับที่คุณเขียน และเติมเต็มส่วนที่ขาดหายไปด้วยการคาดเดา คำสั่งที่ดีควรอ่านเหมือนสคริปต์ทดสอบสั้นๆ ที่เขียนให้คนที่ไม่เคยเห็นผลิตภัณฑ์ของคุณมาก่อน

ปฏิบัติตาม 4 กฎนี้:

  1. ระบุชื่อหน้าจอ ใช้ป้ายกำกับที่ปรากฏใน UI เช่น "เปิด Billing จากแถบด้านข้างซ้าย" ไม่ใช่ "ไปที่ส่วนการเงิน"
  2. ระบุลำดับ ใส่หมายเลขขั้นตอน หากลำดับมีความสำคัญต่อเรื่องราว (ตั้งค่า, ใช้งาน, ดูผลลัพธ์) ให้ระบุให้ชัดเจน
  3. ชี้ไปที่องค์ประกอบที่แน่นอน ระบุชื่อปุ่ม แท็บ ฟิลด์ หรือรายการ เช่น "คลิกที่ใบแจ้งหนี้ INV-1042", "เปิดเมนูตัวกรอง (Filters) แล้วเลือก Overdue"
  4. ระบุจุดที่ต้องหยุด จบที่หน้าจอผลลัพธ์ที่ผู้ชมควรจำได้ และบอกให้เอเจนต์หยุดอยู่ที่นั่นสักครู่

นี่คือความแตกต่างในทางปฏิบัติ

คำสั่งที่ไม่ดี:

แสดงวิธีการทำงานของระบบใบแจ้งหนี้ของเรา

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

ดีขึ้น แต่ยังหลวมเกินไป:

แสดงวิธีการสร้างใบแจ้งหนี้และส่งให้ลูกค้า

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

คำสั่งที่ดี:

เริ่มต้นที่หน้า Dashboard 1) คลิก Invoices ในแถบด้านข้างซ้าย 2) คลิกปุ่ม New invoice ที่มุมขวาบน 3) ในช่อง Customer ให้เลือก "Northwind Studio" 4) เพิ่มรายการสินค้าหนึ่งรายการ: "Design retainer", จำนวน 1, ราคา 2,400 5) คลิก Save draft 6) เปิดร่างใบแจ้งหนี้แล้วคลิก Preview จากนั้นหยุดที่หน้าจอแสดงตัวอย่างเป็นเวลา 3 วินาที ห้ามคลิก Send

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

นิสัยเพิ่มเติมบางอย่างที่ช่วยได้:

  • หนึ่งขั้นตอนต่อการบันทึกหนึ่งครั้ง "สร้างใบแจ้งหนี้ จากนั้นตั้งค่าตารางเวลาแบบทำซ้ำ จากนั้นส่งออกรายงาน" คือ 3 วิดีโอ การบันทึกที่สั้นลงจะแก้ไขง่ายและนำกลับมาใช้ใหม่ได้ง่ายกว่า
  • สะกดค่าที่จะพิมพ์ให้ชัดเจน หากเอเจนต์ต้องคิดข้อความเอง มันอาจพิมพ์อะไรแปลกๆ ออกมาในวิดีโอ
  • ระบุจุดที่ทราบว่าเป็นปัญหา "ปุ่ม Save จะถูกปิดใช้งานจนกว่าฟิลด์ราคาจะเสียโฟกัส" จะช่วยให้เอเจนต์ไม่ต้องคลิกไปมาด้วยความสับสน

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

เดโมเว็บแอปส่วนใหญ่อยู่หลังหน้าล็อกอิน คุณมี 3 ตัวเลือก:

ตัวเลือก เมื่อใดที่ควรใช้
ข้ามการลงชื่อเข้าใช้ หน้าสาธารณะ: เว็บไซต์การตลาด, ราคา, เอกสาร, แซนด์บ็อกซ์สาธารณะ
ให้ข้อมูลล็อกอิน บัญชีเดโมพร้อมรหัสผ่านที่คุณสบายใจที่จะแชร์กับเครื่องมือนี้
พิมพ์ด้วยตัวเอง SSO, รหัสผ่านที่คุณไม่ต้องการเปิดเผย หรือการล็อกอินที่มีการยืนยันตัวตนสองชั้น (2FA)

บัญชีเดโมจากขั้นตอนที่ 1 จะคุ้มค่าในขั้นตอนนี้ รหัสผ่านสำหรับเดโมโดยเฉพาะที่เข้าถึงได้เฉพาะข้อมูลเดโมเป็นทางเลือกที่มีความเสี่ยงต่ำเมื่อคุณต้องให้ข้อมูลล็อกอิน หากบริษัทของคุณล็อกอินผ่าน SSO พร้อม 2FA การพิมพ์ด้วยตัวเองมักจะเร็วกว่าการพยายามทำให้เอเจนต์ทำแทน

ขั้นตอนที่ 4: ตัดสินใจว่าจะใช้แบบอ่านอย่างเดียวหรือแบบสร้าง/แก้ไข

แบบอ่านอย่างเดียวเป็นค่าเริ่มต้น และครอบคลุมเดโมส่วนใหญ่ที่คุณต้องการ (ความเสี่ยงของการปล่อยให้เอเจนต์เขียนข้อมูลอยู่ใน ความปลอดภัยของเอเจนต์บันทึกหน้าจอ AI): การนำทาง, การกรอง, การค้นหา, การเปิดรายการ, การสลับแท็บ และการแสดงรายงาน

อนุญาตให้สร้างหรือแก้ไขเฉพาะเมื่อขั้นตอนนั้นจำเป็นจริงๆ (การสร้างรายการ, การเปลี่ยนการตั้งค่า, การส่งแบบฟอร์ม) และทำเฉพาะในบัญชีเดโมเท่านั้น จากนั้นทำ 2 สิ่งนี้:

  • เขียนจุดหยุดไว้ในคำสั่ง เช่น "ห้ามคลิก Send" ตามที่ระบุไว้ข้างต้น การกระทำที่ส่งอีเมลถึงผู้คน ตัดเงินบัตรเครดิต หรือโพสต์ไปยังการเชื่อมต่อภายนอกควรอยู่นอกเหนือการทำงาน หรือถูกตัดการเชื่อมต่อในพื้นที่ทำงานเดโม
  • รีเซ็ตข้อมูลเดโมหลังจากนั้น เพื่อให้การทำงานครั้งถัดไปเริ่มต้นจากสถานะเดิม

ขั้นตอนที่ 5: เข้าควบคุมเมื่อเอเจนต์ติดขัด

หน้าจอบางหน้าจออาจทำให้เบราว์เซอร์อัตโนมัติเกิดปัญหา วางแผนรับมือแทนที่จะเริ่มการทำงานใหม่ทั้งหมด:

  • แบนเนอร์คุกกี้และป๊อปอัปขอความยินยอม เข้าควบคุม ยอมรับหรือปิด แล้วส่งคืนการควบคุม
  • ตัวเลือกวันที่แบบกำหนดเองและการลากวาง วิดเจ็ตที่ไม่ปกติคือจุดที่เอเจนต์เสียเวลามากที่สุด เลือกวันที่ด้วยตัวเองแล้วส่งคืนการควบคุม
  • Captchas สิ่งเหล่านี้มีไว้เพื่อหยุดระบบอัตโนมัติ ให้แก้ด้วยตัวเอง
  • รหัส 2FA พิมพ์รหัสจากโทรศัพท์ของคุณ แล้วส่งคืนการควบคุม

เมื่อคุณส่งคืนการควบคุม เอเจนต์จะทำงานต่อจากหน้าจอที่คุณทิ้งไว้ หากช่วงการส่งคืนการควบคุมปรากฏในวิดีโอ ให้ตัดออกในโปรแกรมแก้ไข

ขั้นตอนที่ 6: ทำให้การทำงานสั้นลงเพื่อประหยัดเครดิต

AI recorder ใช้เครดิตตามระยะเวลาที่ AI ทำงาน ในทุกแผนการใช้งาน นั่นทำให้คำสั่งเป็นตัวกำหนดต้นทุน คำสั่งที่แม่นยำบนบัญชีที่เตรียมไว้จะทำงานเสร็จเร็ว คำสั่งที่คลุมเครือบนบัญชีที่เต็มไปด้วยป๊อปอัปจะเสียเวลาไปกับการสำรวจ การลองใหม่ และการรอคอย จำนวนเครดิตของแผนการใช้งานอยู่ใน หน้าราคา

สิ่งที่การบันทึกจะกลายเป็น

สามรายการที่สร้างจากการบันทึกด้วย AI เพียงครั้งเดียวในคลังเนื้อหา: บทความวิธีใช้งาน, ภาพรวมผลิตภัณฑ์ และขั้นตอนการใช้งานผลิตภัณฑ์

การบันทึกดิบเป็นเพียงข้อมูลนำเข้า ไม่ใช่ผลลัพธ์สุดท้าย จากการบันทึกด้วย AI เดียวกัน คุณสามารถสร้าง:

  • วิดีโอวิธีใช้งาน (How-to video) Clevera จะครอบคลุมทุกขั้นตอนที่จำเป็นตามลำดับ เขียนสคริปต์ และเพิ่มเสียงบรรยายด้วย AI ทำให้ไม่ต้องมีคนมาพากย์สด นี่คือรูปแบบที่เหมาะสำหรับศูนย์ช่วยเหลือและการเริ่มต้นใช้งาน ดูวิธีการทำงานได้ใน เครื่องมือสร้างบทเรียนด้วย AI
  • วิดีโอสาธิตผลิตภัณฑ์ (Product demo) AI จะเลือกเฉพาะส่วนที่สำคัญ โดยสามารถข้ามฟุตเทจที่ไม่จำเป็น จัดลำดับคลิปใหม่ และบรรยายผลลัพธ์แทนการอธิบายทุกการคลิก นี่คือรูปแบบที่เหมาะสำหรับหน้าขายสินค้าและหน้าเปิดตัว ดูรูปแบบการสาธิตได้ใน เครื่องมือสร้างวิดีโอสาธิตผลิตภัณฑ์ ของเรา
  • บทความ วิธีใช้งานแบบเขียนพร้อมภาพหน้าจอที่เลือกและใส่คำบรรยายอัตโนมัติ สำหรับเอกสารและ SEO

แต่ละรายการเป็นเนื้อหาแยกกัน โดยวิดีโอและบทความสามารถแปลได้ถึง 74 ภาษา เมื่อ UI เปลี่ยนแปลง การแก้ไขคำบรรยายและข้อความจะอัปเดตในลิงก์ที่โฮสต์และส่วนที่ฝังไว้โดยอัตโนมัติ แต่ตัวฟุตเทจจะไม่เปลี่ยนแปลง คุณสามารถรันคำสั่งเดิมเพื่อรับฟุตเทจใหม่ได้ โดย วิธีอัปเดตวิดีโอสอนใช้งานหลังจาก UI เปลี่ยน จะครอบคลุมถึงกรณีที่ควรบันทึกใหม่และกรณีที่การแก้ไขเพียงเล็กน้อยก็เพียงพอแล้ว

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

การรันครั้งแรกของเรา: 1 คำสั่ง, 78 วินาที, 9 เครดิต

วิดีโอวิธีใช้งานที่ Clevera สร้างจากการบันทึกด้วย AI เปิดอยู่ในโปรแกรมแก้ไขไทม์ไลน์พร้อมสคริปต์ที่ AI เขียนขึ้นข้างเฟรม TodoMVC จริง

ในเดือนตุลาคม 2026 เราได้รันเครื่องมือบันทึกด้วย AI บน TodoMVC ซึ่งเป็นแอปสาธิตสาธารณะ ด้วยคำสั่งนี้:

เพิ่มรายการสิ่งที่ต้องทำสามรายการ: 'เขียนโพสต์เปิดตัว', 'บันทึกเดโม', 'ส่งจดหมายข่าว' ทำเครื่องหมาย 'บันทึกเดโม' ว่าเสร็จสิ้น จากนั้นคลิกตัวกรอง Active เพื่อแสดงเฉพาะสิ่งที่ต้องทำที่ยังไม่เสร็จ

เราไม่ได้ลงชื่อเข้าใช้ และเปิดใช้งาน Allow changes เนื่องจากขั้นตอนการเพิ่มและทำเครื่องหมายรายการเป็นคำสั่งเขียนข้อมูล ซึ่งเราทำได้เพราะเป็นแอปสาธิตสาธารณะที่ไม่มีข้อมูลจริง สำหรับผลิตภัณฑ์ของคุณเอง ให้ทำตามขั้นตอนที่ 4 แทน

เอเจนต์ทำตามที่เราเขียนไว้ทุกประการตามลำดับ โดยไม่มีการลองใหม่หรือคลิกผิดที่เราเห็น และเราไม่จำเป็นต้องเข้าไปควบคุมเอง การรันใช้เวลาจริงประมาณ 78 วินาที และได้ฟุตเทจ 58 วินาทีสำหรับงานที่คนปกติใช้เวลาประมาณ 20 วินาที เนื่องจากเอเจนต์จะหยุดพักระหว่างขั้นตอน Clevera ตัดต่อให้เป็นวิดีโอวิธีใช้งานความยาว 0:40 นาที พร้อม 2 บท, 6 ขั้นตอน และการซูมอัตโนมัติที่ 1.5x และ 1.8x ในเวลาประมาณ 50 วินาที เครดิตที่ใช้: 5 สำหรับการวิเคราะห์การบันทึก และ 4 สำหรับวิดีโอวิธีใช้งาน รวมเป็น 9 เครดิต

วิดีโอวิธีใช้งานความยาว 0:40 นาทีที่ Clevera สร้างจากการบันทึกด้วย AI นั้น โดยไม่มีการตัดต่อเพิ่มเติม

สิ่งที่ควรสังเกต: ฟุตเทจที่ได้อาจมีสีซีดและคอนทราสต์ต่ำ ดังนั้นควรตรวจสอบก่อนเผยแพร่ และคำสั่งของเราไม่ได้ระบุหมายเลขขั้นตอน มันทำงานได้ดีกับขั้นตอน 3 ขั้นตอนเพราะเราระบุค่าที่จะพิมพ์และตัวกรองที่จะคลิกไว้อย่างชัดเจน สำหรับขั้นตอนที่ยาวกว่านี้ ควรระบุหมายเลขขั้นตอนด้วย

ทางเลือกแบบใช้สคริปต์: Playwright และ Puppeteer

ทีมวิศวกรใช้สคริปต์อัตโนมัติบันทึกเบราว์เซอร์มาหลายปีแล้ว และสำหรับบางงาน สคริปต์ก็เป็นเครื่องมือที่ดีกว่า

Playwright บันทึกวิดีโอได้โดยตรง ใน Playwright Test คุณสามารถตั้งค่า ตัวเลือก video เป็น 'on', 'retain-on-failure' หรือ 'on-first-retry'; สำหรับไลบรารี คุณสามารถส่ง recordVideo ไปยัง browser.newContext() พร้อม dir และ size ที่เป็นตัวเลือกเสริม มี 2 รายละเอียดที่มักทำให้คนพลาด วิดีโอจะถูกบันทึกเมื่อบริบทเบราว์เซอร์ปิดลงเท่านั้น ดังนั้นคุณต้อง await context.close() และวิดีโอจะตั้งค่าเริ่มต้นที่วิวพอร์ตขนาด 800x800 ดังนั้นควรตั้งค่าวิวพอร์ตและ size ด้วยตัวเองหากต้องการความคมชัดระดับ 1080p คุณไม่จำเป็นต้องเขียนตัวเลือก (selectors) ด้วยมือเช่นกัน: npx playwright codegen จะสร้างสคริปต์ให้คุณในขณะที่คุณคลิกผ่านแอป

Puppeteer มี page.screencast() ซึ่งบันทึกไฟล์ WebM ที่ 30 FPS เป็นค่าเริ่มต้นและต้องใช้ ffmpeg บนเครื่อง ตั้งแต่ Puppeteer 25.13 เป็นต้นไป เอกสารระบุว่าฟีเจอร์นี้ล้าสมัยแล้ว โดยแนะนำให้ใช้ page.record() ซึ่งส่งออกเป็นไฟล์ MP4 แทน

สคริปต์เป็นทางเลือกที่ดีกว่าเมื่อ:

  • คุณต้องการบันทึกขั้นตอนเดิมในทุกการปล่อยอัปเดต โดยสั่งงานจาก CI โดยไม่ต้องมีคนคอยดู
  • การบันทึกทำหน้าที่เป็นบททดสอบด้วย และคุณให้ความสำคัญกับความล้มเหลวพอๆ กับฟุตเทจ
  • แอปของคุณอยู่ในที่ที่เบราว์เซอร์บนคลาวด์เข้าไม่ถึง เช่น เครือข่ายทดสอบส่วนตัวที่ CI runner ของคุณมองเห็น
  • คุณมีวิศวกรที่ดูแลการทดสอบแบบ end-to-end อยู่แล้วและตัวเลือก (selectors) มีความเสถียร

เอเจนต์เป็นทางเลือกที่ดีกว่าเมื่อ:

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

ทั้ง 2 วิธีสามารถใช้ร่วมกันได้ดี Clevera รองรับการอัปโหลดวิดีโอ รวมถึงการบันทึกแบบไม่มีเสียง ดังนั้นทีมงานสามารถบันทึกขั้นตอนด้วย Playwright ใน CI แล้วอัปโหลดไฟล์เพื่อสร้างวิดีโอวิธีใช้งานหรือเดโมพร้อมเสียงบรรยายได้

วิธีอื่นๆ ในการสร้างเดโมผลิตภัณฑ์โดยไม่ต้องบันทึกหน้าจอ

การบันทึกที่สะอาดมักต้องใช้บัญชีที่จัดระเบียบ สคริปต์ที่คุณทำตามขณะคลิก และไม่มีการเลี้ยวผิดทาง และทุกครั้งที่ UI เปลี่ยนแปลงก็ต้องมีคนกลับมาทำใหม่ เครื่องมือบันทึกด้วย AI ช่วยขจัดปัญหานี้สำหรับเว็บแอป เมื่อวิธีนี้ไม่ตอบโจทย์ คุณยังมีทางเลือกอื่นที่ไม่ต้องบันทึกหน้าจอ:

จากสไลด์, PDF หรือภาพหน้าจอ

ใช้วิธีนี้เมื่อฟีเจอร์ยังไม่เปิดตัว แอปยังไม่เป็นสาธารณะ หรือไม่ใช่เว็บแอป อัปโหลด สไลด์ PDF หรือภาพหน้าจอ เลือกประเภทเดโม เช่น ฟีเจอร์ใหม่ และเพิ่มคำแนะนำสั้นๆ ("กลุ่มเป้าหมายคือผู้ดูแลระบบปัจจุบัน ความยาวไม่เกิน 90 วินาที") ข้อความในสไลด์จะนำทางเสียงบรรยายที่ Clevera เขียนและพากย์ทับสไลด์ของคุณ ดังนั้นข้อความที่เฉพาะเจาะจง ("ส่งออกรายงานใดก็ได้เป็น CSV ใน 1 คลิก") จึงดีกว่าสโลแกนทั่วไป สำหรับแอปเดสก์ท็อป ภาพหน้าจอที่คัดสรรมาอย่างดี 8 ถึง 10 ภาพสามารถกลายเป็นวิดีโอแนะนำที่ชัดเจนได้ ข้อจำกัดคือไม่มีการคลิกหรือเคอร์เซอร์จริง จึงเหมาะสำหรับพรีวิวการเปิดตัวมากกว่าวิดีโอสอนแบบ "คลิกตรงนี้"

จาก URL หรือประโยคไม่กี่ประโยค

สำหรับคลิปสั้นๆ สำหรับโซเชียลมีเดีย โฆษณา หรือส่วนบนของหน้า Landing Page ประเภท Social & Promo ของ Clevera (ระดับ Starter ขึ้นไป ในช่วง Beta) ไม่จำเป็นต้องใช้ฟุตเทจ วางลิงก์ แล้ว Clevera จะดึงข้อมูลผลิตภัณฑ์ ภาพหน้าจอ และโลโก้จากหน้านั้น หรืออธิบายผลิตภัณฑ์ด้วยประโยคไม่กี่ประโยค AI จะเขียนคลิปเป็นกราฟิกเคลื่อนไหวพร้อมเพลงและเสียงบรรยาย (หากประเภทนั้นรองรับ) ประเภท Product tour, Feature spotlight และ Feature announcement คือประเภทที่ใกล้เคียงกับเดโมมากที่สุด และประเภท AI avatar (ระดับ Starter ขึ้นไป ในช่วง Beta) จะเพิ่มผู้นำเสนอเข้ามาด้วย สิ่งเหล่านี้คือการโปรโมต ไม่ใช่การสอน: มันแสดงให้เห็นว่าผลิตภัณฑ์คืออะไร ไม่ใช่ขั้นตอนการทำงานจริง

เครื่องมือสร้างอวาตาร์และเดโมแบบโต้ตอบ

เครื่องมืออวาตาร์อย่าง HeyGen เปลี่ยนสคริปต์หรือลิงก์ผลิตภัณฑ์ให้เป็นวิดีโอที่มีผู้นำเสนอ สำหรับซอฟต์แวร์ ฟุตเทจหน้าจอยังคงต้องมาจากที่ใดที่หนึ่ง เครื่องมือโต้ตอบอย่าง Arcade และ Supademo สร้างเดโมแบบคลิกผ่านแทนวิดีโอ แต่ก็ยังต้องมีคนคลิกผ่านผลิตภัณฑ์เพื่อบันทึกข้อมูลเหล่านั้น การเปรียบเทียบ เดโมแบบโต้ตอบเทียบกับวิดีโอผลิตภัณฑ์ ของเราจะครอบคลุมถึงกรณีที่แต่ละวิธีสร้างผลลัพธ์ได้ดีกว่า

วิธีไหนเหมาะกับงานอะไร

สิ่งที่คุณมี สิ่งที่คุณต้องการ วิธีที่ดีที่สุด ข้อจำกัดหลัก
เว็บแอปสาธารณะที่ใช้งานจริง เดโมแสดง UI จริง เครื่องมือบันทึกด้วย AI (คู่มือนี้) เว็บเท่านั้น; แอปต้องเข้าถึงได้จากเบราว์เซอร์บนคลาวด์
สไลด์หรือ PDF พรีวิวเปิดตัวก่อนฟีเจอร์ใช้งานจริง สไลด์เป็นเดโม ไม่มีการโต้ตอบจริง
ภาพหน้าจอของแอปเดสก์ท็อปหรือมือถือ วิดีโอแนะนำแบบง่าย ภาพหน้าจอเป็นวิธีใช้งานหรือเดโม ภาพนิ่งเท่านั้น; ไม่มีเคอร์เซอร์
URL หรือประโยคไม่กี่ประโยค คลิปโซเชียล, โฆษณา หรือทีเซอร์เปิดตัว โซเชียลและโปรโม (Starter ขึ้นไป, Beta) การโปรโมต ไม่ใช่การสอน
สคริปต์และต้องการคนในวิดีโอ คำอธิบายโดยผู้นำเสนอ อวาตาร์ AI หรือเครื่องมืออวาตาร์ ฟุตเทจซอฟต์แวร์ยังต้องมีแหล่งที่มา

ในการทดสอบของเราเมื่อเดือนตุลาคม 2026 ความแตกต่างนั้นชัดเจนมาก การรันเครื่องมือบันทึกด้วย AI ข้างต้นบวกกับภาพรวมผลิตภัณฑ์ 0:55 นาที ใช้ไป 11 เครดิตและแสดงการคลิกจริง ส่วน Feature spotlight ความยาว 35 วินาทีที่สร้างจาก clevera.ai ด้วยการค้นหาเว็บไซต์ใช้ไป 96 เครดิต ใช้เวลาประมาณ 7 นาที และเปิดมาในฉากที่ไม่เกี่ยวข้องซึ่งเราต้องแก้ไขก่อนโพสต์ ฟุตเทจจริงมีราคาถูกกว่าและใกล้เคียงกับเดโมมากกว่า ส่วนคลิปโปรโมตมีไว้เพื่อการเข้าถึง ไม่ใช่เพื่อการสอนขั้นตอนการใช้งาน

ข้อจำกัดที่ควรรู้ก่อนเริ่มต้น

  • เฉพาะเว็บเท่านั้น AI recorder จะบันทึกเว็บไซต์และเว็บแอปในเบราว์เซอร์บนคลาวด์ ไม่รองรับการบันทึกซอฟต์แวร์บนเดสก์ท็อปหรือแอปมือถือแบบเนทีฟ สำหรับขั้นตอนบนเดสก์ท็อป หรือขั้นตอนบนเว็บที่คุณต้องการคลิกเอง ให้ใช้แอป Clevera บนเดสก์ท็อป (macOS หรือ Windows)
  • เฉพาะแอปที่เข้าถึงได้เท่านั้น ไม่รองรับ localhost, สภาพแวดล้อมแบบ VPN-only หรือเครื่องมือที่จำกัด IP

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

คำถามที่พบบ่อย

ฉันสามารถสร้างเดโมผลิตภัณฑ์โดยไม่ต้องบันทึกหน้าจอเลยได้ไหม? ได้ AI recorder จะบันทึกเว็บแอปสาธารณะให้คุณในเบราว์เซอร์บนคลาวด์ ส่วนไฟล์ PDF หรือภาพหน้าจอนั้นไม่จำเป็นต้องบันทึก และคุณสามารถเปลี่ยน URL หรือข้อความแจ้งเตือน (prompt) ให้เป็นคลิปสไตล์โปรโมชันได้

ฉันจะป้องกันไม่ให้ข้อมูลลูกค้าจริงหลุดเข้าไปในเดโมได้อย่างไร? ให้ชี้ตัวแทน AI ไปยังบัญชีเดโมโดยเฉพาะที่ใส่ข้อมูลจำลองที่สมจริงไว้ (ขั้นตอนที่ 1) และห้ามใช้บัญชีผู้ดูแลระบบในสภาพแวดล้อมจริง (production) โดยเด็ดขาด

AI recorder ใช้กับซอฟต์แวร์เดสก์ท็อปได้ไหม? ไม่ได้ มันบันทึกได้เฉพาะเว็บไซต์และเว็บแอปเท่านั้น สำหรับซอฟต์แวร์เดสก์ท็อป ให้บันทึกด้วยแอป Clevera บนเดสก์ท็อปหรือสร้างเดโมจากภาพหน้าจอแทน

ฉันสามารถสร้างเดโมฟรีได้ไหม? แผน Free รองรับวิดีโอสอนการใช้งาน เดโมผลิตภัณฑ์ และบทความความยาวสูงสุด 3 นาที โดยแชร์ผ่านลิงก์หรือการฝัง (การดาวน์โหลดไฟล์ MP4 เริ่มต้นในแผน Starter) การบันทึกด้วย AI จะใช้เครดิตในทุกแผน ส่วนคลิปโซเชียลและโปรโมชัน รวมถึง AI avatar จำเป็นต้องใช้แผน Starter ขึ้นไป