เรากำลังเลิกใช้งาน API ภายในองค์กร และหากต้องการรายละเอียดเพิ่มเติมและเรียนรู้วิธีย้ายไปใช้ API ระบบคลาวด์รุ่นใหม่ของเรา โปรดดูเอกสารการเลิกใช้งาน API ภายในองค์กรของเรา

การส่งข้อความแบบอินเทอร์แอคทีฟ

คู่มือนี้จะสอนให้คุณเข้าใจวิธีส่งตัวเลือกข้อความแบบอินเทอร์แอคทีฟแต่ละรายการ ข้อความแบบอินเทอร์แอคทีฟช่วยให้ผู้ใช้มีวิธีค้นหาและเลือกสิ่งที่ตนต้องการจากธุรกิจของคุณบน WhatsApp ที่ง่ายยิ่งขึ้น ในระหว่างการทดสอบ แชทบอทที่ใช้ฟีเจอร์การส่งข้อความแบบอินเทอร์แอคทีฟจะมีอัตราการตอบกลับและคอนเวอร์ชั่นที่สูงกว่าอย่างมากเมื่อเทียบกับแบบข้อความ

ประเภทของข้อความแบบอินเทอร์แอคทีฟมีดังต่อไปนี้

  • ข้อความแบบรายการ: ข้อความที่มีเมนูตัวเลือกสูงสุด 10 รายการ ข้อความประเภทนี้จะช่วยผู้ใช้สามารถทำการเลือกขณะโต้ตอบกับธุรกิจได้โดยง่ายและสอดคล้องกันมากยิ่งขึ้น
  • ข้อความแบบปุ่มตอบกลับ: ข้อความที่มีตัวเลือกสูงสุด 3 รายการ โดยที่แต่ละตัวเลือกจะเป็นปุ่ม ข้อความประเภทนี้จะช่วยให้ผู้ใช้สามารถเลือกจากเมนูขณะโต้ตอบกับธุรกิจได้รวดเร็วยิ่งขึ้น ปุ่มตอบกลับจะช่วยให้ผู้ใช้ได้รับประสบการณ์แบบเดียวกันกับเทมเพลตแบบอินเทอร์แอคทีฟที่มีปุ่ม
  • ข้อความที่มีสินค้ารายการเดียว: ข้อความที่มีสินค้ารายการเดียวจากสินค้าคงคลังของธุรกิจ โปรดดูข้อมูลเพิ่มเติมที่แชร์สินค้ากับลูกค้า
  • ข้อความที่มีสินค้าหลายรายการ: ข้อความที่มีตัวเลือกสินค้าสูงสุด 30 รายการจากสินค้าคงคลังของธุรกิจ โปรดดูข้อมูลเพิ่มเติมที่แชร์สินค้ากับลูกค้า
  • ข้อความขอตำแหน่งที่ตั้ง: ข้อความที่ขอตำแหน่งที่ตั้งของผู้ใช้
  • ข้อความแบบขั้นตอน: ข้อความสำหรับการโต้ตอบที่มีการจัดโครงสร้าง โปรดดูข้อมูลเพิ่มเติมที่ ข้อความแบบขั้นตอน

ข้อมูลจำเพาะของข้อความแบบอินเทอร์แอคทีฟ

  • คุณสามารถผสานรวมข้อความแบบอินเทอร์แอคทีฟต่างๆ เข้าด้วยกันในขั้นตอนเดียวกันได้
  • ผู้ใช้จะไม่สามารถเลือกตัวเลือกพร้อมกันได้มากกว่า 1 รายการ จากข้อความแบบรายการหรือข้อความแบบปุ่ม แต่ผู้ใช้สามารถกลับไปเปิดข้อความก่อนหน้าอีกครั้งได้
  • คุณไม่สามารถใช้ข้อความแบบรายการหรือแบบปุ่มตอบกลับเป็นการแจ้งเตือนได้ ในปัจจุบัน คุณจะต้องส่งข้อความภายใน 24 ชั่วโมงนับจากข้อความที่ผู้ใช้ส่งมาล่าสุดเท่านั้น หากคุณพยายามส่งข้อความนอกช่วงเวลา 24 ชั่วโมง คุณจะได้รับข้อความแสดงข้อผิดพลาด
  • แพลตฟอร์มที่รองรับ: iOS, Android และเว็บไซต์ (เว็บไซต์ไม่รองรับข้อความแบบขั้นตอน)

ดูว่าข้อความตัวอักษรเป็นอย่างไรเมื่อเทียบกับข้อความแบบอินเทอร์แอคทีฟ


ดูตัวอย่างที่จะแสดงให้เห็นว่าข้อความแบบรายการและปุ่มตอบกลับจะผสานรวมอยู่ในขั้นตอนเดียวกันได้อย่างไร

เกิดข้อผิดพลาดขึ้น
เรากำลังประสบปัญหาในการเล่นวิดีโอนี้

ภาพรวม

เหตุใดจึงควรใช้

ความเข้าใจของผู้ใช้

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

ผลลัพธ์ทางธุรกิจ

ในระหว่างการทดสอบ แชทบอทที่ใช้ฟีเจอร์การส่งข้อความแบบอินเทอร์แอคทีฟมีอัตราการตอบกลับและคอนเวอร์ชั่นที่สูงกว่าอย่างมากเมื่อเทียบกับแบบข้อความ

ปรับให้เหมาะกับแต่ละบุคคล

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

ไม่ต้องใช้เทมเพลต

ข้อความแบบอินเทอร์แอคทีฟไม่ต้องใช้เทมเพลตหรือขออนุมัติล่วงหน้า

เมื่อใดที่ควรใช้

ข้อความแบบรายการเหมาะอย่างยิ่งในการนำเสนอตัวเลือกหลายๆ ตัวเลือก เช่น

  • เมนูการดูแลลูกค้าหรือคำถามที่พบบ่อย
  • เมนูสั่งกลับบ้าน
  • การเลือกร้านค้าหรือสถานที่ตั้งใกล้เคียง
  • เวลาที่ว่างให้จองได้
  • การเลือกคำสั่งซื้อล่าสุดเพื่อสั่งซื้อซ้ำ

ปุ่มตอบกลับเหมาะอย่างยิ่งสำหรับการตอบกลับอย่างรวดเร็วโดยใช้ชุดตัวเลือกที่มีอยู่อย่างจำกัด เช่น

  • การเติมเงินสำหรับแพ็คเกจอินเทอร์เน็ต
  • การเปลี่ยนรายละเอียดส่วนบุคคล
  • การสั่งซื้อคำสั่งซื้อก่อนหน้านี้ซ้ำอีกครั้ง
  • การขอคืนสินค้า
  • การเพิ่มรายการเสริมที่จะระบุหรือไม่ก็ได้ในการสั่งซื้ออาหาร
  • การเลือกวิธีการชำระเงิน

ปุ่มตอบกลับจะเป็นประโยชน์โดยเฉพาะอย่างยิ่งในกรณีการใช้งานแบบ "สำหรับแต่ละบุคคลโดยเฉพาะ" ซึ่งการตอบกลับแบบทั่วๆ ไปอาจไม่เพียงพอ

ข้อความแบบขั้นตอนเหมาะที่สุดสำหรับการสื่อสารแบบมีโครงสร้างผ่านหน้าจอเดียวหรือหลายหน้าจอ เช่น

  • การจองการนัดหมาย
  • การเรียกดูสินค้า
  • การรวบรวมคำติชมจากลูกค้า
  • การหาโอกาสในการสร้างยอดขายใหม่ๆ

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

วิธีการใช้งาน

ที่ระดับ API ข้อความแบบอินเทอร์แอคทีฟจะมีการตั้งค่าโดยการระบุ type ของข้อความเป็น interactive และเพิ่มอ็อบเจ็กต์ interactive ทั้งนี้ โดยทั่วไปแล้ว ข้อความเหล่านี้ประกอบไปด้วย 4 ส่วนหลักๆ ได้แก่ header, body, footer และ action

{
  "recipient_type": "individual",
  "to" : "whatsapp-id",
  "type": "interactive" 
  "interactive":{
    "type": "list" | "button" | ...,
    "header": {},
    "body": {},
    "footer": {},
    "action": {}
  }
}
สำหรับข้อความแบบรายการ ส่วนต่างๆ จะประกอบเข้าด้วยกันในลักษณะดังนี้

สำหรับข้อความแบบปุ่มตอบกลับ ส่วนต่างๆ จะประกอบเข้าด้วยกันในลักษณะดังนี้

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีส่งข้อความเหล่านี้ที่ด้านล่าง

เริ่มต้นใช้งาน

ก่อนจะส่งแต่ละข้อความ คุณต้องเรียกดู WhatsApp ID ของผู้รับด้วยการเรียกใช้โหนด /contacts

เราแนะนำให้คุณตั้งค่า Webhooks เพื่อรับการแจ้งเตือนเมื่อมีข้อความเข้าและสถานะข้อความ เมื่อใช้วิธีนี้ คุณจะสามารถติดตามได้ว่าข้อความถูกส่งหรือไม่ รวมถึงติดตามคำตอบจากผู้ใช้ได้อีกด้วย โปรดดูข้อมูลเพิ่มเติมที่ Webhooks

ขั้นตอนที่ 1: รวมอ็อบเจ็กต์ interactive ของคุณ

ข้อความแบบรายการ

หากต้องการส่งข้อความแบบรายการ คุณจะต้องรวมอ็อบเจ็กต์ interactive ที่มีประเภทเป็น list พร้อมส่วนประกอบดังต่อไปนี้

อ็อบเจ็กต์คำอธิบาย

header

ระบุหรือไม่ก็ได้

หากคุณตัดสินใจที่จะใส่อ็อบเจ็กต์นี้เอาไว้ด้วย คุณจะต้องตั้งค่า type ของ header เป็น text และเพิ่มช่อง text ที่มีเนื้อหาตามที่ต้องการ สูงสุด 60 อักขระ


ดูช่อง header ทั้งหมดที่ใช้งานได้

body

จำเป็นต้องระบุ

เนื้อความของข้อความ สูงสุด 1,024 อักขระ


ดูช่อง body ทั้งหมดที่ใช้งานได้

footer

ระบุหรือไม่ก็ได้

ส่วนท้ายของข้อความ


ดูช่อง footer ทั้งหมดที่ใช้งานได้

action

จำเป็นต้องระบุ

ในส่วน action คุณจะต้องซ้อนทับส่วนประกอบต่างๆ ดังนี้

  • ช่อง button ที่มีเนื้อหาสำหรับปุ่มของคุณ โดยมีอักขระได้สูงสุด 20 ตัว
  • อ็อบเจ็กต์ section อย่างน้อย 1 รายการ (สูงสุด 10 รายการ) โดยมีอักขระได้สูงสุด 24 ตัวสำหรับ title ของ section

ในส่วน section คุณจะต้องเพิ่มอ็อบเจ็กต์ rows อย่างน้อย 1 รายการ title สำหรับแถว 1 แถวจะมีอักขระได้สูงสุด 24 ตัว ส่วน description สำหรับแถว 1 แถวจะมีอักขระได้สูงสุด 72 ตัว


ดูช่อง action ทั้งหมดที่ใช้งานได้

ดูช่อง section ทั้งหมดที่ใช้งานได้

เมื่อถึงขั้นตอนสุดท้าย อ็อบเจ็กต์ interactive ของคุณควรมีลักษณะดังนี้

"interactive":{
  "type": "list",
  "header": {
    "type": "text",
    "text": "your-header-content"
  },
  "body": {
    "text": "your-text-message-content"
  },
  "footer": {
    "text": "your-footer-content"
  },
  "action": {
    "button": "cta-button-content",
    "sections":[
      {
        "title":"your-section-title-content",
        "rows": [
          {
            "id":"unique-row-identifier",
            "title": "row-title-content",
            "description": "row-description-content",           
          }
        ]
      },
      {
        "title":"your-section-title-content",
        "rows": [
          {
            "id":"unique-row-identifier",
            "title": "row-title-content",
            "description": "row-description-content",           
          }
        ]
      },
      ...
    ]
  }
}

ปุ่มตอบกลับ

หากต้องการส่งข้อความแบบปุ่มตอบกลับ คุณจะต้องรวมอ็อบเจ็กต์ interactive ที่มีประเภทเป็น button พร้อมส่วนประกอบดังต่อไปนี้

อ็อบเจ็กต์คำอธิบาย

header

ระบุหรือไม่ก็ได้

สำหรับข้อความแบบอินเทอร์แอคทีฟ button คุณสามารถใช้ส่วนหัวที่มีประเภทต่างๆ ได้แก่ text, video, image หรือ document


เมื่อเลือก type ของคุณแล้ว ให้เพิ่มอ็อบเจ็กต์/ช่องที่สอดคล้องกันพร้อมข้อมูลเพิ่มเติมดังนี้

  • สำหรับประเภท video, image และ document: เพิ่มอ็อบเจ็กต์ media
  • สำหรับประเภท text: เพิ่มช่อง text พร้อมเนื้อหาตามที่ต้องการ

ตัวอย่าง

"header": {
      "type": "text" | "image" | "video" | "document",
      "text": "your text"
      # OR
      "document": {
        "id": "your-media-id",
        "filename": "some-file-name"
      }
      # OR
      "document": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name",
        },
        "filename": "some-file-name"
      },
      # OR
      "video": {
        "id": "your-media-id"
      }
      # OR
      "video": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
      # OR
      "image": {
        "id": "your-media-id"
      }
      # OR
      "image": {
        "link": "http(s)://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
    }

ดูช่อง header ทั้งหมดที่ใช้งานได้

body

จำเป็นต้องระบุ

ดูช่อง body ทั้งหมดที่ใช้งานได้

footer

ระบุหรือไม่ก็ได้

ดูช่อง footer ทั้งหมดที่ใช้งานได้

action

จำเป็นต้องระบุ

คุณจะต้องเพิ่ม button อย่างน้อย 1 รายการ และรวม type, title และ id เอาไว้สำหรับปุ่มต่างๆ ของคุณด้วย คุณจะเพิ่มปุ่มมากกว่า 3 ปุ่มไม่ได้ title มีอักขระได้สูงสุด 20 ตัว

คุณจะตั้งค่า ID โดยขึ้นต้นหรือลงท้ายด้วยการเว้นวรรคไม่ได้


ตัวอย่าง

"action": {
      "buttons": [
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "First Button’s Title" 
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "Second Button’s Title" 
          }
        }
      ] 
    }

ดูช่อง action ทั้งหมดที่ใช้งานได้

เมื่อถึงขั้นตอนสุดท้าย อ็อบเจ็กต์ interactive ควรมีลักษณะดังนี้

"interactive": {
    "type": "button",
    "header": { # optional
      "type": "text" | "image" | "video" | "document",
      "text": "your text"
      # OR
      "document": {
        "id": "your-media-id",
        "filename": "some-file-name"
      }
      # OR
      "document": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name",
        },
        "filename": "some-file-name"
      },
      # OR
      "video": {
        "id": "your-media-id"
      }
      # OR
      "video": {
        "link": "the-provider-name/protocol://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
      # OR
      "image": {
        "id": "your-media-id"
      }
      # OR
      "image": {
        "link": "http(s)://the-url",
        "provider": {
          "name": "provider-name"
        }
      }
    }, # end header
    "body": {
      "text": "your-text-body-content"
    },
    "footer": { # optional
      "text": "your-text-footer-content"
    },
    "action": {
      "buttons": [
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "First Button’s Title" 
          }
        },
        {
          "type": "reply",
          "reply": {
            "id": "unique-postback-id",
            "title": "Second Button’s Title" 
          }
        }
      ] 
    } # end action   
  } # end interactive

ข้อความขอตำแหน่งที่ตั้ง

ข้อความขอตำแหน่งที่ตั้งจะมีข้อความสำหรับเนื้อความและปุ่มส่งตำแหน่งที่ตั้งให้ผู้ใช้สามารถแตะได้ เมื่อแตะที่ปุ่มนี้ ระบบจะแสดงหน้าจอแชร์ตำแหน่งที่ตั้งขึ้นมา ซึ่งผู้ใช้สามารถใช้แชร์ตำแหน่งที่ตั้งของตนได้

หากต้องการส่งข้อความขอตำแหน่งที่ตั้ง ก่อนอื่น ให้รวมอ็อบเจ็กต์ interactive ที่มีข้อความที่คุณต้องการให้แสดงในข้อความเอาไว้ด้วยดังนี้

{
  "type": "location_request_message",
  "body": {
    "type": "text",
    "text": "<TEXT>"
  },
  "action": {
    "name": "send_location" 
  }
}
คุณสมบัติคำอธิบาย

type

ตั้งค่าเป็น location_request_message

body.type

ตั้งค่าเป็น text

body.text

ตั้งค่าเป็นข้อความที่คุณต้องการให้แสดงอยู่เหนือปุ่มส่งตำแหน่งที่ตั้ง

action.name

ตั้งค่าเป็น send_location

ข้อความแบบขั้นตอน

ข้อความแบบขั้นตอนมีปุ่มกระตุ้นให้ดำเนินการที่ผู้ใช้สามารถแตะได้ การแตะปุ่มจะแสดงขั้นตอนแบบกำหนดเอง

หากต้องการส่งข้อความแบบขั้นตอน คุณจะต้องรวมอ็อบเจ็กต์ interactive ที่มีประเภทเป็น flow ดูรายละเอียดทั้งหมดได้ที่นี่

ขั้นตอนที่ 2: เพิ่มพารามิเตอร์ข้อความทั่วไป

เมื่อคุณมีอ็อบเจ็กต์ interactive แล้ว ให้นำพารามิเตอร์อื่นๆ ที่ประกอบขึ้นเป็นข้อความ ได้แก่ recipient_type, to และ type มาต่อท้าย โปรดอย่าลืมตั้งค่า type เป็น interactive

{
  "recipient_type": "individual",
  "to" : "whatsapp-id", // WhatsApp ID of your recipient
  "type": "interactive",
  "interactive":{
    // Your interactive object  
   }
  }

โปรดดูพารามิเตอร์ทั่วไปที่ใช้กับข้อความทุกประเภทที่นี่

ขั้นตอนที่ 3: เรียกใช้ POST ไปยัง /messages

เรียกใช้ POST ไปยังตำแหน่งข้อมูล /messages โดยมีอ็อบเจ็กต์ JSON ที่คุณรวมไว้ในขั้นตอนที่ 1 และ 2 หากส่งข้อความสำเร็จ คุณจะได้รับการตอบกลับต่อไปนี้

{
  "messages": [{
    "id": "{message-id}"
  }]
}

ขั้นตอนที่ 4: ตรวจสอบ Webhooks

หากคุณตั้งค่า webhooks ของคุณ ให้ตรวจดูการเปลี่ยนแปลงต่างๆ ของสถานะข้อความ รวมถึงการตอบกลับจากผู้ใช้

Webhooks ของผู้ใช้ที่ตอบกลับข้อความแบบอินเทอร์แอคทีฟจะมีส่วนประกอบใหม่รวมอยู่ด้วย องค์ประกอบนี้เรียกว่า interactive ซึ่งจะมีข้อมูลเกี่ยวกับตัวเลือกของผู้ใช้อยู่ โปรดดูข้อมูลเพิ่มเติมที่ Webhooks, ส่วนประกอบ

ตัวอย่างเช่น ต่อไปนี้เป็นคำขอ Webhook ที่อธิบายถึงผู้ใช้ที่แชร์ตำแหน่งที่ตั้งของตน

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "12345",
      "changes": [
        {
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "12345",
              "phone_number_id": "12345"
            },
            "contacts": [
              {
                "profile": {
                  "name": "John Doe"
                },
                "wa_id": "12345"
              }
            ],
            "messages": [
              {
                "context": {
                  "from": "12345",
                  "id": "test-id"
                },
                "from": "123450",
                "id": "test-id",
                "timestamp": "16632",
                "location": {
                  "address": "1071 5th Ave, New York, NY 10128", #Optional
                  "latitude": 37.421996751527,
                  "longitude": -122.08407156636,
                  "name": "Solomon R. Guggenheim Museum" #Optional
                },
                "type": "location"
              }
            ]
          },
          "field": "messages"
        }
      ]
    }
  ]
}

ส่วนประกอบ location ภายในเพย์โหลดจะมีละติจูดและลองจิจูดของผู้ใช้อยู่ โปรดทราบว่า address และ name นั้นจะระบุหรือไม่ก็ได้สำหรับผู้ใช้ และอาจไม่ได้ถูกรวมเอาไว้ด้วย

"location": {
  "address": "1071 5th Ave, New York, NY 10128", #Optional
  "latitude": 40.782910059774,
  "longitude": -73.959075808525,
  "name": "Solomon R. Guggenheim Museum" #Optional
}