# Webhook

<Aside type="caution" icon="setting" title="จำเป็นต้องได้รับความช่วยเหลือจากนักพัฒนา">
 คุณจะต้องได้รับความช่วยเหลือจากทีมนักพัฒนาของคุณเพื่อกำหนดค่าองค์ประกอบ Webhook แบ่งปันคู่มือนี้กับพวกเขาเพื่อเริ่มต้นใช้งาน
</Aside>

Webhook ช่วยให้คุณสามารถส่งข้อมูล Journey ไปยังบริการภายนอก เช่น ระบบวิเคราะห์, ระบบ CRM และเครื่องมือทางการตลาด คุณสามารถ:

* แจ้งเตือนระบบภายนอกเมื่อลูกค้าดำเนินการบางอย่างใน Journey
* ส่งข้อมูลลูกค้าไปยังเครื่องมือวิเคราะห์
* ทริกเกอร์อีเมล, SMS หรือ WhatsApp ของบุคคลที่สามตามเหตุการณ์ Journey ที่ระบุ

<Aside type="note">
ดูตัวอย่างวิธีการใช้งาน webhook สำหรับกรณีการใช้งานและบริการต่างๆ ได้ที่: [ตัวอย่างการผสานการทำงานของ Webhook](/th/developer/guides/customer-journey/webhook-samples/)
</Aside>

## วิธีการตั้งค่าองค์ประกอบ Webhook 
### เพิ่มองค์ประกอบ Webhook
ลากและวางองค์ประกอบ **Webhook** ไปยัง canvas วาง **Webhook** ที่ใดก็ได้ที่คุณต้องการ โดยคำนึงถึงข้อมูล Journey ที่คุณจะส่งไปยังบริการของบุคคลที่สาม

<img src="/journey-elements-README-40.webp" alt="องค์ประกอบ Webhook บน canvas พร้อมการตั้งค่าชื่อและคำขอ"/>

### ตั้งชื่อขั้นตอน Webhook และระบุ URL และประเภทของคำขอ
ในช่อง **STEP NAME** ให้ป้อนชื่อสำหรับ webhook อาจเป็นประโยชน์ในการตั้งชื่อ webhook ตามบริการที่ส่งข้อมูลไปหรือตามกรณีการใช้งาน

ถัดไป ในช่อง **URL** ให้ระบุ URL ของคำขอที่จะส่งข้อมูลไป ถัดจากช่อง URL ให้เลือกประเภทของคำขอจากเมนูแบบเลื่อนลง **REQUEST TYPE**: `GET` หรือ `POST`
<img src="/journey-elements-webhook-1.webp" alt="อินเทอร์เฟซการกำหนดค่า Webhook ที่แสดงช่อง URL และเมนูแบบเลื่อนลง REQUEST TYPE สำหรับเลือกเมธอด GET หรือ POST"/>
### กำหนดค่า Headers
ในส่วน **HEADERS** ให้ตั้งค่าประเภทเนื้อหา 

โดยค่าเริ่มต้น ประเภทเนื้อหาคือ **application/json** หากบริการที่คุณกำลังส่ง webhook ไปต้องการประเภทเนื้อหาอื่น ให้ป้อนประเภทที่เหมาะสมในค่า header **Content-Type** 

ตัวอย่างของประเภทเนื้อหาคือ:

* `x-www-form-urlencoded`
* `text/plain`
* `text/xml`

เพิ่ม header เพิ่มเติมหากจำเป็นโดยคลิก **+ ADD HEADER** คุณสามารถลบ header ใดก็ได้โดยคลิกที่ไอคอน 'x' ที่อยู่ถัดไป

ตัวอย่างเช่น API บางตัวอาจต้องการ **HTTP Basic authentication** ในการรับรองความถูกต้องของคำขอดังกล่าว ให้ทำดังต่อไปนี้:

1. เปิดโปรแกรมแก้ไขข้อความธรรมดาและพิมพ์ชื่อผู้ใช้และรหัสผ่านของคุณโดยไม่มีเว้นวรรค คั่นด้วยเครื่องหมายโคลอน ตัวอย่างเช่น: `myuser:mypass`
2. เข้ารหัสสตริงนี้เป็น Base64
3. คัดลอกสตริง Base64 ที่ได้ (ตัวอย่างเช่น `bXl1c2VyOm15cGFzcw==`)
4. ในการตั้งค่า webhook ให้เพิ่ม header Authorization พร้อมค่า: `Basic <YOUR BASE64 STRING>` ตรวจสอบให้แน่ใจว่ามีเว้นวรรคหลังคำว่า "Basic"

<img src="/journey-elements-webhook-2.webp" alt="ตัวอย่าง header Authorization สำหรับ Basic authentication ในการตั้งค่า webhook ที่แสดง header Content-Type และ Authorization"/>
### เพิ่ม JSON request body
ในส่วน **DATA** ให้ป้อน JSON request body ของคุณ ตรวจสอบให้แน่ใจว่า request body อยู่ในรูปแบบ JSON ที่ถูกต้อง

<Aside type="note">
หากไม่มีค่าสำหรับตัวยึดตำแหน่ง Dynamic Data เมื่อมีการส่งคำขอ POST ค่า null จะถูกส่งไป
</Aside>

ตัวอย่าง:
```
{
  "hwid": "{{device:hwid}}"
}
```



### ใช้ข้อมูลไดนามิกและมาโคร

แผง **DATA BUILDER** ช่วยให้คุณสามารถแทรกข้อมูลไดนามิก (เช่น ข้อมูลผู้ใช้, อุปกรณ์, แท็ก หรือเหตุการณ์) ลงใน JSON request body ของคุณได้โดยตรง ด้วย Dynamic Data คุณสามารถรวมค่าเฉพาะสำหรับผู้ใช้แต่ละรายที่กำลังดำเนินไปใน Journey ได้

สำหรับสิ่งนี้: 
1. เลือก **หมวดหมู่** คุณสามารถดึงข้อมูลจากสามหมวดหมู่:

- **Device:** ใช้ข้อมูลอุปกรณ์เมื่อคุณต้องการข้อมูลทางเทคนิคที่ผูกกับอุปกรณ์ของผู้ใช้

- **Tag:** ใช้ข้อมูลแท็กเมื่อคุณต้องการส่งข้อมูลที่จัดเก็บไว้ในโปรไฟล์ผู้ใช้

- **Event:** ใช้ข้อมูลเหตุการณ์เมื่อ webhook ควรส่งค่าจากเหตุการณ์ที่ทริกเกอร์ Journey

2. เลือก **พารามิเตอร์** (ตัวอย่างเช่น HWID, หมวดหมู่โปรด ฯลฯ)
3. Pushwoosh จะสร้างมาโครที่มีลักษณะดังนี้:

```
{{tag:Language}}
```

4. คัดลอกมาโครและวางลงใน JSON body ของคุณในส่วน DATA

เมื่อ webhook ทำงานใน Journey ที่เผยแพร่แล้ว Pushwoosh จะแทนที่มาโครด้วยค่าจริงสำหรับผู้ใช้นั้นโดยอัตโนมัติ

<img src="/journey-elements-webhook-3.webp" alt="แทรกตัวยึดตำแหน่ง Dynamic Data ลงใน request body ของ webhook"/>

### แมปข้อมูลการตอบกลับของ webhook กับตัวแปร

นอกจากการส่งข้อมูลออกไปแล้ว องค์ประกอบ Webhook ยังสามารถจับข้อมูลจากการตอบกลับที่ได้รับและเปลี่ยนเป็นตัวแปรได้อีกด้วย จากนั้นตัวแปรเหล่านี้สามารถนำไปใช้ในภายหลังใน Journey ได้ ตัวอย่างเช่น ตั้งค่าแท็กด้วย [**อัปเดตโปรไฟล์ผู้ใช้**](/th/product/customer-journey/journey-elements/flow-controls/update-user-profile/#use-a-value-from-a-webhook-response) หรือกำหนดเวลา [**การหน่วงเวลา**](/th/product/customer-journey/journey-elements/flow-controls/time-delay/#use-a-date-from-a-webhook-response) ตามค่าที่ส่งคืนโดยบริการภายนอก สำหรับตัวอย่าง Journey ฉบับเต็ม โปรดดูที่ [การใช้ข้อมูลการตอบกลับของ webhook ใน Journey ของคุณ](/th/product/customer-journey/journey-elements/using-webhook-response-data-in-journeys/)

ในส่วน **RESPONSE MAPPING** คลิก **+ ADD MAPPING** และกรอกข้อมูลในสองช่องสำหรับแต่ละค่าที่คุณต้องการจับ:

* **Path:** ตำแหน่งของค่าภายใน response JSON body
* **Attribute:** ชื่อที่คุณใช้อ้างอิงถึงค่านี้ในภายหลังใน Journey

<img src="/journey-elements-webhook-4.webp" alt="ส่วนการแมปการตอบกลับพร้อมช่อง Path และ Attribute และปุ่ม Add mapping ในการตั้งค่า webhook"/>

ตัวอย่างเช่น หาก CRM ของคุณตอบกลับด้วย:

```
{
  "data": {
    "user": {
      "id": "789xyz"
    }
  }
}
```

ตั้งค่า **Path** เป็น `data.user.id` และ **Attribute** เป็น `crm_user_id` เพื่อจับ ID นั้น

<Aside type="note">
ข้อควรรู้เล็กน้อยเกี่ยวกับการแมป:

- **Path** คือเส้นทางที่คั่นด้วยจุดธรรมดา (คีย์ของอ็อบเจกต์ และสำหรับอาร์เรย์ คือดัชนีตัวเลข เช่น `results.0.code`) ไม่รองรับ wildcards หรือ filters ดังนั้นจึงสามารถชี้ไปยังค่าเฉพาะได้ทีละค่าเท่านั้น
- ค่าต่างๆ จะถูกจัดเก็บตรงตามที่มาจาก JSON response (ข้อความ, ตัวเลข หรือ true/false) ไม่มีการแปลงประเภท หากคุณวางแผนที่จะใช้ค่าเป็นวันที่ในองค์ประกอบ **Time Delay** ตรวจสอบให้แน่ใจว่าบริการของคุณส่งคืนค่าในรูปแบบวันที่ที่ **Time Delay** รองรับ
- หากการตอบกลับไม่ใช่ JSON ที่ถูกต้อง หรือ **Path** ไม่ตรงกับอะไรเลย ตัวแปรที่เกี่ยวข้องจะไม่ถูกสร้างขึ้นสำหรับผู้ใช้นั้น จะไม่มีข้อผิดพลาดแสดงขึ้น และขั้นตอน **Webhook** จะยังคงเสร็จสมบูรณ์ตามปกติ
</Aside>

<Aside type="caution">
Response bodies ที่มีขนาดใหญ่กว่า 64 KB จะไม่ถูกประมวลผลสำหรับการแมปเลย โปรดทำให้การตอบกลับที่ endpoint ของคุณส่งกลับมามีขนาดเล็กพอสมควรหากคุณวางแผนที่จะแมปค่าจากมัน
</Aside>

<LinkCard title="การใช้ข้อมูลการตอบกลับของ webhook ใน Journey ของคุณ" href="/product/customer-journey/journey-elements/using-webhook-response-data-in-journeys/" />

### ทดสอบ Webhook
คลิก **Test webhook** เพื่อตรวจสอบว่าการกำหนดค่า webhook ของคุณถูกต้องและคำขอถูกส่งสำเร็จ

### บันทึกการกำหนดค่าของคุณ
คลิก **Apply** เพื่อบันทึกการกำหนดค่า webhook ของคุณ