สร้าง Slack Block Kit

ประกอบ Slack Block Kit payload ทั้ง section, header, divider, button และ input พร้อม preview แบบสด จัดเรียงใหม่ได้ คัดลอก JSON ไปใช้ได้เลย ฟรี ในเบราว์เซอร์

Loading tool...

สร้าง Slack Block Kit คืออะไร?

Slack Block Kit Builder ช่วยประกอบ payload ข้อความ Slack แบบรวยข้อมูลด้วยภาพ: เพิ่ม section, header, divider, button, input สลับลำดับอิสระ ดู preview สไตล์ Slack ที่สะท้อนทุกการแก้ไข แล้วคัดลอก JSON ไปใช้ใน webhook หรือ API ได้ทันที

ประโยชน์หลัก

ได้ JSON Block Kit ที่มีโครงสร้างโดยไม่ต้องอ่าน API docs
Preview สดสะท้อนเลย์เอาต์และเนื้อหาขณะพิมพ์
สลับและลบ block ได้โดยไม่ต้องแตะ JSON
Payload พร้อมวางสำหรับ webhook, API และ modal

กรณีการใช้งาน

•ออกแบบข้อความแจ้งเตือนของ CI และ monitoring bot
•ประกอบปุ่มอนุมัติและ input modal สำหรับ workflow
•ร่างประกาศหรูหราสำหรับช่องทีม
•สอนทีมโครงสร้าง Block Kit ด้วยตัวอย่างสด
•ปรับแต่งคำตอบของบอทโดยไม่ต้อง deploy ใหม่

สร้างข้อความ Slack

เพิ่ม block แรก: เลือกประเภท block - section, header, divider, button หรือ input - แล้วกด Add block
กรอกเนื้อหา: แต่ละ block แสดงเฉพาะฟิลด์ของตัวเอง: ข้อความสำหรับ section/header, action ID และ URL สำหรับปุ่ม, label และ placeholder สำหรับ input
จัดเรียงเลย์เอาต์: สลับลำดับด้วยลูกศรขึ้นลง ขณะที่ preview สะท้อนว่า Slack จะเรนเดอร์อย่างไร
คัดลอกไปใช้ในแอป: คัดลอก JSON payload ไปวางใน webhook, chat.postMessage API หรือคำนิยาม modal ได้เลย

คุณสมบัติหลัก

ห้าประเภท block: section, header, divider, button และ input
Preview สไตล์ Slack สะท้อน payload แบบเรียลไทม์
สลับลำดับ block ขึ้นลงได้โดยไม่ต้องแตะ JSON
Button รองรับ action ID และ URL เสริม
Input มี label, placeholder และ action ID ครบ
คัดลอก payload ทั้งชุดได้ในคลิกเดียว

คำถามที่พบบ่อย

Block Kit คืออะไร?

Block Kit คือ UI framework ของ Slack สำหรับข้อความ modal และ home tab ของแอป แทนข้อความล้วน คุณประกอบ JSON แบบมีโครงสร้าง - section, header, button, input - ที่ Slack เรนเดอร์เป็น layout หรูหราแบบ interactive

นำ payload ที่สร้างไปวางที่ไหนได้บ้าง?

ได้ทุกที่ที่ Slack รับ blocks array: incoming webhook, chat.postMessage, chat.update, คำนิยาม modal และ attachment payload นี้เป็น JSON ที่วางใช้ได้ทันที

Preview ตรงกับที่ Slack เรนเดอร์แม่นแค่ไหน?

เป็นภาพจำลองด้านเลย์เอาต์ ลำดับ และเนื้อหา - ข้อความ ปุ่ม และรูปทรง input เหมือนกัน แต่รายละเอียดพิกเซล (ฟอนต์ สถานะ hover การขยาย markdown) เกิดขึ้นใน Slack เท่านั้น

ข้อความของฉันถูกเก็บที่ไหนหรือไม่?

ไม่ Block ทั้งหมดอยู่ในหน่วยความจำของเบราว์เซอร์ ไม่ส่งและไม่บันทึกอะไร เครื่องมือใช้ offline ได้เมื่อโหลดแล้ว

คู่มือฉบับละเอียด

Slack Block Kit Builder: ประกอบข้อความริชโดยไม่ต้องเขียนโค้ด

อ่านคู่มือฉบับเต็ม →

สร้าง Slack Block Kit

Section

เพิ่ม block

Preview

Payload JSON

{
  "blocks": [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "Hello from Block Kit"
      }
    }
  ]
}

เกี่ยวกับเครื่องมือนี้

Slack Block Kit Builder ช่วยประกอบ payload ข้อความ Slack แบบรวยข้อมูลด้วยภาพ: เพิ่ม section, header, divider, button, input สลับลำดับอิสระ ดู preview สไตล์ Slack ที่สะท้อนทุกการแก้ไข ขณะที่ JSON payload สร้างใหม่สด ๆ คัดลอกผลลัพธ์ไปวางใน webhook, chat.postMessage API หรือ modal ได้เลย - ไม่มีการเก็บหรือส่งข้อมูล

ทำไมต้องสร้าง Block Kit payload ด้วยภาพ?

•JSON ของ Block Kit ซ้อนลึกและตรงไปตรงมาแบบเคร่งครัด - รูปทรงผิดทีเดียวข้อความพังทั้งชุด
•เห็น preview คู่กับ editor จับความผิดเลย์เอาต์ได้ก่อนข้อความไปโผล่ในช่องจริง
•สลับลำดับด้วยลูกศรดีกว่าตัดแปะชิ้น JSON ด้วยมือ
•ปุ่มและ input ต้องมี action ID และรูปทรงข้อความที่เฉพาะเจาะจง ฟอร์มกรอกให้เอง
•ประกอบในเครื่อง ทำให้ฉบับร่างของบอทและดีไซน์ภายในยังเป็นส่วนตัว

คุณสมบัติเด่น

✓ห้าประเภท block: section, header, divider, actions พร้อมปุ่ม และ input
✓Preview สไตล์ Slack สะท้อน block ขณะพิมพ์
✓สลับและลบ block ด้วยปุ่มคลิกเดียว
✓ปุ่มรองรับ action ID และ URL; input มี label และ placeholder
✓คัดลอก payload ทั้งชุดได้ในคลิกเดียว

Loading tool...