ในบทความก่อนหน้า เราได้เรียนรู้วิธีสร้าง LINE Rich Menu ผ่าน LINE Messaging API เพื่อปลดล็อกข้อจำกัดของ LINE OA Rich Menu แบบเดิม ๆ ที่จำกัดจำนวนช่องเพียง 6 ช่อง ซึ่งช่วยให้เราสามารถสร้างสรรค์ Rich Menu ที่มีช่องมากกว่า 8 ช่อง และกำหนด Action Area ได้อย่างอิสระ
บทความนี้ SPARK Factor จะพาไปทำความรู้จักกับ LINE OA Rich Menu รูปแบบใหม่ หรือที่เรียกว่า Alias Rich Menu หรือ Rich Menu แบบสลับได้ที่กำลังได้รับความนิยม ซึ่งจะช่วยเพิ่มลูกเล่นให้ LINE OA ของคุณดูน่าสนใจ และตอบโจทย์ความต้องการของลูกค้าได้มากยิ่งขึ้น
Alias Rich Menu คืออะไร?
Alias Rich Menu คือ ตัวช่วยให้คุณสลับ Rich Menu ใน LINE OA ได้ง่าย ๆ เพียงแค่ผู้ใช้กดปุ่มบน Rich Menu ก็จะสามารถแสดงผล Rich Menu ได้หลาย ๆ แบบใน LINE OA เดียวกันได้ โดยไม่ต้องสร้าง Rich Menu ใหม่ทั้งหมด
ทำไมต้องใช้ Alias Rich Menu?
- เพิ่มความยืดหยุ่นในการใช้งาน: Alias Rich Menu ช่วยให้เราสามารถแสดง Rich Menu ที่แตกต่างกันตามกลุ่มเป้าหมาย หรือตามสถานการณ์ต่างๆ ได้
- มอบประสบการณ์ที่ดีกว่าให้กับผู้ใช้: ผู้ใช้สามารถเข้าถึงข้อมูลและบริการต่าง ๆ ได้ง่ายขึ้น ผ่าน Rich Menu ที่ตรงกับความต้องการ
- ช่วยให้แบรนด์สามารถใส่ข้อมูลได้มากขึ้น เนื่องจากเป็น Rich Menu แบบสลับได้ ทำให้มีช่องในการใส่ข้อมูลเพิ่มมากขึ้น
- เพิ่มความน่าสนใจให้กับลูกค้าได้ การมี LINE OA Rich Menu ที่หลากหลาย จะช่วยเพิ่มความน่าสนใจมากกว่า Rich Menu แบบเดิม ๆ กระตุ้นให้ลูกค้ากดเข้ามาดูข้อมูลมากขึ้น
ตัวอย่างเช่น เราสามารถสร้าง LINE OA Rich Menu สำหรับบริการพิเศษได้ เช่น แนะนำช่องทางการติดตามของแบรนด์ทั้งหมด โดยลูกค้าสามารถกดสลับ เข้ามาดูช่องทางการติดตามของแบรนด์ทั้งหมด ผ่าน Rich Menu หลักได้ด้วยการกดปุ่ม Follow us เมื่อลูกค้ากดดูช่องทางการติดตามของแบรนด์ผ่าน Rich Menu แล้ว ลูกค้าก็สามารถกดปุ่ม Back กลับมาหน้า Rich Menu หลักได้เหมือนเดิม
ตัวอย่างการใช้งาน Alias Rich Menu
4 ขั้นตอนการทำ Rich Menu แบบ Alias
ในส่วนนี้ เราจะมาเรียนรู้วิธีสร้าง Alias Rich Menu ด้วย LINE Messaging API กัน
1. เตรียมรูปภาพ LINE OA Rich Menu
เช่นเดียวกับการสร้าง LINE OA Rich Menu ทั่วไป เราจำเป็นต้องเตรียมรูปภาพสำหรับ Rich Menu ก่อนโดย Rich Menu แต่ละอันที่เราต้องการสลับ จะต้องมีรูปภาพเป็นของตัวเอง
ข้อกำหนดของรูปภาพ LINE OA Rich Menu (อัปเดต)
- รูปแบบไฟล์: JPEG หรือ PNG
- ขนาดไฟล์: ไม่เกิน 1 MB
- ขนาดรูปภาพ: กว้าง 800 ถึง 2500 พิกเซล และสูงอย่างน้อย 250 พิกเซล
- อัตราส่วนภาพ (กว้าง / สูง): 1.45 หรือมากกว่า
ตัวอย่าง Rich Menu หลัก
ตัวอย่าง Rich Menu แนะนำช่องทางการติดตามเพื่อใช้สลับ
เครื่องมือออกแบบ รูปภาพ LINE OA Rich Menu
เราสามารถใช้เครื่องมือต่าง ๆ ในการออกแบบรูปภาพ Rich Menu ได้ เช่น
- Canva: เว็บไซต์ออกแบบกราฟิกออนไลน์ ที่มีเทมเพลต Rich Menu ให้เลือกใช้มากมาย
- Adobe Photoshop: โปรแกรมแต่งรูปยอดนิยม ที่สามารถใช้สร้าง Rich Menu ได้อย่างมืออาชีพ
2. สร้าง Rich Menu A
หลังจากเตรียมรูปภาพ Rich Menu เรียบร้อยแล้ว เราจะสร้าง Rich Menu แรก ผ่าน LINE Messaging API หากยังไม่เคยสร้าง Rich Menu ด้วย LINE Messaging API มาก่อน สามารถศึกษาเพิ่มเติมได้ในบทความ “5 ขั้นตอนง่ายๆ สร้าง LINE Rich Menu 8 ช่อง“
2.1 สร้าง Rich Menu ผ่าน Messaging API ด้วย Postman
เราสามารถใช้ Postman* ในการสร้าง Rich Menu ผ่าน LINE Messaging API ได้ง่ายๆ โดยไม่ต้องเขียนโค้ด
หมายเหตุ
Postman เป็นโปรแกรมคอมพิวเตอร์ ที่นักพัฒนา (Developer) ใช้งานในการส่ง Request และ ดู Response ของ API Service
โดยสามารถดาวน์โหลด Postman ได้ผ่านลิงก์ : https://www.postman.com/downloads/ หรือใช้งาน Postman ผ่าน Browser ได้ที่ลิงก์ : https://www.postman.com/
ขั้นตอนที่ 1: เปิด Postman และสร้าง HTTP Request ใหม่ (สามารถดูวิธีการสร้าง HTTP Request ได้ที่ 5 ขั้นตอนง่ายๆ สร้าง LINE Rich Menu 8 ช่อง )
ขั้นตอนที่ 2: เปลี่ยน Request Method เป็น POST และกำหนด URL เป็น https://api.line.me/v2/bot/richmenu
ขั้นตอนที่ 3: ไปที่ Headers และเพิ่ม Key 2 ตัว ดังนี้
- Key: Authorization, Value: Bearer {Channel Access Token}
- Key: Content-Type, Value: application/json
ขั้นตอนที่ 4: ไปที่ Body เลือก Raw และวาง JSON code ของ Rich Menu ที่เราต้องการสร้าง โดยในตัวอย่างนี้ เราจะสร้าง Rich Menu ที่มี Action Area 5 จุด ดังนี้
- Action Area Who we are: เชื่อมโยงไปยังเว็บไซต์ Spark Factor : https://sparkth.io/”
- Action Area Our Service : เชื่อมโยงไปยังเว็บไซต์ Spark Factor : https://sparkth.io/#our-services
- Action Area Follow us : สลับ Rich Menu (richmenuswitch) ไปเป็น richmenu-alias-b
- Action Area Digital Knowledge: เชื่อมโยงไปยังเว็บไซต์ https://www.facebook.com/sparkfactorth
- Action Area Contact Us: โทรหาเราด้วย tel:020966409
กำหนด Action Area สำหรับ Rich Menu A
JSON
{
“size”: {
“width”: 2500,
“height”: 1686
},
“chatBarText”: “Open/Close”,
“name”: “First Menu 311024”,
“selected”: true,
“areas”: [
{
“bounds”: {
“x”: 4,
“y”: 8,
“width”: 825,
“height”: 829
},
“action”: {
“type”: “uri”,
“uri”: “https://sparkth.io/”
}
},
{
“bounds”: {
“x”: 854,
“y”: 12,
“width”: 804,
“height”: 817
},
“action”: {
“type”: “uri”,
“uri”: “https://sparkth.io/#our-services”
}
},
{
“bounds”: {
“x”: 1671,
“y”: 12,
“width”: 812,
“height”: 825
},
“action”: {
“type”: “richmenuswitch”,
“data”: “richmenu-changed-to-b”,
“richMenuAliasId”: “richmenu-alias-b”
}
},
{
“bounds”: {
“x”: 17,
“y”: 850,
“width”: 1650,
“height”: 833
},
“action”: {
“type”: “uri”,
“uri”: “https://www.facebook.com/sparkfactorth”
}
},
{
“bounds”: {
“x”: 1683,
“y”: 854,
“width”: 809,
“height”: 832
},
“action”: {
“type”: “uri”,
“uri”: “tel:020966409”
}
}
]
}
ขั้นตอนที่ 5: กด Send เพื่อส่ง Request ระบบจะส่ง Response กลับมาพร้อม Rich Menu ID ให้นำ Rich Menu ID นี้ไปใช้ในขั้นตอนต่อไป
2.2 เชื่อมโยง Rich Menu B กับ Alias B
หลังจากสร้าง Rich Menu B เสร็จแล้ว เราจะเชื่อมโยง Rich Menu นี้กับ Alias B โดยใช้ Postman เช่นกัน
ขั้นตอนที่ 1: สร้าง HTTP Request ใหม่
ขั้นตอนที่ 2: เปลี่ยน Request Method เป็น POST และกำหนด URL เป็น https://api.line.me/v2/bot/richmenu/alias
ขั้นตอนที่ 3: ไปที่ Headers และเพิ่ม Key 1 ตัว ดังนี้
- Key: Authorization, Value: Bearer {Channel Access Token}
ขั้นตอนที่ 4: ไปที่ Body เลือก Raw และวาง JSON code ดังนี้
JSON
{
“richMenuAliasId”: “richmenu-alias-a”,
“richMenuId”: “{Rich Menu ID}”
}
{Rich Menu ID} คือ Rich Menu ID ของ Rich Menu A ที่เราได้รับจากขั้นตอนก่อนหน้า
ขั้นตอนที่ 5: กด Send เพื่อส่ง Request
3. สร้าง Rich Menu B
เราจะสร้าง Rich Menu B ในลักษณะเดียวกันกับ Rich Menu A ผ่าน LINE Messaging API ด้วย Postman โดยในตัวอย่างนี้ เราจะสร้าง Rich Menu ที่มี Action Area 3 จุด ดังนี้
- Action Area Facebook: เชื่อมโยงไปยังเว็บไซต์ https://www.facebook.com/sparkfactorth
- Action Area Instagram: เชื่อมโยงไปยังเว็บไซต์ https://www.instagram.com/sparkfactor_th/
- Action Area Back: สลับ Rich Menu (richmenuswitch) ไปเป็น richmenu-alias-a
3.1 สร้าง Rich Menu ผ่าน Messaging API ด้วย Postman
ขั้นตอนที่ 1: เปิด Postman และสร้าง HTTP Request ใหม่
ขั้นตอนที่ 2: เปลี่ยน Request Method เป็น POST และกำหนด URL เป็น https://api.line.me/v2/bot/richmenu
ขั้นตอนที่ 3: ไปที่ Headers และเพิ่ม Key 2 ตัว ดังนี้
- Key: Authorization, Value: Bearer {Channel Access Token}
- Key: Content-Type, Value: application/json
ขั้นตอนที่ 4: ไปที่ Body เลือก Raw และวาง JSON code ของ Rich Menu ที่เราต้องการสร้าง ดังนี้
JSON
{
“size”: {
“width”: 2500,
“height”: 1686
},
“chatBarText”: “Open/Close”,
“name” : “First Menu 311024”,
“selected”: true,
“areas”: [
{
“bounds”: {
“x”: 8,
“y”: 12,
“width”: 1234,
“height”: 1226
},
“action”: {
“type”: “uri”,
“uri”: “https://www.facebook.com/sparkfactorth”
}
},
{
“bounds”: {
“x”: 1251,
“y”: 0,
“width”: 1242,
“height”: 1246
},
“action”: {
“type”: “uri”,
“uri”: “https://www.instagram.com/sparkfactor_th/”
}
},
{
“bounds”: {
“x”: 12,
“y”: 1258,
“width”: 2488,
“height”: 427
},
“action”: {
“type”: “richmenuswitch”,
“data”: “richmenu-changed-to-a”,
“richMenuAliasId”: “richmenu-alias-a”
}
}
]
}
ขั้นตอนที่ 5: กด Send เพื่อส่ง Request ระบบจะส่ง Response กลับมาพร้อม Rich Menu ID ให้นำ Rich Menu ID นี้ไปใช้ในขั้นตอนต่อไป
3.2 เชื่อมโยง Rich Menu B กับ Alias B
หลังจากสร้าง Rich Menu B เสร็จแล้ว เราจะเชื่อมโยง Rich Menu นี้กับ Alias B โดยใช้ Postman เช่นกัน
ขั้นตอนที่ 1: สร้าง HTTP Request ใหม่
ขั้นตอนที่ 2: เปลี่ยน Request Method เป็น POST และกำหนด URL เป็น https://api.line.me/v2/bot/richmenu/alias
ขั้นตอนที่ 3: ไปที่ Headers และเพิ่ม Key 1 ตัว ดังนี้
- Key: Authorization, Value: Bearer {Channel Access Token}
ขั้นตอนที่ 4: ไปที่ Body เลือก Raw และวาง JSON code ดังนี้
JSON
{
“richMenuAliasId”: “richmenu-alias-b”,
“richMenuId”: “{Rich Menu ID}”
}
{Rich Menu ID} คือ Rich Menu ID ของ Rich Menu B ที่เราได้รับจากขั้นตอนก่อนหน้า
ขั้นตอนที่ 5: กด Send เพื่อส่ง Request
4. เปิดใช้งาน Rich Menu แบบ Alias
หลังจากที่เราสร้าง Rich Menu A และ Rich Menu B พร้อมทั้งเชื่อมโยงกับ Alias เรียบร้อยแล้ว ขั้นตอนสุดท้ายคือการเปิดใช้งาน Rich Menu แบบ Alias
4.1 การตั้งค่า Rich Menu Default ผ่าน Messaging API ด้วย Postman
ขั้นตอนที่ 1: เปิด Postman และสร้าง HTTP Request ใหม่
ขั้นตอนที่ 2: เปลี่ยน Request Method เป็น POST และกำหนด URL เป็น https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
{richMenuId} คือ Rich Menu ID ของ Rich Menu ที่เราต้องการตั้งเป็น Default
ขั้นตอนที่ 3: ไปที่ Headers และเพิ่ม Key 1 ตัว ดังนี้
- Key: Authorization, Value: Bearer {Channel Access Token}
ขั้นตอนที่ 4: กด Send เพื่อส่ง Request
ทดสอบการสลับ Rich Menu ผ่าน Alias
เมื่อตั้งค่า Rich Menu Default เสร็จแล้ว เราสามารถทดสอบการสลับ Rich Menu ผ่าน Alias ได้ โดยการกดปุ่ม Action Area ที่เราได้กำหนดไว้ใน Rich Menu A และ Rich Menu B
- หากเรากด Action Area ที่ปุ่ม Follow us จาก Rich Menu A ระบบจะสลับไปแสดงผล Rich Menu B
- หากเรากด Action Area ที่ปุ่มด้าน Back จาก Rich Menu B ระบบจะสลับกลับมาแสดงผล Rich Menu A
ข้อควรระวัง
- การสลับ Rich Menu ผ่าน Alias จะทำงานได้ก็ต่อเมื่อ เราได้สร้าง Alias และเชื่อมโยงกับ Rich Menu ที่ถูกต้องแล้ว
- หากผู้ใช้มีการตั้งค่า Per-user Rich Menu* Rich Menu Default อาจไม่แสดงผล เนื่องจาก Per-user Rich Menu มีลำดับความสำคัญสูงกว่า
หมายเหตุ
Per-user Rich Menu คือ ฟีเจอร์ของ LINE ที่ช่วยแสดงริชเมนูที่แตกต่างไปตามแต่ละบุคคลได้
คำถามเกี่ยวกับ Alias Rich Menu
Alias Rich Menu แตกต่างจาก Rich Menu แบบเดิมอย่างไร?
Rich Menu แบบเดิมจะแสดงผลได้รูปแบบเดียว ในขณะที่ Alias Rich Menu สามารถแสดงผลได้หลากหลาย สามารถกดสลับไปมาได้
มีข้อจำกัดในการใช้งาน Alias Rich Menu หรือไม่?
Alias Rich Menu มีข้อจำกัดบางประการ โดยต้องระวังเรื่องการสร้าง และการเชื่อมโยง โดยตัว Alias Rich Menu จะทำงานได้ก็ต่อเมื่อเราได้สร้าง Alias และเชื่อมโยงกับ LINE OA Rich Menu ที่ถูกต้องแล้วเท่านั้น รวมไปถึงหากผู้ใช้มีการตั้งค่า Per-user Rich Menu Rich Menu Default อาจไม่แสดงผล
สรุป
Alias Rich Menu คือ ฟีเจอร์ที่ช่วยให้คุณสามารถสร้าง LINE OA Rich Menu ได้หลากหลายรูปแบบ และสลับเปลี่ยนไปมาได้อย่างง่ายดาย สามารถนำเสนอข้อมูล และโปรโมชันที่แตกต่างกันได้อย่างเหมาะสม เช่น
- สร้าง Rich Menu หลักสำหรับแสดงบริการทั่วไป และ สร้าง Rich Menu รองสำหรับบริการเฉพาะ เช่น โปรโมชันพิเศษ, ช่องทางการติดตาม, หรือข้อมูลเพิ่มเติม
นอกจากนี้ Alias Rich Menu ก็ยังช่วยเพิ่มความน่าสนใจ สร้างการมีส่วนร่วมให้กับผู้ใช้ ทำให้ลูกค้าไม่เบื่อหน่าย อยากกดเข้ามาชมข้อมูลมากขึ้นอีกด้วย
สุดท้ายนี้หากคุณชอบคอนเทนต์ดี ๆ เกี่ยวกับการตลาดแบบนี้
คุณสามารถอ่านคอนเทนต์อื่น ๆ จากทาง SPARK Factor ได้ที่นี่
หรือ หากคุณกำลังมองหา Digital Marketing Agency ที่สามารถ
ช่วยให้ แบรนด์ของคุณถูกสื่อสารไปหาลูกค้า และ เพื่อนำไปสู่
การสร้างยอดขายได้คุณสามารถติดต่อมาหาเราได้ที่นี่ SPARK Factor
แหล่งข้อมูลเพิ่มเติม
