# อ้างอิงบล็อกใน In-app editor

การอ้างอิงสำหรับทุกบล็อกที่คุณสามารถเพิ่มลงบน canvas ของ [editor ที่มีอยู่](/th/product/content/in-apps/no-code-in-app-editor/create-rich-media-in-the-built-in-editor/)

บล็อกแต่ละประเภทมีวัตถุประสงค์ที่แตกต่างกันในข้อความ:

* **[Heading](#heading-and-text):** ชื่อเรื่องและหัวข้อสั้นๆ
* **[Text](#heading-and-text):** เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
* **[Button](#button):** call to action ที่สามารถแตะได้
* **[Image](#image):** รูปภาพจาก [Media store](/th/product/content/media-store/), การอัปโหลด หรือ URL
* **[Video](#video):** ภาพขนาดย่อของวิดีโอที่สามารถแตะได้ ซึ่งจะเปิดวิดีโอ YouTube หรือ Vimeo
* **[Card](#card):** รูปภาพพร้อมหัวข้อ, ข้อความ และปุ่มในเลย์เอาต์เดียว
* **[Divider](#divider):** เส้นที่ใช้แบ่งส่วนต่างๆ
* **[Columns](#columns):** เลย์เอาต์แบบเคียงข้างกัน (2, 3 หรือ 4 คอลัมน์เท่ากัน หรือแบ่งแบบ 33/67 และ 67/33)
* **[Timer](#countdown-timer):** ตัวนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
* **[Menu](#menu):** แถวหรือคอลัมน์ของลิงก์นำทางหรือลิงก์ติดต่อ
* **[Social](#social):** ไอคอนที่ลิงก์ไปยังโปรไฟล์โซเชียลของคุณ
* **[HTML](#html):** HTML ที่กำหนดเอง เช่น แบบฟอร์ม, แบบสำรวจ หรือวิดีโอที่ฝังไว้
* **[Products](#products):** ตารางของการ์ดผลิตภัณฑ์จาก [Product Catalog](/th/product/content/product-catalog/) ของคุณ หรือตะกร้าสินค้าที่ถูกทิ้งของผู้ใช้

## วิธีการกำหนดค่าบล็อกใน editor

ลากบล็อกลงบน canvas จากแท็บ **Blocks** หรือคลิกเพื่อเพิ่มที่ส่วนท้าย เลือกบล็อกเพื่อเปิดการตั้งค่าในแผงด้านขวาและกำหนดค่าเนื้อหา, ลิงก์, ขนาด และระยะห่าง

<Aside type="tip">
ทุกบล็อกยังมีการตั้งค่า **Visibility** และ **Display condition** ใช้เพื่อซ่อนบล็อกบนโทรศัพท์หรือเดสก์ท็อป หรือแสดงเฉพาะผู้ใช้บางกลุ่ม [เรียนรู้เพิ่มเติม](/th/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)
</Aside>

### Heading และ text

บล็อก **Heading** และ **Text** ใช้สำหรับเก็บข้อความที่ผู้ใช้อ่านในข้อความ in-app แก้ไขข้อความบน canvas และจัดรูปแบบด้วยแถบเครื่องมือ

คลิกบล็อก **Heading** หรือ **Text** เพื่อแก้ไขข้อความบน canvas เลือกข้อความบางส่วนเพื่อเปิดแถบเครื่องมือจัดรูปแบบ: ตัวหนา, ตัวเอียง, ขีดเส้นใต้, การจัดตำแหน่ง, ปุ่มลิงก์ และเมนูแบบเลื่อนลง **text style**

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="บล็อก Heading ที่ถูกเลือกบน canvas พร้อมแถบเครื่องมือจัดรูปแบบข้อความที่แสดงสไตล์และตัวเลือกการจัดรูปแบบ"/>

Merge Tags คือตัวยึดตำแหน่งที่แทรกค่า [Tag](/th/product/audience-data-and-segmentation/user-data-tags/tags/) จากโปรไฟล์ของผู้ใช้ลงในข้อความ เพื่อให้ผู้ติดตามแต่ละคนเห็นข้อความที่เป็นส่วนตัว หากต้องการเพิ่ม ให้เลือกข้อความ คลิก **Merge Tags** ในแถบเครื่องมือ และเลือก Tag จากบัญชีของคุณ [เรียนรู้เพิ่มเติมเกี่ยวกับข้อความ in-app ที่เป็นส่วนตัว](/th/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### Image

บล็อก **Image** จะแสดงรูปภาพในเทมเพลต in-app

<img src="/rich-media-create-rich-media-in-the-built-in-editor-40.webp" alt="บล็อก Image บน canvas พร้อมการตั้งค่า Image ที่แสดง Replace image, Image URL, Alt text, Generate alt with AI, Prompt, Width, Height, Corner radius และ Alignment" width="600"/>


เลือกบน canvas เพื่อเปิดการตั้งค่า **Image** ในแผงด้านขวา

* **Add image** / **Replace image:** คลิก **Add image** เมื่อบล็อกว่างเปล่า หรือ **Replace image** เมื่อมีรูปภาพอยู่แล้ว คุณสามารถอัปโหลดไฟล์หรือเลือกจาก [Media store](/th/product/content/media-store/) ของคุณ
* **Image URL:** วางลิงก์ที่โฮสต์ของรูปภาพ
* **Alt text:** อธิบายรูปภาพเพื่อการเข้าถึง
* **Prompt:** prompt สำหรับการสร้างภาพด้วย AI สำหรับรูปภาพที่คุณสร้างด้วย **Generate with AI**
* **Width (px)** / **Height (px):** กำหนดขนาดของรูปภาพเป็นพิกเซล ปล่อยฟิลด์ว่างไว้เพื่อให้ปรับขนาดอัตโนมัติ
* **Corner radius (px):** ทำให้มุมของรูปภาพโค้งมน
* **Alignment:** ซ้าย, กลาง หรือขวา

ใน **Link** ตั้งค่า **Action Type** (เช่น **Open Website** หรือ **URL or Deeplink**) และ **URL** ของมันเพื่อเปิดบางอย่างเมื่อแตะที่รูปภาพ และ **Link target** เพื่อเปิดในแท็บเดียวกันหรือแท็บใหม่

ใน **Spacing** เปิด **Padding** เพื่อเพิ่มช่องว่างรอบๆ รูปภาพ ใช้ **All sides** สำหรับ padding ที่เท่ากันทุกด้าน หรือเปิด **More options** เพื่อตั้งค่าแต่ละด้านแยกกัน

### Video

บล็อก **Video** จะเพิ่มวิดีโอ YouTube หรือ Vimeo ลงในข้อความเป็นภาพขนาดย่อที่สามารถแตะได้ ข้อความจะแสดงภาพนิ่งพร้อมสัญลักษณ์ ▶ การแตะจะเปิดวิดีโอในแอป YouTube หรือ Vimeo หรือเบราว์เซอร์

<img src="/rich-media-create-rich-media-in-the-built-in-editor-38.webp" alt="บล็อก Video บน canvas พร้อมการตั้งค่า Video ที่แสดง Video URL, Alt text, Replace thumbnail, Thumbnail URL และ Play button overlay" width="600"/>

เลือกบล็อกบน canvas เพื่อเปิดการตั้งค่า:

* **Video URL:** วางลิงก์ YouTube หรือ Vimeo editor จะดึงภาพขนาดย่อมาโดยอัตโนมัติ
* **Alt text:** อธิบายวิดีโอเพื่อการเข้าถึง
* **Thumbnail URL:** เก็บภาพขนาดย่อที่ดึงมาอัตโนมัติ หรือคลิก **Add thumbnail** / **Replace thumbnail** เพื่อเลือกจาก [Media store](/th/product/content/media-store/) หรือวางลิงก์ที่โฮสต์โดยตรง
* **Play button overlay:** เปิดใช้งานโดยค่าเริ่มต้น ปิดเพื่อแสดงภาพขนาดย่อธรรมดาโดยไม่มีสัญลักษณ์ ▶
* **Width (px)**, **Corner radius (px)** และ **Alignment:** ควบคุมลักษณะและตำแหน่งของภาพขนาดย่อในเลย์เอาต์


### Card

บล็อก **Card** จะจับคู่รูปภาพกับหัวข้อ, ข้อความ และปุ่มในเลย์เอาต์สำเร็จรูปเดียว คุณจึงไม่ต้องวางและจัดตำแหน่งบล็อกสี่ส่วนแยกกันด้วยตนเอง

<img src="/rich-media-create-rich-media-in-the-built-in-editor-37.webp" alt="บล็อก Card บน canvas พร้อมการตั้งค่า Card ที่แสดง Layout, Replace image, Image URL, Alt text, Prompt, Padding และ Corner radius" width="600"/>

* **Layout:** เลือกว่าจะให้รูปภาพอยู่ด้านใดเมื่อเทียบกับเนื้อหา หรือเปิด **Wrap text around image**
* **Image:** เพิ่มหรือแทนที่รูปภาพ, ตั้งค่า alt text, แก้ไข **Prompt** สำหรับการสร้างด้วย AI, เพิ่ม **Padding** และตั้งค่า **Corner radius (px)**
* **Size & fit:** ตั้งค่า **Width**, **Height**, **Crop** (Original หรืออัตราส่วนคงที่) และ **Fit** (Cover หรือจุดโฟกัส) ของรูปภาพ ฟิลด์ที่แน่นอนจะขึ้นอยู่กับ **Layout** ที่คุณเลือก
* **Link:** ทำให้การ์ดทั้งหมดเปิด URL เมื่อแตะ

แก้ไขหัวข้อ, ข้อความ และปุ่มของการ์ดในลักษณะเดียวกับที่คุณแก้ไขบล็อก [Heading, Text](#heading-and-text) และ [Button](#button) แบบเดี่ยว

### Button

**Button** คือ call to action ที่สามารถแตะได้ในข้อความ in-app ใช้เพื่อเปิด URL, รัน JavaScript ที่กำหนดเอง หรือปิดข้อความ

คลิกบล็อก **Button** เพื่อแก้ไขป้ายกำกับบน canvas ใช้แถบเครื่องมือเพื่อเปลี่ยนขนาดตัวอักษร, สีข้อความ, ตัวหนา, ตัวเอียง, ขีดเส้นใต้ และการจัดตำแหน่ง

เพื่อตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อผู้ใช้แตะปุ่ม:

1. คลิกไอคอนลิงก์ในแถบเครื่องมือเพื่อเปิด **Insert/Edit Link**
2. เลือก **Action type**: **Open Website**, **URL or Deeplink** หรือ **Custom Javascript**
3. กรอกข้อมูลในฟิลด์สำหรับการกระทำนั้น (ดูด้านล่าง)
4. คลิก **Save**

#### Open Website

**Open Website** จะเปิดหน้าเว็บเมื่อผู้ใช้แตะปุ่ม ป้อนที่อยู่ใน **URL** เช่น `https://example.com`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="กล่องโต้ตอบ Insert Edit Link สำหรับ Button ที่มี Action type เป็น Open Website และฟิลด์ URL"/>

#### URL or Deeplink

**URL or Deeplink** จะเปิดลิงก์หรือ deep link เมื่อผู้ใช้แตะปุ่ม ป้อนที่อยู่ใน **URL** เช่น หน้าจอแอป: `myapp://screen`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-45.webp" alt="แถบเครื่องมือ Button ที่มีกล่องโต้ตอบ Insert Edit Link เปิดอยู่, Action type เป็น URL or Deeplink และ URL ตั้งค่าเป็น myapp://screen"/>

#### Run custom JavaScript

**Custom Javascript** จะรันโค้ดเมื่อผู้ใช้แตะปุ่ม ป้อนโค้ดในฟิลด์ **onClick**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="กล่องโต้ตอบ Insert Edit Link สำหรับ Button ที่มี Action type เป็น Custom Javascript และ onClick ตั้งค่าเป็น closeInApp"/>

**เมธอดที่ใช้ได้ใน onClick**

* `pushwoosh.closeInApp()`: ปิดข้อความ in-app ละเว้นเพื่อเปิดข้อความทิ้งไว้หลังจากการแตะ
* `pushwoosh.sendTags({...})`: บันทึกค่าเป็น [device tags](/th/product/audience-data-and-segmentation/user-data-tags/tags/) สำหรับแคมเปญในอนาคต
* `pushwoosh.postEvent(...)`: ส่ง [custom event](/th/product/audience-data-and-segmentation/events/custom-events/) เช่น เพื่อเริ่ม Customer Journey
* `pushwoosh.getTags(...)`: อ่าน tags ปัจจุบัน มีประโยชน์ใน HTML ที่กำหนดเองเพื่อเปลี่ยนสิ่งที่ข้อความแสดง
* `pushwoosh.getCustomData()`: อ่านข้อมูลที่กำหนดเองที่ส่งมาจาก push ที่เปิด in-app นี้

##### ตัวอย่าง: ให้ผู้ใช้เลือกความสนใจและบันทึกไว้สำหรับแคมเปญในอนาคต

1. เพิ่มคำถามในบล็อก **Text** หรือ **Heading** เช่น "คุณสนใจกีฬาประเภทไหน?"
2. เพิ่ม **Button** หนึ่งปุ่มต่อตัวเลือก เช่น **Yoga** และ **Gym**

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="เทมเพลต In-app ที่มีปุ่ม Yoga และ Gym และ Custom Javascript onClick สำหรับปุ่ม Yoga"/>

3. ตั้งค่า **Action type** เป็น **Custom Javascript** สำหรับแต่ละปุ่ม
4. สำหรับปุ่ม **Yoga** ให้วางโค้ดนี้ลงใน **onClick**:

```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```

5. สำหรับปุ่ม **Gym** ให้วางโค้ดนี้ลงใน **onClick**:

```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```


เมื่อผู้ใช้แตะ **Yoga**, Pushwoosh จะเขียน `interest` tag บนอุปกรณ์ของพวกเขาและปิด in-app จากนั้นคุณสามารถกำหนดเป้าหมายผู้ใช้นั้นใน [segment](/th/product/audience-data-and-segmentation/segmentation/) หรือ [Customer Journey](/th/product/customer-journey/journey-elements/#in-app)

<LinkCard title="เรียนรู้เพิ่มเติมเกี่ยวกับวิธีสร้าง in-apps ด้วย JavaScript" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### Divider

**Divider** คือเส้นแนวนอนระหว่างบล็อกเนื้อหา ใช้เพื่อแบ่งส่วนต่างๆ ในเทมเพลตด้วยสายตา

กำหนดค่า **line style** (Solid, Dashed, Dotted), **color**, **thickness** และ **width** ในแผงการตั้งค่า

### HTML

บล็อก **HTML** ให้คุณวาง HTML ที่กำหนดเองลงในเทมเพลต in-app ใช้สำหรับแบบฟอร์มที่กำหนดเอง, แบบสำรวจ หรือวิดีโอที่ฝังไว้ เมื่อไม่มีบล็อก Form เฉพาะสำหรับข้อความ in-app


##### ตัวอย่าง

ตัวอย่างด้านล่างแสดงวิธีการทั่วไปในการใช้บล็อก HTML ในเทมเพลต in-app: แบบฟอร์มสำหรับลูกค้าเป้าหมาย, แบบสำรวจ และวิดีโอที่ฝังไว้

<Aside type="note">
ตัวอย่างแบบฟอร์มและแบบสำรวจจะบันทึก device tags และส่ง events ผ่าน Pushwoosh สร้าง custom events ในบัญชีของคุณก่อนที่จะใช้ในแคมเปญ
</Aside>

<Tabs>
<TabItem label="แบบฟอร์มสำหรับลูกค้าเป้าหมาย">

แบบฟอร์มสำหรับลูกค้าเป้าหมายนี้จะเขียนชื่อและอีเมลเป็น tags, ส่ง event `promo_requested`, แสดงข้อความขอบคุณ แล้วจึงปิด in-app

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="แบบฟอร์มสำหรับลูกค้าเป้าหมาย HTML ใน in-app editor ที่มีฟิลด์ชื่อและอีเมล และปุ่ม Send me the code" width="360"/>

<details>
<summary>โค้ด HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="แบบสำรวจ">

แบบสำรวจนี้จะบันทึกเวลาออกกำลังกายที่เลือกเป็น tag, ส่ง event `schedule_survey_completed`, แสดงข้อความขอบคุณ แล้วจึงปิด in-app

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="แบบสำรวจ HTML ใน in-app editor ถามว่าผู้ใช้ชอบออกกำลังกายเวลาใด พร้อมตัวเลือกเวลาสี่แบบ" width="360"/>

<details>
<summary>โค้ด HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="วิดีโอ">

ตัวอย่างนี้ฝังวิดีโอ YouTube ในข้อความ in-app

<details>
<summary>โค้ด HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>
```


</details>

</TabItem>
</Tabs>



### Menu

บล็อก **Menu** จะวางรายการที่สามารถคลิกได้หลายรายการในแถวหรือคอลัมน์ ใช้สำหรับแถบนำทางหรือรายชื่อผู้ติดต่อของบริษัท

สำหรับแต่ละรายการในเมนู ให้ตั้งค่า:

* **Label:** ข้อความที่ผู้ใช้เห็น
* **URL:** ที่ที่รายการจะเปิด
* **Target:** แท็บเดียวกันหรือแท็บใหม่

ในการตั้งค่าบล็อก คุณยังสามารถตั้งค่า:

* **Direction:** แนวนอนหรือแนวตั้ง
* **Alignment:** ซ้าย, กลาง หรือขวา
* **Separator:** ตัวคั่นเสริมระหว่างรายการ
* แบบอักษร, ขนาด, น้ำหนัก, ระยะห่างตัวอักษร และสีของลิงก์/ข้อความ

### Social

บล็อก **Social** จะแสดงแถวของไอคอนโซเชียลมีเดียที่ลิงก์ไปยังโปรไฟล์ของคุณ ใช้เพื่อส่งผู้ใช้ไปยัง Facebook, Instagram, X และแพลตฟอร์มอื่นๆ จากข้อความ in-app

เพิ่มรายการแพลตฟอร์ม จากนั้นตั้งค่าการจัดตำแหน่ง, ขนาดไอคอน และช่องว่างระหว่างไอคอน

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="การตั้งค่าบล็อก Social ที่มีลิงก์ TikTok, Instagram และ Facebook พร้อมด้วย Alignment, Icon size และ Gap" width="320"/>

### Countdown timer

บล็อก **Timer** คือตัวนับถอยหลังในข้อความ in-app ใช้สำหรับข้อเสนอที่มีเวลาจำกัด, flash sales และการแจ้งเตือนกิจกรรม

เพื่อตั้งค่า:

1. ใน **Countdown** ตั้งค่า **End date** และ **End time** จากนั้นเลือก **Timezone** และ **Language** สำหรับป้ายกำกับของตัวจับเวลา
2. เปิด **Labels** เพื่อแสดงคำบรรยาย "days / hours / minutes / seconds" ใต้ตัวเลข หรือปิดเพื่อแสดงเฉพาะตัวเลข
3. ใน **Appearance** ตั้งค่า **Background**, **Digits color**, **Labels color** และขนาดตัวอักษรสำหรับตัวเลข (ค่าเริ่มต้น 40px) และป้ายกำกับ (ค่าเริ่มต้น 16px)
4. ปรับ **Spacing** (padding) ตามต้องการ

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="การตั้งค่าบล็อก Timer ที่มี Countdown end date และ time, Labels, Appearance และ Spacing options"/>

### Columns

**Columns** จะแบ่ง canvas ออกเป็นส่วนๆ เคียงข้างกัน เพื่อให้คุณสามารถวางเนื้อหาติดกันในแถวเดียวได้

ลากหนึ่งในบล็อกเหล่านี้ลงบน canvas:

* **2 columns:** สองคอลัมน์เท่ากัน
* **3 columns:** สามคอลัมน์เท่ากัน
* **4 columns:** สี่คอลัมน์เท่ากัน
* **33 / 67:** คอลัมน์ซ้ายกว้างประมาณ 33%, ขวาประมาณ 67%
* **67 / 33:** คอลัมน์ซ้ายกว้างประมาณ 67%, ขวาประมาณ 33%

จากนั้นเพิ่มเนื้อหาลงในแต่ละคอลัมน์ หากต้องการเปลี่ยนระยะห่างสำหรับทุกคอลัมน์ในเทมเพลต ให้เปิด **Settings** → **Columns defaults** และปรับ padding ด้านนอก, padding ของคอลัมน์ และช่องว่างระหว่างคอลัมน์

### Products

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-47.webp" alt="บล็อก Products ที่มีการ์ดผลิตภัณฑ์สองใบแสดงรูปภาพ, ชื่อ, คำอธิบาย, ราคา และปุ่ม Shop now"/>

ในแผงการตั้งค่า ใต้ **Source** เลือกว่าผลิตภัณฑ์มาจากที่ใด:

* **Manual:** ป้อนผลิตภัณฑ์ด้วยตนเอง หรือคลิก **Pick from catalog…** เพื่อเลือกรายการเฉพาะจาก [Product Catalog](/th/product/content/product-catalog/) ของคุณตาม ID คุณสามารถผสมทั้งสองอย่างในบล็อกเดียวกันได้
* **Catalog rule:** ดึงผลิตภัณฑ์โดยอัตโนมัติตามหมวดหมู่และลำดับการจัดเรียง ซึ่งจะดึงข้อมูลใหม่จากแคตตาล็อกเมื่อข้อความแสดงขึ้น
* **Cart:** แสดงรายการจากตะกร้าสินค้าที่ถูกทิ้งของผู้ใช้แต่ละคน [วิธีการตั้งค่าแคมเปญตะกร้าสินค้าที่ถูกทิ้ง](/th/product/how-to-guides/lifecycle-marketing-campaigns/how-to-set-up-an-abandoned-cart-campaign/)

<Aside type="note">
**Catalog rule** และ **Cart** ต้องการ **Content Templates** ในแผนของคุณ และ [API access token](/th/developer/api-reference/api-access-token/) (**Settings → API Access**) หากตัวเลือก **Source** ไม่สามารถเปลี่ยนเป็นหนึ่งในนั้นได้ หรือบล็อกไม่แสดงผลิตภัณฑ์ โปรดติดต่อฝ่ายสนับสนุนหรือผู้จัดการบัญชีของคุณ หรือสร้าง token แล้วเลือก source ใหม่อีกครั้ง
</Aside>

เมื่อคุณเลือก source แล้ว การตั้งค่าเหล่านี้จะควบคุมลักษณะของตารางและการ์ด:

* **Number of products** (หรือ **Max products shown** สำหรับ **Cart**): จำนวนการ์ดที่จะแสดง
* **Columns:** 1, 2 หรือ 3 การ์ดต่อแถว
* **Gap:** ช่องว่างระหว่างการ์ด
* **Description limit:** ขีดจำกัดตัวอักษรที่ข้อความคำอธิบายจะถูกตัด เพื่อให้การ์ดมีขนาดสม่ำเสมอ
* **Card template:** เลือกเลย์เอาต์ จากนั้นตั้งค่า **Card background**, **Card corner radius** และ **Content padding** สำหรับทุกการ์ด

## บันทึกและนำบล็อกกลับมาใช้ใหม่

บันทึกบล็อกเพื่อนำกลับมาใช้ใหม่ในเทมเพลต in-app นี้หรือเทมเพลตอื่น แทนที่จะต้องสร้างใหม่ทุกครั้ง

1. เลือกบล็อกบน canvas
2. คลิกไอคอนบุ๊กมาร์ก (**Save block for reuse**) ในแถบเครื่องมือของบล็อกและตั้งชื่อ

<img src="/rich-media-create-rich-media-in-the-built-in-editor-42.webp" alt="แถบเครื่องมือบล็อก Card ที่มีไอคอน Move up, Move down, Duplicate, Delete, Save block for reuse และ Ask AI"/>

บล็อกที่บันทึกไว้จะปรากฏใต้ **Saved blocks** ที่ด้านล่างของแท็บ **Blocks**

* ลากบล็อกที่บันทึกไว้ลงบน canvas หรือคลิกเพื่อเพิ่มที่ส่วนท้ายของเทมเพลต
* คลิก **×** บนไทล์ของบล็อกที่บันทึกไว้เพื่อลบ

### ทำให้สำเนาซิงค์กัน

เมื่อคุณบันทึกบล็อก ให้เปิด **Keep copies in sync** เพื่อเชื่อมโยงสำเนาที่แทรกทุกอันเข้ากับ source เดียวกัน แก้ไข source เพียงครั้งเดียว และการเปลี่ยนแปลงจะถูกนำไปใช้ทุกที่ที่ใช้บล็อกนั้น

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

* **Edit synced block:** ปลดล็อกสำเนานี้เพื่อให้คุณสามารถเปลี่ยนแปลงได้ แบนเนอร์จะปรากฏที่ด้านบน คลิก **Apply to all** เพื่อบันทึกการเปลี่ยนแปลงของคุณไปยัง source และสำเนาอื่นๆ ทั้งหมด หรือ **Cancel** เพื่อยกเลิก คุณสามารถปลดล็อกบล็อกที่ซิงค์ได้ครั้งละหนึ่งบล็อกเท่านั้น
* **Update from source:** แทนที่สำเนานี้ด้วยเวอร์ชันล่าสุดจาก source
* **Detach from source:** ยกเลิกการเชื่อมโยงสำเนานี้จาก source เพื่อให้คุณสามารถแก้ไขได้ด้วยตัวเอง

<Aside type="note">
ทุกครั้งที่คุณเปิดเทมเพลต in-app, Pushwoosh จะตรวจสอบสำเนาที่ซิงค์และอัปเดตสำเนาที่ล้าสมัย ข้อความ toast จะแสดงจำนวนที่ถูกรีเฟรช หาก source มีเนื้อหาใหม่กว่า การตั้งค่าของสำเนาจะแสดงคำเตือนจนกว่าคุณจะเปิดเทมเพลตใหม่หรือคลิก **Update from source** หาก source ถูกลบ สำเนาจะเก็บเนื้อหาล่าสุดไว้และคุณสามารถทำได้เพียง **Detach from source** เท่านั้น
</Aside>