WooCommerce Line Chatbot ( E-commerce Chatbot ) สั่งสินค้าด้วยไลน์บอท ตั้งแต่ ค้นหาสินค้า-สร้างออเดอร์-แจ้งชำระเงิน-ถึงแจ้ง tracking id

จากที่ Line ได้เปิดให้ใช้งาน messenger api ได้ไม่จำกัดเพื่อนอีกต่อไป ทางทีมงานเราจึงได้นำโปรเจค WooCommerce Line Chatbot ที่เป็น E-commerce Chatbot มาปัดฝุ่น เนื่องจากเคยออกแบบระบบคร่าวๆ ให้ลูกค้าไว้ตั้งแต่ปีก่อน นำมาพัฒนาต่อให้ใกล้เคียงกับสไตล์การสั่งซื้อสินค้าออนไลน์ของคนไทยมากยิ่งขึ้น ^^

สิ่งที่เจ้าบอท E-Commerce Line Chatbot นี้ทำได้ มีดังนี้

  1. ค้นหาสินค้า ด้วยหมวดหมู่สินค้า หรือชื่อสินค้า ซึ่งหากพบว่าลูกค้าต้องการค้นหาหมวดหมู่สินค้าก็จะแสดงหมวดหมู่สินค้าในรูปแบบ carousals และเมื่อเลือกหมวดหมู่ที่ต้องการก็จะแสดงข้อมูลสินค้าในรูปแบบ carousals อีกเช่นกัน
    woocommerce line chatbot search product categories show carousals
  2. ข้อมูลสินค้า ที่แสดงในรูปแบบ carousals จะมีรายละเอียดเบื้องต้นดังนี้
    1. รูปสินค้า
    2. ชื่อสินค้า
    3. ราคาสินค้า
    4. จำนวนสต็อกสินค้า
    5. ลิงก์สำหรับคลิกไปดูรายละเอียดสินค้าเพิ่มเติม ( ในอนาคตตั้งใจจะใช้เป็น LIFF API ที่ Line ตั้งใจให้ใช้คู่กับ  messenger api ^o^ )
      woocommerce line chatbot show product when choose category and carousals message
  3. สินค้าแบบ variables ก็จะถูกนำมาแสดงเป็น carousals แยกแต่ละรูปแบบสินค้า
    woocommerce line chatbot variable product show carousals
  4. add to cart เมื่อลูกค้าคลิก “เก็บลงตะกร้า” line chatbot จะเก็บข้อมูลเหล่านั้นไว้เหมือนกับ woocommerce cart
  5. ระบุจำนวนสินค้า หลังจาก add to cart เจ้า line chatbot จะแสดงข้อมูลในรูปแบบตัวเลือกเป็นจำนวนสินค้าเท่ากับ stock ของสินค้านั้นๆ โดยแสดงจำนวนสูงสุดที่ 20 ชิ้น ซึ่งปกติลูกค้าซื้อไม่เกินปริมาณเท่านี้ และวิธีนี้ก็ง่ายกว่าการพิมพ์ตัวเลขจำนวน
    woocommerce line chatbot add to cart choose quantity by flex message
  6. สรุปข้อมูลในตะกร้า bot มีการสรุปข้อมูลในตะกร้าสินค้าเหมือนกับ woocommerce cart เพื่อให้ลูกค้าตรวจสอบอีกครั้ง ก่อนยืนยันชำระเงิน
    woocommerce line chatbot show order summary before checkout flex message
  7. ยืนยันชำระเงิน ( checkout ) การยืนยันชำระเงินก็เหมือนกับการกดปุ่ม checkout ของ woocommerce เมื่อกดแล้ว เจ้า bot ก็จะสอบถามข้อมูลการจัดส่งพื้นฐาน เช่น ชื่อ-นามสกุล และที่อยู่จัดส่ง
    woocommerce line chatbot ark for shipping address and customer name
  8. ที่อยู่จัดส่ง ไม่จำเป็นต้องกรอกแยกหลายๆ ฟิลด์เหมือนใน woocommerce checkout form แค่กรอกในแชทเดียว เหมือนที่ปกติลูกค้าชอบส่งมาใน chat ต่างๆ ไม่ว่าจะเป็น facebook หรือ line
  9. สร้างออเดอร์ woocommerce  ออเดอร์ของ woocommerce จะถูกสร้างให้อัตโนมัติในสถานะ “on-hold” พร้อมแสดงไอคอน line ที่ออเดอร์ที่มีการสั่งซื้อผ่านไลน์ นอกจากนี้ ระบบก็จะส่งสรุปรายการคำสั่งซื้อ และเลขที่บัญชี ( จะเป็นไฟล์ภาพ หรือ ดึงจากการตั้งค่าใน woocommerce มาก็ได้ ) จากนั้น เจ้า line chatbot ก็จะมีหน้าที่ “รอ” ไฟล์สลิปแจ้งชำระเงินอย่างใจจดใจจ่อ
    woocommerce line chatbot waiting slip bank transfer from customer and order summary like checkout
  10. แจ้งชำระเงิน สามารถแจ้งได้ง่ายๆ ด้วยไฟล์สลิปเพียงไฟล์เดียว เมื่อลูกค้าอัพไฟล์สลิปแจ้งชำระเงินเข้ามา bot ก็จะทำการบันทึกลงในเว็บไซต์ของร้านค้าให้ทันที และไปแสดงที่หลังบ้านในส่วนของ woocommerce orders ให้ admin คลิกดูได้ทันที นอกจากนี้ยังเปลี่ยนสถานะเป็น “pending payment” เพื่อให้รู้ว่ามีการแจ้งชำระเงินมาแล้ว
    woocommerce line chatbot get bank transfer slip from customer
  11. หลังจากที่ admin ตรวจสอบยอดเงินเรียบร้อยแล้ว และเปลี่ยนสถานะเป็น “processing” หรือ “กำลังเตรียมการจัดส่ง” เจ้า bot ก็จะแจ้งกลับไปยังลูกค้าว่า “ได้รับการชำระเงินเรียบร้อยแล้ว กำลังเตรียมการจัดส่ง”
    woocommerce line chatbot change order status to processing notify
  12. และหลังจากที่ admin เปลี่ยนสถานะเป็น “completed” หรือ “จัดส่งเรียบร้อยแล้ว” line chatbot ก็จะส่งข้อความไปแจ้งลูกค้าว่า “จัดส่งเรียบร้อยแล้ว”
    woocommerce line chatbot change order status to completed notify
  13. เมื่อมีการเพิ่ม order note เช่น การแจ้ง tracking id เจ้า line bot ก็จะส่ง tracking id ไปให้ลูกค้าอัตโนมัติด้วย เรียกว่าครบลูปทุกขั้นตอนการสั่งซื้อผ่านไลน์เลยทีเดียว ^o^
    woocommerce line chatbot notify when add order note to customer like tracking id
  14. สุดท้าย ในการสั่งซื้อครั้งถัดไปของลูกค้าคนเดิม ระบบจะมีการสอบถามว่าจะใช้ที่อยู่จัดส่งเดิมหรือไม่ เพื่อไม่ให้ลูกค้าเสียเวลาต้องมากรอก ชื่อ และที่อยู่ จัดส่งอีกครั้ง
    woocommerce line chatbot store customer address for next time purchase

ตัวอย่าง VDO ทดสอบการใช้งาน