สร้าง LINE Flex Message สวยๆ ด้วย n8n

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

Flex Message คืออะไร?

Flex Message เป็นข้อความ LINE รูปแบบพิเศษที่ใช้ JSON กำหนด layout โดยอ้างอิงแนวคิดจาก CSS Flexbox ประกอบด้วย:

Container: กรอบหลักของ message (Bubble หรือ Carousel)
Box: element จัดวาง layout
Text: ข้อความ
Image: รูปภาพ
Button: ปุ่มกดที่ลิงก์ไปหน้าเว็บหรือ action ได้

ตัวอย่าง use case:

การ์ดแจ้งออเดอร์ พร้อมรูปสินค้าและปุ่ม “ดูรายละเอียด”
ใบเสร็จสรุปยอดซื้อแบบ visual
รายการสินค้าแนะนำแบบ Carousel
บัตรนัดหมายพร้อมข้อมูลสถานที่

โครงสร้าง JSON ของ Flex Message

Flex Message พื้นฐานมีโครงสร้างดังนี้:

{
  "type": "flex",
  "altText": "ข้อความสำรอง (แสดงใน notification)",
  "contents": {
    "type": "bubble",
    "hero": {
      "type": "image",
      "url": "https://example.com/image.jpg",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "ชื่อสินค้า",
          "weight": "bold",
          "size": "xl"
        },
        {
          "type": "text",
          "text": "ราคา 299 บาท",
          "color": "#999999",
          "size": "sm"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "button",
          "style": "primary",
          "action": {
            "type": "uri",
            "label": "ดูรายละเอียด",
            "uri": "https://example.com/product"
          }
        }
      ]
    }
  }
}

ใช้ Flex Message Simulator

ก่อนเขียน JSON จริงใน n8n แนะนำให้ออกแบบด้วย LINE Flex Message Simulator ซึ่งให้ preview แบบ real-time ออกแบบเสร็จแล้ว export JSON มาใช้ใน n8n ได้เลย

สร้าง Flex Message ใน n8n

วิธีที่ 1: ใช้ Code Node

เพิ่ม Code Node (JavaScript) เพื่อสร้าง Flex JSON แบบ dynamic:

const orderData = $input.first().json;

const flexMessage = {
  type: "flex",
  altText: `ออเดอร์ใหม่ #${orderData.id}`,
  contents: {
    type: "bubble",
    body: {
      type: "box",
      layout: "vertical",
      contents: [
        {
          type: "text",
          text: `ออเดอร์ #${orderData.id}`,
          weight: "bold",
          size: "lg"
        },
        {
          type: "text",
          text: `ลูกค้า: ${orderData.customer_name}`,
          size: "sm",
          color: "#555555"
        },
        {
          type: "text",
          text: `ยอด: ${orderData.total} บาท`,
          size: "sm",
          color: "#111111",
          weight: "bold"
        }
      ]
    }
  }
};

return [{ json: { flexMessage } }];

วิธีที่ 2: ใช้ Set Node กับ Fixed JSON

ถ้า message มีโครงสร้างคงที่ สามารถใส่ JSON ใน Set Node แล้วใช้ expression แทรกค่าตัวแปรได้โดยตรง

ส่ง Flex Message ผ่าน HTTP Request

เพิ่ม HTTP Request Node ต่อจาก Code Node:

URL: https://api.line.me/v2/bot/message/reply หรือ /push
Method: POST
Body (JSON):

{
  "replyToken": "{{ $('Webhook').item.json.body.events[0].replyToken }}",
  "messages": [
    {{ $json.flexMessage }}
  ]
}

ตัวอย่างจริง: การ์ดแจ้งออเดอร์พร้อมปุ่ม

Workflow สำหรับร้านค้า:

Webhook (รับออเดอร์ใหม่)
  → Code Node (สร้าง Flex JSON จากข้อมูลออเดอร์)
  → HTTP Request (ส่งเข้า LINE OA ด้วย Push Message)

Flex Message ที่ได้จะแสดงเป็น card มีรูปสินค้า รายละเอียด และปุ่ม “จัดการออเดอร์” ที่ลิงก์ไปหน้า admin ของร้าน

Carousel: หลาย Bubble ในข้อความเดียว

ถ้าต้องการแสดงหลายรายการในข้อความเดียว ใช้ Carousel แทน Bubble:

{
  "type": "flex",
  "altText": "รายการสินค้าแนะนำ",
  "contents": {
    "type": "carousel",
    "contents": [
      { "type": "bubble", "..." },
      { "type": "bubble", "..." },
      { "type": "bubble", "..." }
    ]
  }
}

Carousel แสดงผลเป็น card ที่เลื่อนซ้าย-ขวาได้ เหมาะกับการแสดงสินค้าหลายรายการพร้อมกัน

บทความที่เกี่ยวข้องในซีรีส์: จัดการ LINE Rich Menu อัตโนมัติ

อยากเรียน n8n แบบเป็นระบบ ตั้งแต่เริ่มต้นจนสร้าง Workflow ใช้งานจริงได้ ลองดู คอร์สสอน n8n ที่ aiunlock.co