LINE Bot—สร้าง Rich Menu และ Quick Reply ง่ายนิดเดียว

ใครที่ใช้บริการ LINE และมีการ Add LINE OA ของผู้ให้บริการเจ้าต่างๆ คงคุ้นเคยกับ ฟีเจอร์ Rich Menu เป็นอย่างดี ส่วนใครที่นึกไม่ออกว่าฟีเจอร์ Rich Menu คืออะไร อยากให้ลองดูในรูปตัวอย่างนี้ครับ

ฟีเจอร์ Rich Menu ก็คือเมนูแนะนำคำสั่งต่างๆ ที่ผู้ใช้จะเรียกใช้บ่อยๆ หรือคำสั่งที่เราต้องการเน้นให้ผู้ใช้ได้เรียกใช้งานแบบง่ายๆ โดยไม่ต้องจำ เพียงแค่ทำการจิ้มๆ ผ่านเมนูแทนการพิมพ์ข้อความ text เพื่อให้ตรงกับ Keywords ที่ตั้งไว้สำหรับให้ LINE Bot ทำงานอะไรบางอย่าง ช่วยให้ผู้ใช้ไม่ต้องมานั่งจำ Keywords เหล่านั้นเอง

ส่วนฟีเจอร์ Quick Reply เป็นฟีเจอร์ที่จะช่วยแนะนำการตอบกลับไปหา LINE Bot ด้วยการแสดงปุ่มข้อความแนะนำด้านล่างของหน้าแชท โดยผู้ใช้สามารถกดปุ่มข้อความแนะนำนั้นเพื่อตอบกลับได้ทันที

เพื่อนๆ สามารถทำความรู้จักฟีเจอร์ Rich Menu และฟีเจอร์ Quick Reply จากทีมงาน LINE Developers Thailand แบบลงรายละเอียดได้ที่สองบทความนี้เลย


— มาเริ่มลงมือกันเลยดีกว่าครับ โดยผมจะใช้ LINE Bot AQI ที่เคยได้ทำไว้แล้วมาเพิ่มฟีเจอร์ Rich Menu และฟีเจอร์ Quick Reply เพื่อให้ผู้ใช้เข้าใจว่าสามาถตรวจสอบค่าดัชนีคุณภาพอากาศด้วย Bot ได้เลย และหากเลือกเมนูการตรวจ ดัชนีคุณภาพอากาศแล้ว Bot จะมีข้อความตอบกลับผู้ใช้พร้อมกลับ Quick Reply ที่เป็น Location Action เพื่อให้ผู้ใช้ส่ง Location ให้ Bot เพื่อที่ ฺBot จะได้ส่งค่าดัชนีคุณภาพอากาศในพื้นที่นั้นส่งให้ผู้ใช้ทราบ มาเริ่มกันที่การสร้าง Rich Menu กันก่อนครับ โดยผมจะเลือกสร้าง Rich Menu ด้วย Rich Menu Maker และผ่าน LINE OA Manager ครับ

1. สร้าง Rich Menu

— สร้าง Rich Menu ด้วย Rich Menu Maker ให้ไปที่ https://lineforbusiness.com/richmenumaker/ จะพบกับหน้าเพื่อให้เลือกรูปแบบ Rich Menu ตามที่ต้องการ

— หลังจากเลือกรูปแบบที่ต้องการได้แล้ว จะพบหน้าตัวอย่างด้านซ้ายและด้านขวามือจะเป็นการสร้าง Rich Menu โดยให้เราเพิ่มรูปภาพ, ไอคอน, ข้อความ ที่ต้องการสื่อสารให้ผู้ใช้ทราบ โดยผมเลือกทำเพียงแค่ 2 เมนูครับ ในส่วนรายละเอียดว่าทำอะไรได้บ้างให้เพื่อนๆ ลองเล่นดูกันได้เลย

— หลังจากปรับแต่ง Rich Menu ได้ตามความต้องการแล้ว ให้บันทึกไฟล์รูป Rich Menu มาเก็บไว้ก่อน ซึ่งจะได้ขนาดตามที่ LINE กำหนดไว้เลยครับ อย่าลืมเลือกยอมรับข้อตกลงด้วยน่ะ


2. เพิ่ม Rich Menu ผ่าน LINE OA Manager

— ให้ Log in เข้าสู่ LINE OA ของเราที่ https://manager.line.biz/ แล้วไปเลือก Channel ของเราที่ทำไว้ได้เลยครับ แล้วเลือกเมนู Rich Menu แล้วจิ้มปุ่มเขียวๆ สร้างใหม่ ไปโลด

— กำหนดชื่อ, ช่วงเวลาที่จะให้แสดงกับผู้ใช้, ข้อความที่แสดง และจะให้แสดงเมนูขึ้นมาเลย หรือซ่อนไว้รอให้ผู้ใช้จิ้มเพื่อให้แสดง Rich Menu ขึ้นมาเอง อันนี้แล้วแต่ความต้องการเลยครับ

— ให้ตั้งค่าคอนเทนต์ Rich Menu ต่อด้วยการเลือกเทมเพลตให้ตรงกับที่เราสร้างไว้ จะเห็นว่าใน LINE OA Manager ก็สามารถสร้างรูป Rich Menu ได้เลยเหมือนกัน ยังไงเพื่อนๆ ลองเล่นกันได้เลย หลังจากนั้นด้านขวามือให้กำหนด Action ที่จะให้เกิดขึ้นหลังจากผู้ใช้จิ้มเลือกเมนูครับ ผมเลือกอันหนึ่งเป็นการส่งข้อความให้ Bot และอีกอันเป็นลิงก์เพื่อดูข้อมูลเพิ่มเติมตามลิงก์ที่กำหนดไว้ครับ หรือใครที่ต้องการการออกแบบที่สวยงามมากขึ้นให้ Download ดีไซน์ไกด์ (ในรูปอยู่มุมขวาด้านบน) เพื่อเป็นแนวทางในการสร้างรูป Rich Menu ได้เลยครับ

— กดบันทึก และลองไปเปิด LINE Bot ในมือถือเพื่อดู Rich Menu ที่ได้เลย อย่าลืมทดลองจิ้มดูด้วยน่ะครับ ว่าได้ตามที่ต้องการหรือเปล่า (ขีดตรงกลางผมแอบไปเพิ่มด้วยโปรแกรมตกแต่งรูปภาพก่อนจะอัพโหลดขึ้นใน LINE OA Manager ครับ)


3. สร้าง Quick Reply

update 16 มกราคม 2563

ทำความรู้จัก Quick Reply หรือ Quick Replies

เป็นศัพท์ที่หลายๆคนสับสนเกี่ยวกับ LINE OA และ Dialogflow ว่ามันคืออะไรกันแน่ ซึ่งจริงๆแล้วคำๆนี้สามารถเป็นได้ถึง 3 รูปแบบ ดังนั้นผมจึงขอมาเล่าผ่านโพสนี้ และนิยามชื่อแต่ละตัวให้นะครับ

1. Quick Reply ใน OA Manager:
ในส่วนของการแชทระหว่างผู้ใช้กับ admin ใน OA Manager จะมีเมนูชื่อ Quick replies ที่สามารถตั้งค่าประโยค ที่เราพิมพ์ตอบเป็นประจำ เช่น ที่อยู่, เบอร์โทร หรือ เลขที่บัญชี ให้เป็น shortcut แบบคลิกเดียวได้ประโยคที่ต้องการมาเลย ไม่ต้องพิมพ์

2. Quick Reply ใน Dialogflow:
ใน Response ของ Dialogflow เราสามารถเลือกรูปแบบข้อความตอบกลับมายัง LINE ได้ โดยหนึ่งในข้อความที่มี มันชื่อว่า Quick Replies ซึ่งอันที่จริง Quick Replies ตรงนี้คือ Button Template นั่นเอง

3. Quick Reply ใน JSON:
Quick Reply ประเภทนี้คือ การสร้างปุ่ม recommendation ให้กับผู้ใช้ เพื่อทำ action ถัดไปได้ง่ายขึ้น โดยต้องเพิ่ม JSON แนบเข้าไปกับข้อความต่างๆที่ Chatbot จะตอบกลับ ซึ่งเมื่อข้อความที่แนบปรากฏ เราจะเห็นเป็นปุ่มเล็กๆเหนือช่องที่ให้พิมพ์ข้อความ

— ที่มา LINE Developers Thailand page: https://web.facebook.com/LINEDEVTH/posts/583339025844347

— ในเมนู Check Air Quality นั้น ผมจะให้ผู้ใช้ส่งข้อความให้ Bot แล้วให้ Bot ตอบกลับข้อความพร้อมฟีเจอร์ Quick Reply ( Quick Reply ใน JSON) ให้ผู้ใช้ส่ง Location กลับมาให้ Bot ครับ โดยผมจะไปเพิ่ม Code โดยกำหนดฟังก์ชันให้ตอบกลับข้อความของผู้ใช้พร้อมกำหนด Quick Reply เป็น Location Action ไปให้ผู้ใช้ด้วยครับ จากตัวอย่าง Code เราสามารถเพิ่มฟีเจอร์ Quick Reply ได้ใน Message Object ได้เลยครับ

— จะเห็นได้ว่าเมื่อผู้ใช้เลือกเมนู Check Air Quality จะเป็นการส่งข้อความให้ Bot และ Bot ก็ตอบกลับพร้อมฟีเจอร์ Quick Reply ให้ผู้ใช้ส่ง Location ให้ Bot ตามที่ต้องการครับ

— มาลองดูกันครับว่า Bot ทำงานได้ตามที่ต้องการหรือไม่


ท้ายสุด เป็นอย่างไรบ้างครับในการสร้าง Rich Menu และ Quick Reply ไม่ได้ยากอย่างที่คิดเลย เพียงแค่นำมากำหนดใช้ให้ง่ายกับผู้ใช้งาน แค่นี้ LINE Bot ของเราก็ดูดีขึ้นมาแล้วครับ ถ้าหากสังเกตในตัวอย่างในตอนต้นการสร้าง Rich Menu สามาถสร้างได้ซับซ้อนได้ตามความต้องการเพื่อเพิ่มลูกเล่นและประสบการณ์การใช้งานกับผู้ใช้ได้อย่างน่าสนใจจริงๆ ครับ ก็หวังว่าบทความนี้จะเป็นแนวทางในการนำไปใช้งานของเพื่อนๆ อีกเช่นเคยครับ Happy Learning and Happy Coding 💯💯💯


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12