ย้อนกลับไปที่ "ข่าวสำหรับผู้พัฒนา"

Creating Surveys with WhatsApp Flows

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

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

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

การจัดทำแบบสำรวจด้วย WhatsApp Flows

ข้อกำหนดเบื้องต้น

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

กระบวนการ

  1. สร้างแอพ Flask
  2. เขียนโค้ด Python สำหรับการสร้างและเผยแพร่ Flows โดยใช้ WhatsApp Flows API โค้ด Python จะส่ง Flow ที่เผยแพร่โดยใช้ API ระบบคลาวด์ด้วยเช่นกัน
  3. สร้าง Webhook สำหรับฟังข้อความแชท
  4. เรียกใช้แอพพลิเคชั่น

หากคุณต้องการดูตัวอย่างโปรเจ็กต์ คุณสามารถดูโค้ดที่เสร็จสมบูรณ์แล้วได้

การสร้างแบบสำรวจด้วย WhatsApp Flows API

คุณสามารถสร้าง Flow ได้ 2 วิธี ซึ่งได้แก่ การใช้ UI Flow Builder หรือ Flows API โดยบทแนะนำการใช้งานนี้จะใช้ Flows API เพื่อตั้งค่าแบบสำรวจโดยใช้โปรแกรม

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

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

สร้างแอพ Flask

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

python -m venv venv
        

จากนั้นใช้คำสั่งด้านล่างนี้เพื่อเปิดใช้งานสภาพแวดล้อมดังกล่าว

source venv/bin/activate
        

ถัดไป ให้ใช้คำสั่งต่อไปนี้เพื่อติดตั้งแพ็คเกจที่จำเป็น

pip install requests flask python-dotenv
        

คุณจะใช้ Flask เพื่อสร้างเส้นทางและโต้ตอบกับ Flows API ขอส่งคำขอ HTTP และใช้ python-dotenv เพื่อโหลดตัวแปรสภาพแวดล้อม

ตอนนี้ให้สร้างไฟล์สภาพแวดล้อมชื่อ .env และวางข้อมูลต่อไปนี้

VERIFY_TOKEN =
ACCESS_TOKEN =
WHATSAPP_BUSINESS_ACCOUNT_ID =
PHONE_NUMBER_ID =
        

กำหนดค่าตามข้อมูลบัญชีผู้พัฒนาของคุณ โดยคุณสามารถใช้สตริงใดก็ได้สำหรับ VERIFY_TOKEN ส่วนตัวแปร WHATSAPP_BUSINESS_ACCOUNT_ID และ PHONE_NUMBER_ID จะเป็นตัวระบุสำหรับบัญชีของคุณโดยเฉพาะที่ Meta สร้างขึ้นมาโดยอัตโนมัติ The ACCESS_TOKEN มีไว้สำหรับการยืนยันตัวตนและการอนุญาตคำขอ API

หากต้องการเข้าถึงข้อมูลนี้จากแดชบอร์ดของแอพ Meta ให้คลิก "WhatsApp" > "การตั้งค่า API" (API Setup) ในแผงการนำทางด้านซ้ายดังในภาพหน้าจอด้านล่าง

ดูตัวอย่างการตั้งค่า API

ขั้นสุดท้าย ในไดเรกทอรีเดียวกัน ให้สร้างไฟล์ชื่อ main.py เพื่อบันทึกตรรกะ Python สำหรับการสร้าง Flows และ Webhook

การสร้าง Flow

ในการสร้าง Flow ขั้นแรกให้เพิ่มแพ็คเกจต่อไปนี้ใน main.py

import os
import uuid
import requests
from dotenv import load_dotenv
from flask import Flask, request, make_response, json
        

จากนั้นให้เพิ่มส่วนย่อยของโค้ดต่อไปนี้ใน main.py เพื่อเริ่มต้นการทำงานของตัวแปร โดยส่วนย่อยของโค้ดนี้จะเริ่มต้น Flask และเรียกใช้เมธอด load_dotenv() เพื่อช่วยโหลดตัวแปรด้วย

app = Flask(__name__)

load_dotenv()
PHONE_NUMBER_ID = os.getenv('PHONE_NUMBER_ID')
VERIFY_TOKEN = os.getenv('VERIFY_TOKEN')
ACCESS_TOKEN = os.getenv('ACCESS_TOKEN')
WHATSAPP_BUSINESS_ACCOUNT_ID = os.getenv('WHATSAPP_BUSINESS_ACCOUNT_ID')
created_flow_id = ""
messaging_url = f"https://graph.facebook.com/v18.0/{PHONE_NUMBER_ID}/messages"

auth_header = {"Authorization": f"Bearer {ACCESS_TOKEN}"}

messaging_headers = {
    "Content-Type": "application/json",
    "Authorization": f"Bearer {ACCESS_TOKEN}",
}
        

ถัดไป ให้เพิ่มเส้นทางต่อไปนี้เพื่อจัดการการสร้าง Flow

@app.route("/create-flow", methods=["POST"])
def create_flow():
    flow_base_url = (
        f"https://graph.facebook.com/v18.0/{WHATSAPP_BUSINESS_ACCOUNT_ID}/flows"
    )
    flow_creation_payload = {"name": "<FLOW-NAME>", "categories": '["SURVEY"]'}
    flow_create_response = requests.request(
        "POST", flow_base_url, headers=auth_header, data=flow_creation_payload
    )

    try:
        global created_flow_id
        created_flow_id = flow_create_response.json()["id"]
        graph_assets_url = f"https://graph.facebook.com/v18.0/{created_flow_id}/assets"

        upload_flow_json(graph_assets_url)
        publish_flow(created_flow_id)

        print("FLOW CREATED!")
        return make_response("FLOW CREATED", 200)
    except:
        return make_response("ERROR", 500)

ฟังก์ชันนี้จะเรียกปลายทาง Flow (flow_base_url) ในขณะที่ส่งผ่านเพย์โหลด (flow_creation_payload) ที่มีชื่อและหมวดหมู่ Flow ค่าที่เป็นไปได้สำหรับหมวดหมู่นี้คือ SIGN_UP, SIGN_IN, APPOINTMENT_BOOKING, LEAD_GENERATION, CONTACT_US, CUSTOMER_SUPPORT, SURVEY หรือ OTHER

แทนที่ <FLOW-NAME> ด้วยชื่อที่คุณต้องการ เช่น survey_flow

หลังจากที่โค้ดสร้าง Flow ขึ้นมาแล้ว โค้ดจะดึงข้อมูล created_flow_id สำหรับการอัพโหลดเนื้อหา JSON

การอัพโหลดองค์ประกอบ JSON ของ Flow

สร้างไฟล์ survey.json ที่มีเนื้อหาเหล่านี้ ไฟล์ JSON จะมีโครงสร้างของ Flow อยู่

จากนั้นวางโค้ดต่อไปนี้ลงในไฟล์ main.py

def upload_flow_json(graph_assets_url):
    flow_asset_payload = {"name": "flow.json", "asset_type": "FLOW_JSON"}
    files = [("file", ("survey.json", open("survey.json", "rb"), "application/json"))]

    res = requests.request(
        "POST",
        graph_assets_url,
        headers=auth_header,
        data=flow_asset_payload,
        files=files,
    )
    print(res.json())

ฟังก์ชันดังกล่าวจะอัพโหลดข้อมูล JSON จาก survey.json ไปยังปลายทางขององค์ประกอบ Flow

ในส่วนย่อยของโค้ดที่ด้านล่าง เมื่อผู้ใช้ทริกเกอร์การดำเนินการคลิก ส่วนย่อยดังกล่าวจะเริ่มต้นการทำงานของ on-click-action โดยบันทึกข้อมูลภายในเพย์โหลด ช่อง "name": "complete" บ่งชี้ว่า Flow เสร็จสมบูรณ์แล้ว จากนั้น Flow จะถูกปิดและเพย์โหลดจะถูกส่งไปยังเซิร์ฟเวอร์ Webhook ของคุณ

...
"on-click-action": {
    "name": "complete",
    "payload": {
        "source": "${form.source}",
        "tour_type": "${form.tour_type}",
        "tour_quality": "${form.tour_quality}",
        "decision_influencer": "${form.decision_influencer}",
        "tour_guides": "${form.tour_guides}",
        "aspects_enjoyed": "${form.aspects_enjoyed}",
        "improvements": "${form.improvements}",
        "recommend": "${form.recommend}",
        "return_booking": "${form.return_booking}"
    }
}

...
        

ค่าภายในอ็อบเจ็กต์เพย์โหลดอาจสอดคล้องกับองค์ประกอบ Flow (คล้ายคลึงกับชื่อองค์ประกอบในรูปแบบ HTML) หรืออ็อบเจ็กต์ข้อมูล คีย์ที่เกี่ยวข้องกับค่าเพย์โหลดเหล่านี้เรียกว่าชื่อ ซึ่งคล้ายกับวิธีที่คุณกำหนดตัวแปรในภาษาโปรแกรม

องค์ประกอบ data-source จะมี ID ที่ทำหน้าที่เป็นคีย์ของค่าต่างๆ อยู่ด้วย โดยโค้ดจะส่ง ID เหล่านี้สำหรับตัวเลือกต่างๆ ตัวอย่างเช่น หากผู้ใช้เลือก Likely สำหรับ data-source ตามที่ระบุไว้ด้านล่าง โค้ดจะส่ง 1 เมื่อคุณได้รับข้อมูลแล้ว คุณสามารถจับคู่กับแหล่งข้อมูลได้

...
{
    "type": "RadioButtonsGroup",
    "required": true,
    "name": "return_booking",
    "data-source": [
        {
            "id": "0",
            "title": "Very likely"
        },
        {
            "id": "1",
            "title": "Likely"
        },
        {
            "id": "2",
            "title": "Undecided"
        },
        {
            "id": "3",
            "title": "Unlikely"
        },
        {
            "id": "4",
            "title": "Very likely"
        }
    ]
}
...
        

Flow จะมีหน้าจอหนึ่งซึ่งมีคำถามแบบหลายตัวเลือกจำนวน 9 ข้อ ดังตัวอย่างด้านล่าง

แบบสำรวจของ Flow

คุณสามารถดูรายละเอียดขององค์ประกอบ JSON ได้ในเอกสารสำหรับผู้พัฒนา

การเผยแพร่ Flow

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

def publish_flow(flow_id):
    flow_publish_url = f"https://graph.facebook.com/v18.0/{flow_id}/publish"
    requests.request("POST", flow_publish_url, headers=auth_header)
        

ฟังก์ชันนี้จะเรียกปลายทางการเผยแพร่ในขณะที่ส่งผ่าน ID ของ Flow

การส่ง Flow

วางฟังก์ชันต่อไปนี้ลงในไฟล์ main.py เพื่อส่ง Flow ไปยังผู้ใช้ WhatsApp ฟังก์ชันนี้จะเรียกปลายทางข้อความของ API ระบบคลาวด์ในขณะที่ส่งผ่านเพย์โหลดของ Flow

def send_flow(flow_id, recipient_phone_number):
    # Generate a random UUID for the flow token
    flow_token = str(uuid.uuid4())

    flow_payload = json.dumps(
        {
            "type": "flow",
            "header": {"type": "text", "text": "Survey"},
            "body": {
                "text": "Your insights are invaluable to us – please take a moment to share your feedback in our survey."
            },
            "footer": {"text": "Click the button below to proceed"},
            "action": {
                "name": "flow",
                "parameters": {
                    "flow_message_version": "3",
                    "flow_token": flow_token,
                    "flow_id": flow_id,
                    "flow_cta": "Proceed",
                    "flow_action": "navigate",
                    "flow_action_payload": {"screen": "SURVEY_SCREEN"},
                },
            },
        }
    )

    payload = json.dumps(
        {
            "messaging_product": "whatsapp",
            "recipient_type": "individual",
            "to": str(recipient_phone_number),
            "type": "interactive",
            "interactive": json.loads(flow_payload),
        }
    )

    requests.request("POST", messaging_url, headers=messaging_headers, data=payload)
    print("MESSAGE SENT")
        

เพย์โหลดของ Flow จะมีรายละเอียด Flow อยู่ในนั้น ช่อง action.parameters.flow_token จะช่วยให้คุณส่งผ่านตัวระบุที่ไม่ซ้ำกันสำหรับข้อความ Flow ซึ่งจะส่งจากไคลเอ็นต์ไปยัง Webhook ของคุณเมื่อ Flow เสร็จสมบูรณ์แล้ว ในบทแนะนำการใช้งานนี้ คุณจะใช้ ID แบบสุ่ม (uuid) โค้ดจะตั้งค่า action.parameters.flow_action_payload.screen เป็น SURVEY_SCREEN ซึ่งเป็น ID ของหน้าจอที่คุณต้องการแสดงเมื่อผู้ใช้คลิก action.parameters.flow_cta

การตั้งค่า Webhook

ตรรกะของ Webhook ค่อนข้างจะตรงไปตรงมา โดยจะมีฟังก์ชัน 2 ฟังก์ชัน ได้แก่ webhook_get และ webhook_post ที่ทำหน้าที่จัดการคำขอ GET และ POST ตามลำดับ โค้ดนี้จะใช้คำขอ GET เมื่อเพิ่ม Webhook ลงในแอพ Meta ของคุณ และจะส่งคืน hub.challenge ของคำขอเมื่อดำเนินการสำเร็จ คำขอ POST จะพิมพ์เพย์โหลดข้อความไปยังเทอร์มินัล

@app.route("/webhook", methods=["GET"])
def webhook_get():
    if (
        request.args.get("hub.mode") == "subscribe"
        and request.args.get("hub.verify_token") == VERIFY_TOKEN
    ):
        return make_response(request.args.get("hub.challenge"), 200)
    else:
        return make_response("Success", 403)
        

คำขอ POST จะดึงข้อมูลและประมวลผลเพย์โหลดข้อความ เนื่องจากโค้ดนี้รองรับเฉพาะเพย์โหลดข้อความ จึงทำให้เกิดข้อผิดพลาดเมื่อบันทึกเพย์โหลดอื่นๆ ด้วยเหตุนี้ คุณจึงต้องใช้คำสั่ง if เพื่อตรวจสอบว่ามีเนื้อหา messages หรือไม่ หลังจากตรวจสอบว่ามีเนื้อหา JSON messages อยู่แล้ว ระบบจะทำการตรวจสอบอีกครั้งเพื่อดึงข้อมูลหมายเลขโทรศัพท์ของผู้ส่งเฉพาะในกรณีที่มีเนื้อหา text ในเพย์โหลด messages

@app.route("/webhook", methods=["POST"])
def webhook_post():
    # checking if there is a messages body in the payload
    if (
        json.loads(request.get_data())["entry"][0]["changes"][0]["value"].get(
            "messages"
        )
    ) is not None:
        """
        checking if there is a text body in the messages payload so that the sender's phone number can be extracted from the message
        """
        if (
            json.loads(request.get_data())["entry"][0]["changes"][0]["value"][
                "messages"
            ][0].get("text")
        ) is not None:
            user_phone_number = json.loads(request.get_data())["entry"][0]["changes"][
                0
            ]["value"]["contacts"][0]["wa_id"]
            send_flow(created_flow_id, user_phone_number)
        else:
            flow_reply_processor(request)

    return make_response("PROCESSED", 200)
        

นอกจากนี้ คุณควรใช้ฟังก์ชันตัวช่วยต่อไปนี้ที่เรียกว่า flow_reply_processor เพื่อดึงข้อมูลการตอบกลับจาก Flow และส่งกลับไปยังผู้ใช้ เนื่องจากการตอบกลับของ Flow มี ID ตัวเลือกที่เลือกไว้แล้วเมื่อบันทึกข้อมูลจาก RadioButtonsGroups ฟังก์ชันนี้จึงจับคู่ ID ที่มีค่าสตริงที่สอดคล้องกัน

def flow_reply_processor(request):
    flow_response = json.loads(request.get_data())["entry"][0]["changes"][0]["value"][
        "messages"
    ][0]["interactive"]["nfm_reply"]["response_json"]

    flow_data = json.loads(flow_response)
    source_id = flow_data["source"]
    tour_type_id = flow_data["tour_type"]
    tour_quality_id = flow_data["tour_quality"]
    decision_influencer_id = flow_data["decision_influencer"]
    tour_guides_id = flow_data["tour_guides"]
    aspects_enjoyed_id = flow_data["aspects_enjoyed"]
    improvements_id = flow_data["improvements"]
    recommend_id = flow_data["recommend"]
    return_booking_id = flow_data["return_booking"]

    match source_id:
        case "0":
            source = "Online search"
        case "1":
            source = "Social media"
        case "2":
            source = "Referral from a friend/family"
        case "3":
            source = "Advertisement"
        case "4":
            source = "Others"

    match tour_type_id:
        case "0":
            tour_type = "Cultural tour"
        case "1":
            tour_type = "Adventure tour"
        case "2":
            tour_type = "Historical tour"
        case "3":
            tour_type = "Wildlife tour"

    match tour_quality_id:
        case "0":
            tour_quality = "1 - Poor"
        case "1":
            tour_quality = "2 - Below Average"
        case "2":
            tour_quality = "3 - Average"
        case "3":
            tour_quality = "4 - Good"
        case "4":
            tour_quality = "5 - Excellent"

    match decision_influencer_id:
        case "0":
            decision_influencer = "Positive reviews"
        case "1":
            decision_influencer = "Pricing"
        case "2":
            decision_influencer = "Tour destinations offered"
        case "3":
            decision_influencer = "Reputation"

    match tour_guides_id:
        case "0":
            tour_guides = "Knowledgeable and friendly"
        case "1":
            tour_guides = "Knowledgeable but not friendly"
        case "2":
            tour_guides = "Friendly but not knowledgeable"
        case "3":
            tour_guides = "Neither of the two"
        case "4":
            tour_guides = "I didn’t interact with them"

    match aspects_enjoyed_id:
        case "0":
            aspects_enjoyed = "Tourist attractions visited"
        case "1":
            aspects_enjoyed = "Tour guide's commentary"
        case "2":
            aspects_enjoyed = "Group dynamics/interaction"
        case "3":
            aspects_enjoyed = "Activities offered"

    match improvements_id:
        case "0":
            improvements = "Tour itinerary"
        case "1":
            improvements = "Communication before the tour"
        case "2":
            improvements = "Transportation arrangements"
        case "3":
            improvements = "Advertisement"
        case "4":
            improvements = "Accommodation quality"

    match recommend_id:
        case "0":
            recommend = "Yes, definitely"
        case "1":
            recommend = "Yes, but with reservations"
        case "2":
            recommend = "No, I would not"

    match return_booking_id:
        case "0":
            return_booking = "Very likely"
        case "1":
            return_booking = "Likely"
        case "2":
            return_booking = "Undecided"
        case "3":
            return_booking = "Unlikely"

    reply = (
        f"Thanks for taking the survey! Your response has been recorded. This is what we received:\n\n"
        f"*How did you hear about our tour company?*\n{source}\n\n"
        f"*Which type of tour did you recently experience with us?*\n{tour_type}\n\n"
        f"*On a scale of 1 to 5, how would you rate the overall quality of the tour?*\n{tour_quality}\n\n"
        f"*What influenced your decision to choose our tour company?*\n{decision_influencer}\n\n"
        f"*How knowledgeable and friendly were our tour guides?*\n{tour_guides}\n\n"
        f"*What aspects of the tour did you find most enjoyable?*\n{aspects_enjoyed}\n\n"
        f"*Were there any aspects of the tour that could be improved?*\n{improvements}\n\n"
        f"*Would you recommend our tour company to a friend or family member?*\n{recommend}\n\n"
        f"*How likely are you to book another tour with us in the future?*\n{return_booking}"
    )

    user_phone_number = json.loads(request.get_data())["entry"][0]["changes"][0][
        "value"
    ]["contacts"][0]["wa_id"]
    send_message(reply, user_phone_number)

After the extraction, the following send_message function sends the responses to the sender.

def send_message(message, phone_number):
    payload = json.dumps(
        {
            "messaging_product": "whatsapp",
            "to": str(phone_number),
            "type": "text",
            "text": {"preview_url": False, "body": message},
        }
    )

    requests.request("POST", messaging_url, headers=messaging_headers, data=payload)
    print("MESSAGE SENT")
        

ฟังก์ชันจะส่งการตอบกลับโดยใช้ปลายทางข้อความ API ระบบคลาวด์

คุณจะต้องเรียกใช้แอพพลิเคชั่นก่อนที่จะกำหนดค่า Webhook ในคอนโซล Meta for Developers ดังนั้นให้ใช้คำสั่ง flask --app main run --port 5000 ในเทอร์มินัลของคุณเพื่อเรียกใช้โค้ด คุณจะเห็นข้อความ * Running on http://127.0.0.1:5000 ในเทอร์มินัลของคุณหากทุกอย่างมีการตั้งค่าอย่างถูกต้อง

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

ที่คอนโซล Meta for Developers ในส่วน "WhatsApp" ซึ่งอยู่ในแผงการนำทางด้านซ้าย ให้คลิก "การกำหนดค่า" (Configuration)

การกำหนดค่าบน WhatsApp

ในการ์ด "Webhook" ให้คลิก "แก้ไข" (Edit) จากนั้น ที่กล่องโต้ตอบในช่อง "URL การเรียกกลับ" (Callback URL) ให้เพิ่ม URL ที่คัดลอกไว้และเพิ่ม /webhook ต่อท้าย ในช่อง "ตรวจสอบยืนยันโทเค็น" (Verify token) ให้เพิ่มโทเค็นจากตัวแปร TOKEN ของไฟล์ .env

เมื่อเสร็จแล้ว ให้คลิก "ตรวจสอบยืนยันและบันทึก" (Verify and save) จากนั้นกล่องโต้ตอบจะปิดลง ให้คลิก "จัดการ" (Manage) และตรวจสอบช่อง "ข้อความ" (messages) ข้อมูลควรมีลักษณะคล้ายกับรูปภาพด้านล่าง โดยมี "URL การเรียกกลับ" (Callback URL) ข้อมูลที่ซ่อนไว้ในส่วน "ตรวจสอบยืนยันโทเค็น" (Verify token) และมี "ข้อความ" (messages) ระบุไว้ในส่วน "ช่อง Webhook" (Webhook fields)

การกำหนดค่าบน WhatsApp

Webhook พร้อมใช้งานแล้ว

การเรียกใช้แอพพลิเคชั่น

ในอินสแตนซ์เทอร์มินัลใหม่ ให้เรียกใช้คำสั่ง cURL ที่ด้านล่างเพื่อสร้าง Flow

curl --location --request POST 'http://127.0.0.1:5000/create-flow'
        

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

การเรียกใช้แอพพลิเคชั่น

เมื่อผู้ใช้ส่งข้อความไปยังหมายเลข WhatsApp ของคุณ ผู้ใช้ดังกล่าวจะได้รับ Flow เป็นการตอบกลับ ดังในภาพหน้าจอด้านล่าง

ตัวอย่างข้อความแจ้งเกี่ยวกับแบบสำรวจของ Flow

ผู้ใช้จะได้รับการตอบกลับหลังจากทำแบบสำรวจเสร็จเรียบร้อยแล้ว

ตัวอย่างการตอบกลับสำหรับแบบสำรวจของ Flow

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

บทสรุป

WhatsApp Flows ช่วยปรับปรุงการใช้งานของผู้ใช้ผ่านอินเทอร์เฟซแบบอินเทอร์แอคทีฟซึ่งจะทำหน้าที่รวบรวมข้อมูลที่มีการจัดโครงสร้าง เช่น การตอบแบบสำรวจสำหรับบริษัททัวร์ที่เราสมมติขึ้นมา ธุรกิจนี้เพิ่งสร้างแอพ Flask ซึ่งสร้างใช้โค้ด Python และปรับใช้ Flow ผ่าน WhatsApp Flows API, ตั้งค่า Webhook เพื่อฟังข้อความขาเข้า และเรียกใช้แอพพลิเคชั่นเพื่อเปิดใช้งานการรวบรวมการตอบแบบสำรวจ

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

สำรวจศักยภาพของ WhatsApp Flows ต่อไป ลองใช้เลย