เพิ่ม WhatsApp Flows ในประสบการณ์แชทบอทของคุณ

20 มีนาคม 2024โดยGafi G และ Iryna Wagner

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

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

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

ปรับปรุงประสบการณ์แชทบอทด้วย WhatsApp Flows

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

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

ขั้นตอนที่คุณจะได้ปฏิบัติตาม

ส่วนที่ 1:

สร้าง Flow โดยใช้เครื่องมือสร้าง Flow ในตัวจัดการ WhatsApp

ส่วนที่ 2:

แปลงโมเดล Llama 2 จาก GGML เป็น GGUF
เขียนโค้ด Python สำหรับผสานการทำงาน Flow กับแชทบอท
สร้าง Webhook สำหรับฟังข้อความ
เรียกใช้แอพพลิเคชั่น

ส่วนที่ 1: วิธีสร้าง Flow

ในส่วนนี้ คุณจะได้สร้าง Flow ด้วยเครื่องมือสร้าง Flow หรือจะใช้ Flow API ที่เราไม่ได้กล่าวถึงในบทแนะนำการใช้งานนี้ก็ได้

ส่วนที่ 1 ข้อกำหนดเบื้องต้น

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

ติดตั้ง ngrok ไว้แล้ว
บัญชีผู้พัฒนาบน Meta for Developers ที่ตรวจสอบยืนยันแล้ว และคุณต้องคุ้นเคยกับ Cloud API ที่โฮสต์โดย Meta

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

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

เริ่มต้นโดยไปที่หน้า "Flows" ในบัญชี WhatsApp Business ของคุณ หากคุณโต้ตอบกับ Flow เป็นครั้งแรก คุณควรเห็นปุ่มที่มีชื่อว่า "เริ่มสร้าง Flow" ไม่เช่นนั้น จะมีปุ่ม "สร้าง Flow" ที่มุมขวาบนของหน้า

คลิกปุ่มที่ปรากฏเพื่อเปิดกล่องโต้ตอบ ซึ่งคุณสามารถป้อนรายละเอียดบางอย่างเกี่ยวกับ Flow ของคุณ

Flow สำหรับสอบถามด้านบริการ

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

ป้อนชื่อในช่อง "ชื่อ" จากนั้นเลือก "สมัคร" ที่ใต้ดร็อปดาวน์ "หมวดหมู่" แล้วตั้งค่าดร็อปดาวน์ "เทมเพลต" เป็น "ไม่มี" คลิก "ส่ง"

หน้าถัดไปจะแสดงตัวแก้ไขโค้ดทางด้านซ้ายและแสดงตัวอย่างทางด้านขวา

แทนที่เนื้อหาในตัวแก้ไขโค้ดด้วยมาร์กอัพ JSON สำหรับ Flow ของคุณ (คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Flow JSON ได้ในเอกสารสำหรับผู้พัฒนา)

บันทึก Flow ซึ่งตัวอย่างของคุณควรเป็นเหมือนภาพด้านล่าง

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

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

...

"on-click-action": {
    "name": "complete",
    "payload": {
        "firstname": "${form.first_name}",
        "secondname": "${form.second_name}",
        "services_interested": "${form.services_interested}",
        "additional_info": "${form.additional_info}",
        "flow_key": "agentconnect"
    }
}
...

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

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

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

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

Flow "ติดต่อเรา"

ตอนนี้ คุณจะได้สร้าง Flow "ติดต่อเรา"

เริ่มต้นจากการทำตามขั้นตอนการสร้าง Flow เริ่มต้นแบบเดียวกันอีกครั้ง เลือก "ติดต่อเรา" สำหรับหมวดหมู่ แทนที่เนื้อหาในตัวแก้ไขโค้ดด้วยมาร์กอัพ JSON เพื่อแสดงผลดังต่อไปนี้

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

ส่วนที่ 2: วิธีตั้งค่าแชทบอท

ขั้นตอนถัดไป คุณจะได้กำหนดค่าแชทบอทและผสานการทำงานเข้ากับ Flow ของคุณ

ส่วนที่ 2 ข้อกำหนดเบื้องต้น

ก่อนที่จะดำเนินการต่อ คุณต้องมีสิ่งต่อไปนี้

ความรู้พื้นฐานเกี่ยวกับ Python และใช้งาน Python เวอร์ชั่นล่าสุด
ดาวน์โหลด Llama 2 เวอร์ชั่น HuggingFace แล้ว โมเดล Llama 2 HuggingFace ไม่จำเป็นต้องใช้เครื่องมือเพิ่มเติมหรือฮาร์ดแวร์พิเศษ หรือคุณสามารถใช้เวอร์ชั่นทางการก็ได้เช่นกัน แต่จำเป็นต้องมีการตั้งค่าเพิ่มเติม
โทเค็นการเข้าถึงของบัญชีและ ID หมายเลขโทรศัพท์ของคุณ
ตัวแก้ไขโค้ด

การใช้ Python เพื่อผสานการทำงาน Flow กับแชทบอท

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

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

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

python -m venv venv

สั่งทำงาน

source venv/bin/activate

จากนั้น ติดตั้งแพ็คเกจที่จำเป็น

pip install requests flask llama-cpp-python python-dotenv

คุณใช้ Flask เพื่อสร้างเส้นทางและโต้ตอบกับ API, requests สำหรับการส่งคำขอบนอินเทอร์เน็ต, llama-cpp-python สำหรับการโต้ตอบกับโมเดล และ python-dotenv สำหรับการโหลดตัวแปรสภาพแวดล้อม

จากนั้น สร้างไฟล์สภาพแวดล้อมที่ชื่อว่า .env และเนื้อหาต่อไปนี้ โดยกำหนดค่าอย่างเหมาะสม (คุณสามารถใช้สตริงสำหรับ TOKEN)

TOKEN = 
ACCESS_TOKEN = 
PHONE_NUMBER_ID =

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

import os
import re
import time
import uuid
import requests
from dotenv import load_dotenv
from flask import Flask, request, make_response, json
from llama_cpp import Llama

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

app = Flask(__name__)

load_dotenv()
PHONE_NUMBER_ID = os.getenv('PHONE_NUMBER_ID')
url = f"https://graph.facebook.com/v18.0/{PHONE_NUMBER_ID}/messages"
TOKEN = os.getenv('TOKEN')
ACCESS_TOKEN = os.getenv('ACCESS_TOKEN')

code_prompt_texts = ["Contact us", "Chat with our chatbot", "YES", "NO"]


service_list = [
    "Accommodation Services",
    "Spa Services",
    "Dining Services",
    "Recreational Facilities",
    "Business & Conference Services",
    "Transportation Services",
    "Accessibility Services",
    "Pet-Friendly Services"
]

service_list จะจัดเก็บบริการที่โรงแรมนำเสนอ รายการ code_prompt_texts ประกอบด้วยตัวเลือกต่างๆ ที่สอดคล้องกับอินพุตของผู้ใช้ ซึ่งได้แก่ 1, 2, Y และ N โดยใช้ฟังก์ชั่นข้างล่างนี้ ซึ่งฟังก์ชั่นดังกล่าวจะช่วยแมพการตอบกลับของผู้ใช้กับตัวเลือกที่สอดคล้อง

def extract_string_from_reply(user_input):
    match user_input:
        case "1":
            user_prompt = code_prompt_texts[0].lower()
        case "2":
            user_prompt = code_prompt_texts[1].lower()
        case "Y":
            user_prompt = code_prompt_texts[2].lower()
        case "N":
            user_prompt = code_prompt_texts[3].lower()
        case _:
            user_prompt = str(user_input).lower()

    return user_prompt

โค้ดจะแปลงสตริงให้เป็นตัวพิมพ์เล็กเพื่อป้องกันความไม่สอดคล้องกันเมื่อเรียกใช้ตรรกะเงื่อนไข โครงสร้าง match…case จะจับคู่คำสั่งที่ป้อนโดยผู้ใช้เข้ากับเอาต์พุต ตัวอย่างเช่น เมื่อผู้ใช้กรอก "1" จะเป็นการทริกเกอร์ฟังก์ชั่นการทำงาน "Contact us"

ถัดไป ฟังก์ชั่นต่อไปนี้ประกอบด้วยชุดคำสั่ง if ที่ใช้แพ็คเกจ Python RegEx (re) เพื่อค้นหาคำศัพท์เฉพาะจากข้อความของลูกค้า เพื่อตัดสินใจว่าจะส่งการตอบกลับประเภทใดให้กับผู้ใช้

def user_message_processor(message, phonenumber, name):
    user_prompt = extract_string_from_reply(message)
    if user_prompt == "yes":
        send_message(message, phonenumber, "TALK_TO_AN_AGENT", name)
    elif user_prompt == "no":
        print("Chat terminated")
    else:
        if re.search("service", user_prompt):
            send_message(message, phonenumber, "SERVICE_INTRO_TEXT", name)

        elif re.search(
            "help|contact|reach|email|problem|issue|more|information", user_prompt
        ):
            send_message(message, phonenumber, "CONTACT_US", name)

        elif re.search("hello|hi|greetings", user_prompt):
            if re.search("this", user_prompt):
                send_message(message, phonenumber, "CHATBOT", name)

            else:
                send_message(message, phonenumber, "SEND_GREETINGS_AND_PROMPT", name)

        else:
            send_message(message, phonenumber, "CHATBOT", name)

ตอนนี้ ข้อความ เช่น "Hello there" จะทำให้เมธอด send_message ทำงานโดยมี SEND_GREETINGS_AND_PROMPT เป็นอาร์กิวเมนต์รอง ด้านล่างนี้คือเมธอด send_message ให้แทนที่เนื้อหาระหว่าง <xxx> อย่างเหมาะสม

def send_message(message, phone_number, message_option, name):
    greetings_text_body = (
        "\nHello "
        + name
        + ". Welcome to our hotel. What would you like us to help you with?\nPlease respond with a numeral between 1 and 2.\n\n1. "
        + code_prompt_texts[0]
        + "\n2. "
        + code_prompt_texts[1]
        + "\n\nAny other reply will connect you with our chatbot."
    )

    # loading the list's entries into a string for display to the user
    services_list_text = ""
    for i in range(len(service_list)):
        item_position = i + 1
        services_list_text = (
            f"{services_list_text} {item_position}. {service_list[i]} \n"
        )

    service_intro_text = f"We offer a range of services to ensure a comfortable stay, including but not limited to:\n\n{services_list_text}\n\nWould you like to connect with an agent to get more information about the services?\n\nY: Yes\nN: No"

    contact_flow_payload = flow_details(
        flow_header="Contact Us",
        flow_body="You have indicated that you would like to contact us.",
        flow_footer="Click the button below to proceed",
        flow_id=str("<FLOW-ID>"),
        flow_cta="Proceed",
        recipient_phone_number=phone_number,
        screen_id="CONTACT_US",
    )

    agent_flow_payload = flow_details(
        flow_header="Talk to an Agent",
        flow_body="You have indicated that you would like to talk to an agent to get more information about the services that we offer.",
        flow_footer="Click the button below to proceed",
        flow_id=str("<FLOW-ID>"),
        flow_cta="Proceed",
        recipient_phone_number=phone_number,
        screen_id="TALK_TO_AN_AGENT",
    )

    match message_option:
        case "SEND_GREETINGS_AND_PROMPT":
            payload = json.dumps(
                {
                    "messaging_product": "whatsapp",
                    "to": str(phone_number),
                    "type": "text",
                    "text": {"preview_url": False, "body": greetings_text_body},
                }
            )
        case "SERVICE_INTRO_TEXT":
            payload = json.dumps(
                {
                    "messaging_product": "whatsapp",
                    "to": str(phone_number),
                    "type": "text",
                    "text": {"preview_url": False, "body": service_intro_text},
                }
            )
        case "CHATBOT":
            LLM = Llama(
                model_path="/home/incognito/Downloads/llama-2-7b-chat.ggmlv3.q8_0.gguf.bin",
                n_ctx=2048,
            )
            # create a text prompt
            prompt = message
            # generate a response (takes several seconds)
            output = LLM(prompt)
            payload = json.dumps(
                {
                    "messaging_product": "whatsapp",
                    "to": str(phone_number),
                    "type": "text",
                    "text": {
                        "preview_url": False,
                        "body": output["choices"][0]["text"],
                    },
                }
            )
        case "CONTACT_US":
            payload = contact_flow_payload
        case "TALK_TO_AN_AGENT":
            payload = agent_flow_payload
        case "FLOW_RESPONSE":
            payload = json.dumps(
                {
                    "messaging_product": "whatsapp",
                    "to": str(phone_number),
                    "type": "text",
                    "text": {"preview_url": False, "body": message},
                }
            )

    headers = {
        "Content-Type": "application/json",
        "Authorization": "Bearer " + ACCESS_TOKEN,
    }

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

หากข้อความเป็นคำทักทายธรรมดา (SEND_GREETINGS_AND_PROMPT) การตอบกลับจะประกอบด้วยคำสั่งเพิ่มเติม (greetings_text_body)

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

หากเอนทรีต้องใช้การตอบกลับของแชทบอท (CHATBOT) ให้คุณกำหนดค่าตั้งต้นให้กับโมเดล ป้อนเนื้อหาข้อความ และประมวลผลการตอบกลับเพื่อส่งกลับไปยังผู้ใช้ FLOW_RESPONSE แสดงการตอบกลับที่บันทึกไว้ของ Flow

ตัวเลือกอื่นๆ อย่าง CONTACT_US และ TALK_TO_AN_AGENT จะส่งเพย์โหลด Flow ไปยังผู้ใช้ เพย์โหลดของ Flow มาจากฟังก์ชั่น flow_details ที่ปรากฏอยู่ด้านล่าง เพย์โหลดจะรวบรวมรายละเอียด Flow ที่สำคัญเข้าด้วยกัน รวมถึง FLOW_ID ซึ่งคุณสามารถดึงข้อมูลมาจากหน้า Flows ในบัญชี WhatsApp Business ของคุณ นอกจากนี้ คุณยังสามารถกำหนด ID เหล่านี้ภายในตัวแปรสภาพแวดล้อมของคุณได้ด้วยเช่นกัน

def flow_details(flow_header, 
    flow_body, 
    flow_footer, 
    flow_id, 
    flow_cta, 
    recipient_phone_number, 
    screen_id
):
    # Generate a random UUID for the flow token
    flow_token = str(uuid.uuid4())

    flow_payload = json.dumps({
        "type": "flow",
        "header": {
            "type": "text",
            "text": flow_header
        },
        "body": {
            "text": flow_body
        },
        "footer": {
            "text": flow_footer
        },
        "action": {
            "name": "flow",
            "parameters": {
                "flow_message_version": "3",
                "flow_token": flow_token,
                "flow_id": flow_id,
                "flow_cta": flow_cta,
                "flow_action": "navigate",
                "flow_action_payload": {
                    "screen": screen_id
                }
            }
        }
    })

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

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

ขั้นตอนสุดท้ายคือการเพิ่มเส้นทาง Webhook คำขอ GET Webhook จะเริ่มต้นเมื่อเพิ่ม Webhook ลงในแอพของคุณบน Meta for Developers และจะส่งคืน hub.challenge ของคำขอเมื่อดำเนินการสำเร็จ

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

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

@app.route("/webhook", methods=["POST"])
def webhook_post():
    if request.method == "POST":
        request_data = json.loads(request.get_data())
        if (
            request_data["entry"][0]["changes"][0]["value"].get("messages")
        ) is not None:
            name = request_data["entry"][0]["changes"][0]["value"]["contacts"][0][
                "profile"
            ]["name"]
            if (
                request_data["entry"][0]["changes"][0]["value"]["messages"][0].get(
                    "text"
                )
            ) is not None:
                message = request_data["entry"][0]["changes"][0]["value"]["messages"][
                    0
                ]["text"]["body"]
                user_phone_number = request_data["entry"][0]["changes"][0]["value"][
                    "contacts"
                ][0]["wa_id"]
                user_message_processor(message, user_phone_number, name)
            else:
                # checking that there is data in a flow's response object before processing it
                if (
                    request_data["entry"][0]["changes"][0]["value"]["messages"][0][
                        "interactive"
                    ]["nfm_reply"]["response_json"]
                ) is not None:
                    flow_reply_processor(request)

    return make_response("PROCESSED", 200)

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

def flow_reply_processor(request):
    request_data = json.loads(request.get_data())
    name = request_data["entry"][0]["changes"][0]["value"]["contacts"][0]["profile"]["name"]
    message = request_data["entry"][0]["changes"][0]["value"]["messages"][0]["interactive"]["nfm_reply"][
        "response_json"]

    flow_message = json.loads(message)
    flow_key = flow_message["flow_key"]
    if flow_key == "agentconnect":
        firstname = flow_message["firstname"]
        reply = f"Thank you for reaching out {firstname}. An agent will reach out to you the soonest"
    else:
        firstname = flow_message["firstname"]
        secondname = flow_message["secondname"]
        issue = flow_message["issue"]
        reply = f"Your response has been recorded. This is what we received:\n\n*NAME*: {firstname} {secondname}\n*YOUR MESSAGE*: {issue}"

    user_phone_number = request_data["entry"][0]["changes"][0]["value"]["contacts"][0][
        "wa_id"]
    send_message(reply, user_phone_number, "FLOW_RESPONSE", name)

มีการใช้คีย์ (flow_key) เพื่อแยกความแตกต่างระหว่าง Flow 2 รายการ และดึงการตอบกลับได้อย่างเหมาะสมในขณะที่ส่งต่อ ID หน้าจอแรกที่ถูกต้อง

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

วิธีตั้งค่า Webhook

ก่อนดำเนินการต่อ ให้เรียกใช้คำสั่งนี้จากเทอร์มินอลของคุณ

flask --app main run --port 5000

หากเรียกใช้สำเร็จ คุณจะเห็นข้อความว่า

* Running on http://127.0.0.1:5000

จากนั้น ให้เรียกใช้ ngrok http 5000 เพื่อรับ URL ที่แมพกับแอพพลิเคชั่นของคุณ แล้วคัดลอกลิงก์

จากนั้นไปที่บัญชีผู้พัฒนาบน Meta for Developers แล้วคลิกเมนู "การกำหนดค่า" ที่ใต้ "WhatsApp" ในแผงนำทางด้านซ้ายมือ

ในการ์ด "Webhook" ให้คลิก "แก้ไข"

จากนั้น วาง URL ที่คัดลอกไว้และเพิ่ม /webhook ต่อท้ายในช่อง "URL การเรียกกลับ" ในกล่องโต้ตอบที่เปิดขึ้น

เพิ่มโทเค็นจากตัวแปร TOKEN ของไฟล์ .env ลงในช่อง "ตรวจสอบยืนยันโทเค็น" คลิก "ตรวจสอบยืนยันและบันทึก" เพื่อปิดกล่องโต้ตอบ

จากการ์ดเดิม ให้คลิก "จัดการ" แล้วทำเครื่องหมายในช่อง "ข้อความ" การ์ดควรมีลักษณะดังนี้

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

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

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

ด้านล่างนี้คือภาพหน้าจออีกภาพที่แสดงการตอบกลับของแชทบอท โดยผู้ใช้ได้ขอการแปลภาษาอย่างรวดเร็ว ซึ่งบอทสามารถตอบได้

บทสรุป

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

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

ใช้ประโยชน์จาก WhatsApp Flows เพื่อยกระดับการโต้ตอบกับลูกค้า และปรับปรุงการรวบรวมข้อมูลในแอพพลิเคชั่นของคุณตั้งแต่วันนี้เลย ลองใช้เลย

แท็ก:

เครื่องมือธุรกิจ แพลตฟอร์ม WhatsApp

ข่าวที่เกี่ยวข้อง