LINE Toolkit Studio

Base Image / ภาพเมนู LINE

ยังไม่มีภาพ

Base size (px) / สัดส่วนเมนู

ชื่อเมนูภายในระบบ (Menu Name)

ข้อความบนแถบแชท (Chat Bar Text)

อัปโหลดภาพ Rich Menu

Grid Presets:

2500 × 1686 px0/20 Areas

อัปโหลดภาพ Rich Menu (2500×1686 px)คลิกลากบนภาพ หรือเลือก Grid Preset เพื่อสร้างพื้นที่กด

เปิดลิงก์ / LIFF
ส่งข้อความ
สลับแท็บเมนู
Postback
ยังไม่กำหนด

พิกัด: -

ยังไม่ได้เลือกพื้นที่กด

คลิกกล่องบนผืนผ้าใบ หรือกด “แก้ไข” ในตาราง Areas เพื่อตั้งค่า Action

AREAS (0/20)พิกัดตามอัตราส่วนจริง LINE Native (Max 2500×1686)

ยังไม่มีพื้นที่กด — คลิกลากเมาส์บนภาพด้านบน หรือกด “+ เพิ่มปุ่มใหม่” ทางซ้าย

richmenu-schema.json

{
  "size": {
    "width": 2500,
    "height": 1686
  },
  "selected": true,
  "name": "แท็บ A (หน้าหลัก)",
  "chatBarText": "เมนูหลัก",
  "areas": []
}

1 Issue(s)OK Actions ConfiguredOK Base size (2500×1686)Waiting ImageOK Bounds in Canvas

ยังไม่มีพื้นที่กด (ต้องมีอย่างน้อย 1)

* พื้นที่ที่ยังไม่กำหนด Action จะไม่ถูกใส่ใน JSON และระบบจะไม่ให้ Deploy จนกว่าจะแก้ครบ

บัญชีลูกค้าที่จะส่ง (Target Client)

Channel Access Token

⭐ แท็บนี้เป็น Default Rich Menu

แท็บ A (หน้าหลัก)Default

Alias: tab-a

0 ปุ่ม

แท็บ B (โปรโมชั่น)

Alias: tab-b

0 ปุ่ม

1-Click Multi-Tab Auto Linker

สร้างแถบสลับแท็บด้านบนของทุกเมนู (สูง 400px บนขนาดเต็ม / 200px บนครึ่งจอ) แล้วผูก richmenuswitch ข้ามกันให้อัตโนมัติ

tab-aยังไม่มีปุ่มสลับ
tab-bยังไม่มีปุ่มสลับ

บัญชี LINE Official Account

2/12 cards · Carousel

การ์ด #1

เทมเพลต

รูปภาพ (URL แบบ https:// · อัตราส่วน 1:1)

ป้ายกำกับ (Tag)

ตำแหน่ง / ความเชี่ยวชาญ

หัวข้อ

คำอธิบายย่อ

ซ่อนปุ่ม Call-to-Action (No CTA / Pure Image Mode)

แสดงปุ่ม Call-to-Action ด้านล่างของการ์ด

ปุ่มหลัก (Call-to-Action)

ปุ่มรอง (ไม่บังคับ — เว้นข้อความว่างเพื่อซ่อน)

altText (ข้อความแจ้งเตือน / ห้องแชท)

flex-message.json

{
  "type": "flex",
  "altText": "แนะนำสำหรับคุณ",
  "contents": {
    "type": "carousel",
    "contents": [
      {
        "type": "bubble",
        "size": "mega",
        "body": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "paddingAll": "16px",
          "contents": [
            {
              "type": "box",
              "layout": "horizontal",
              "contents": [
                {
                  "type": "box",
                  "layout": "vertical",
                  "flex": 0,
                  "backgroundColor": "#E6F4EC",
                  "cornerRadius": "md",
                  "paddingStart": "8px",
                  "paddingEnd": "8px",
                  "paddingTop": "2px",
                  "paddingBottom": "2px",
                  "contents": [
                    {
                      "type": "text",
                      "text": "ว่างวันนี้",
                      "size": "xxs",
                      "color": "#0B7A3E",
                      "weight": "bold"
                    }
                  ]
                },
                {
                  "type": "filler"
                }
              ]
            },
            {
              "type": "text",
              "text": "ครูสมชาย ใจดี",
              "size": "lg",
              "weight": "bold",
              "color": "#111111",
              "wrap": true,
              "maxLines": 2
            },
            {
              "type": "text",
              "text": "ติวคณิตศาสตร์ ม.ปลาย",
              "size": "sm",
              "color": "#555555",
              "wrap": true
            },
            {
              "type": "text",
              "text": "ประสบการณ์สอน 10 ปี เน้นเข้าใจพื้นฐานและเทคนิคทำข้อสอบ",
              "size": "sm",
              "color": "#8C8C8C",
              "wrap": true,
              "maxLines": 4,
              "margin": "sm"
            }
          ]
        },
        "footer": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "paddingAll": "12px",
          "contents": [
            {
              "type": "button",
              "style": "primary",
              "height": "sm",
              "color": "#06C755",
              "action": {
                "type": "message",
                "label": "จองคิว",
                "text": "ขอจองคิวกับครูสมชาย"
              }
            },
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "color": "#555555",
              "action": {
                "type": "uri",
                "label": "ดูโปรไฟล์",
                "uri": "https://line.me"
              }
            }
          ]
        }
      },
      {
        "type": "bubble",
        "size": "mega",
        "body": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "paddingAll": "16px",
          "contents": [
            {
              "type": "box",
              "layout": "horizontal",
              "contents": [
                {
                  "type": "box",
                  "layout": "vertical",
                  "flex": 0,
                  "backgroundColor": "#FEF3E2",
                  "cornerRadius": "md",
                  "paddingStart": "8px",
                  "paddingEnd": "8px",
                  "paddingTop": "2px",
                  "paddingBottom": "2px",
                  "contents": [
                    {
                      "type": "text",
                      "text": "ขายดี",
                      "size": "xxs",
                      "color": "#B45309",
                      "weight": "bold"
                    }
                  ]
                },
                {
                  "type": "filler"
                }
              ]
            },
            {
              "type": "text",
              "text": "ชื่อสินค้า",
              "size": "lg",
              "weight": "bold",
              "color": "#111111",
              "wrap": true,
              "maxLines": 2
            },
            {
              "type": "text",
              "text": "฿390",
              "size": "md",
              "weight": "bold",
              "color": "#06C755"
            },
            {
              "type": "text",
              "text": "รายละเอียดสินค้าแบบสั้น 1–2 บรรทัด",
              "size": "sm",
              "color": "#8C8C8C",
              "wrap": true,
              "maxLines": 4,
              "margin": "sm"
            }
          ]
        },
        "footer": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "paddingAll": "12px",
          "contents": [
            {
              "type": "button",
              "style": "primary",
              "height": "sm",
              "color": "#06C755",
              "action": {
                "type": "uri",
                "label": "สั่งซื้อเลย",
                "uri": "https://line.me"
              }
            }
          ]
        }
      }
    ]
  }
}

พร้อมใช้งานกับ LINE Messaging API

Settings

Tap Areas

Rich Menu JSON

Deploy to LINE

Manage Tabs

Account Profile

Card Studio