แจก script สร้างปุ่ม quick reply ใน Line

อยากสร้างปุ่มแบบนี้ใน Line จะได้ให้ลูกค้าสามารถกดดูข้อมูลต่างๆของธุรกิจได้ง่ายๆ แต่ว่าหา setting ในหน้าหลังบ้านของ Line ไม่เจอ

ผมก็เป็นหนึ่งในนั่นครับที่หาอยู่นานว่าปุ่มแบบนี้มันทำยังไง เลยไปหาข้อมูลจนรู้ว่าปุ่มแบบนี้สามารถสร้างผ่านทาง script ได้เท่านั้น ><

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

โดยในเคสนี้เราจะทำการสร้าง script ใน Google App Script ครับ วิธีการคือให้ทำการพิมพ์คำว่า “script.new” ไปยังแถบ url ของ browser เพื่อทำการเปิดหน้า Google App Script ได้ทันที

หลังจากนั้นให้ทำการลบข้อมูลในส่วนของ script ที่ระบบสร้างขึ้นมาให้ก่อน และให้นำ code ด้านล่างนี้ไปวางแทนได้ทันที

var CHANNEL_ACCESS_TOKEN = 'your channel access token';

function doPost(e) {
  var contents = JSON.parse(e.postData.contents);
  var event = contents.events[0];

  // ตรวจสอบว่าเป็น Event ประเภทข้อความ (message) และเป็นตัวอักษร (text)
  if (event.type === 'message' && event.message.type === 'text') {
    var userMessage = event.message.text; // ข้อความที่ผู้ใช้พิมพ์มา
    var replyToken = event.replyToken;

    // --- เงื่อนไข: ตรวจสอบคีย์เวิร์ด "สวัสดี" ---
    // ใช้ .includes() เพื่อให้ครอบคลุมทั้ง "สวัสดีครับ", "สวัสดีค่ะ", "สวัสดีจ้า"
    if (userMessage.includes("สวัสดี")) {
      
      var quickReplyMessage = {
        "type": "text",
        "text": "สวัสดีครับ! ยินดีต้อนรับสู่ร้าน Shabu Squad สามารถเลือกปุ่มด้านล่างเพื่อสอบถามข้อมูลของร้านได้เลย! \n\nหรือถ้าต้องการดูเมนูให้พิมพ์คำว่า 'สวัสดี' ได้เลย :) ",
        "quickReply": {
          "items": [
              {
                "type": "action",
                "imageUrl": "https://img5.pic.in.th/file/secure-sv1/Reservation-Icon.th.png",
                "action": {
                  "type": "message",
                  "label": "จองโต๊ะยังไง",
                  "text": "จองโต๊ะ"
                }
              },
              {
                "type": "action", // ต้องเป็น action
                "imageUrl": "https://img2.pic.in.th/pic/Menu-Icon.th.png",
                "action": { // ข้อมูลปุ่มต้องอยู่ใน object 'action'
                  "type": "uri",
                  "label": "ดูเมนู",
                  "uri": "https://www.youtube.com/@noobitguy"
                }
              },
              {
                "type": "action", // ต้องเป็น action
                "imageUrl": "https://img2.pic.in.th/pic/Telephone-Icon.th.png",
                "action": { // ข้อมูลปุ่มต้องอยู่ใน object 'action'
                  "type": "uri",
                  "label": "โทรหาเรา",
                  "uri": "tel:0690000000"
                }
              }
            ]
        }
      };

      // ส่ง Quick Reply กลับไป
      replyLine(replyToken, quickReplyMessage);
    }
  }
}

// ฟังก์ชันแยกสำหรับส่งข้อความกลับ เพื่อให้โค้ดดูสะอาดขึ้น
function replyLine(replyToken, msgObj) {
  UrlFetchApp.fetch('https://api.line.me/v2/bot/message/reply', {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [msgObj]
    }),
  });
}

โดยหลังจากที่เรา copy script ไปวางแล้ว เราจำเป็นที่จะต้องเปลี่ยนค่า Channel Access Token ในส่วนของบรรทัดที่ 1 ของ script โดยเราสามารถนำค่า Channel Access Token มาใส่ได้จากเว็บ developers.line.dev (สามารถดูวิธีการได้จากคลิปด้านล่างได้เลย)

หลังจากนั้นเราสามารถเปลี่ยนค่า keyword ที่บรรทัดที่ 14 ได้ โดย keyword นี้จะเป็นคำที่เราตั้งไว้ว่าเมื่อ user ทำการพิมพ์คำนี้ขึ้นมาแล้วให้ระบบทำการส่งข้อความในบรรทัดที่ 18 พร้อมกับปุ่ม quick reply ที่จะอยู่หลังบรรทัด items ไปให้ user แบบอัตโนมัติ

โดยถ้าเราอยากจะปรับแต่งในส่วนของปุ่ม quick reply เราสามารถทำการอ้างอิงจาก link ดังต่อไปนี้ได้เลยครับ

https://developers.line.biz/en/docs/messaging-api/using-quick-reply/#action

หากต้องการดูข้อมูลเพิ่มเติมในส่วนของตัวอย่าง workflow การตั้งค่าเพื่อนำเอาปุ่ม quick reply มาใช้ในการบริการก็สามารถดูได้ที่คลิปด้านล่างนี้เลยครับ

💳 ชอบคลิปที่ช่วยเพิ่มประสิทธิภาพการทำงานแบบนี้สามารถสมัครสมาชิกช่องได้ที่ 
https://www.youtube.com/channel/UChxmhkD8uSSzUOkfMO_p5oQ/join

🎓 สนใจคอร์สสร้าง Template ระบบสต๊อกสินค้าใน Google Sheets สอนโดยผมเอง สามารถดูรายละเอียดได้ที่ลิงค์นี้เลย
https://www.skilllane.com/courses/GoogleSheets-Noobitguy

🎓 สนใจคอร์ส สร้าง Web Application โดยไม่ต้องเขียนโค้ดด้วย Lovable AI สอนโดยผมเอง สามารถดูรายละเอียดได้ที่นี้เลย
https://page.futureskill.co/lovablewebapp?aff=446

🎓 คอร์ส AI Automation จาก 0-100
https://page.futureskill.co/ai-automation?aff=446

🎥 อุปกรณ์ที่ผมใช้

กล้อง Sony ZV-E10 kit 16-50mm
Mouse Logitech MX Master 3s
MacBook Air M2
ไมค์ wireless Saramonic Blink 500
เก้าอี้ Anda Seat X-Air Pro Ergonomic Gaming Chair
แขนจับจอ Anda Seat Stealth A6L Ergonomic Monitor Arm
ไมโครโฟน AKG Lyra
ไฟส่องหน้าจอ Xiaomi Light Bar