# สร้างข้อความในแอปในตัวแก้ไขในตัว

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

<Aside type="note">
ก่อนที่คุณจะเริ่ม ให้ผสานรวม Pushwoosh SDK เพื่อให้ข้อความในแอปสามารถปรากฏในแอปของคุณได้ [เรียนรู้เพิ่มเติม](/th/product/messaging-channels/in-apps/)
</Aside>

## สร้างเทมเพลตในแอปใหม่

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

1. ไปที่ **Content** → **In-apps**
2. คลิก **Add template**

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="หน้า Content In-apps พร้อมปุ่ม Add template ที่มุมขวาบนของรายการเทมเพลต"/>

3. ป้อนชื่อเทมเพลต
4. เลือกวิธีสร้างเทมเพลต:
   * **Upload ZIP:** [อัปโหลดไฟล์ ZIP](/th/developer/guides/content/rich-media-templates-syntax) พร้อมข้อความในแอป HTML ของคุณ
   * **Create new template:** สร้างเทมเพลตในตัวแก้ไขในตัว
5. เลือก **Create new template**
6. คลิก **Add template**

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="แบบฟอร์มเทมเพลตใหม่พร้อมช่องชื่อ ตัวเลือก Upload ZIP และเลือก Create new template"/>


### สำรวจเค้าโครงของตัวแก้ไข

ตัวแก้ไขในตัวมีสี่ส่วน แต่ละส่วนมีหน้าที่ชัดเจน

**แถบด้านบน**

ใช้แถบด้านบนเพื่อเปลี่ยนชื่อเทมเพลต เลิกทำการแก้ไข บันทึกงานของคุณ หรือเปิด **In-app settings** เมื่อคุณต้องการเปลี่ยนลักษณะที่ข้อความปรากฏบนอุปกรณ์ ดู [กำหนดค่าลักษณะที่ปรากฏของข้อความในแอปบนอุปกรณ์](#configure-how-the-in-app-looks-on-device)

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="แถบด้านบนของตัวแก้ไขในแอปพร้อมชื่อเทมเพลต, Undo, Redo, In-app settings และ Save"/>

**Canvas**

ใช้ canvas เพื่อดูข้อความตามที่ผู้ใช้จะเห็น และเพื่อแก้ไขข้อความ รูปภาพ และปุ่มโดยตรงบนเค้าโครง เทมเพลตที่ว่างเปล่าจะแสดง **Start with a block** เหนือ canvas มีปุ่มสลับโทรศัพท์/แท็บเล็ตเพื่อเปลี่ยนความกว้างของการแสดงตัวอย่าง — ไม่ได้เปลี่ยนเค้าโครงของคุณ เพียงแค่เปลี่ยนความกว้างของหน้าจอที่คุณกำลังดูตัวอย่าง

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="Canvas ที่ว่างเปล่าในตัวแก้ไขในแอปพร้อมข้อความ Start with a block ตรงกลาง" width="480"/>

**Layers**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="แผง Layers แสดงรายการ Card, Image, Heading, Text, Timer, Buttons และ Footer ในโครงสร้างต้นไม้"/>

**แผงด้านขวา**

ใช้ **Blocks** ในแผงด้านขวาเพื่อเพิ่มเนื้อหาลงในข้อความ และ **Settings** เมื่อคุณต้องการการจัดรูปแบบที่ใช้กับทั้งเทมเพลตพร้อมกัน ดู [กำหนดค่าการจัดรูปแบบทั้งเทมเพลต](#configure-template-wide-styling)

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="แท็บ Blocks ในแผงด้านขวาพร้อม Heading, Text, Button, Image และบล็อกเนื้อหาอื่นๆ" width="320"/>

### เริ่มสร้างเทมเพลต

หลังจากที่คุณสร้างเทมเพลต ตัวแก้ไขจะเปิดขึ้นพร้อมกับ canvas ที่ว่างเปล่าและแท็บ **Blocks** ทางด้านขวา

1. ลากบล็อกออกจากแผง **Blocks** ไปยัง canvas หรือคลิกบล็อกในแผงเพื่อเพิ่ม
2. เพิ่มบล็อกต่อไปในลักษณะเดียวกันจนกว่าเค้าโครงจะพร้อม
3. เปิดแท็บ **Settings** เมื่อคุณต้องการการจัดรูปแบบทั้งเทมเพลต


<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="ตัวแก้ไขในแอปที่ว่างเปล่าพร้อม Start with a block บน canvas และแผง Blocks ที่เปิดอยู่"/>

### เพิ่มบล็อกเนื้อหา

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

เปิดแท็บ **Blocks** และลากบล็อกไปยัง canvas หรือคลิกบล็อกเพื่อเพิ่ม บล็อกที่มีอยู่:

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

### หัวเรื่องและข้อความ

บล็อก **Heading** และ **Text** ใช้สำหรับข้อความที่ผู้ใช้อ่านในข้อความในแอป แก้ไขข้อความบน 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 จากบัญชีของคุณ [เรียนรู้เพิ่มเติมเกี่ยวกับข้อความในแอปที่เป็นส่วนตัว](/th/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### รูปภาพ

บล็อก **Image** จะแสดงรูปภาพในเทมเพลตในแอป เลือกบน canvas เพื่อเปิดการตั้งค่า **Image** ในแผงด้านขวา

* **Add image** / **Replace image:** คลิก **Add image** เมื่อบล็อกว่างเปล่า หรือ **Replace image** เมื่อมีรูปภาพอยู่แล้ว คุณสามารถอัปโหลดไฟล์หรือเลือกจาก [Media store](/th/product/content/media-store/) ของคุณ
* **Image URL:** วางลิงก์ที่โฮสต์ไปยังรูปภาพ
* **Alt text:** อธิบายรูปภาพเพื่อการเข้าถึง
* **Link URL:** เปิดเว็บไซต์เมื่อแตะรูปภาพ
* **Link target:** เปิดลิงก์ในแท็บเดียวกันหรือแท็บใหม่
* **File:** หลังจากที่คุณเพิ่มรูปภาพ จะแสดงเส้นทางของไฟล์ที่ใช้งานอยู่

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="บล็อก Image ที่ว่างเปล่าบน canvas พร้อมการตั้งค่า Image ที่แสดง Add image, Image URL, Alt text, Link URL และ Spacing" width="600"/>

### ปุ่ม

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

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

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

1. คลิกไอคอนลิงก์ในแถบเครื่องมือเพื่อเปิด **Insert/Edit Link**
2. เลือก **Action type**
3. กรอกข้อมูลในช่องสำหรับแอ็คชั่นนั้น (ดูด้านล่าง)
4. คลิก **Save**

#### เปิดเว็บไซต์

**Open Website** จะเปิดลิงก์เมื่อผู้ใช้แตะปุ่ม ป้อนที่อยู่ใน **URL** สิ่งที่คุณสามารถป้อนได้:

* เว็บไซต์: `https://example.com`
* ลิงก์แอปที่เปิดหน้าจอภายในแอปของคุณ: `myapp://promo`
* ปิดข้อความในแอปโดยไม่ต้องใช้ JavaScript: `pushwoosh://close`

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

#### รัน JavaScript ที่กำหนดเอง

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

ใช้เมื่อการแตะควรทำบางอย่างใน Pushwoosh ไม่ใช่แค่เปิดลิงก์ ผู้ใช้ในแอปยังคงเห็นปุ่มปกติ พวกเขาไม่เห็นแท็กหรือเหตุการณ์ คุณเป็นคนตัดสินใจว่าจะเกิดอะไรขึ้นต่อไปบนหน้าจอ: เปิดข้อความทิ้งไว้ หรือปิดใน **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()`: ปิดข้อความในแอป ละเว้นเพื่อเปิดข้อความทิ้งไว้หลังจากการแตะ
* `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(...)`: อ่านแท็กปัจจุบัน มีประโยชน์ใน HTML ที่กำหนดเองเพื่อเปลี่ยนสิ่งที่ข้อความแสดง
* `pushwoosh.getCustomData()`: อ่านข้อมูลที่กำหนดเองที่ส่งมาจากข้อความพุชที่เปิดข้อความในแอปนี้

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="เทมเพลตในแอปพร้อมปุ่ม 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` บนอุปกรณ์ของพวกเขาและปิดข้อความในแอป จากนั้นคุณสามารถกำหนดเป้าหมายผู้ใช้นั้นใน [segment](/th/product/audience-data-and-segmentation/segmentation/) หรือ [Customer Journey](/th/product/customer-journey/journey-elements/#in-app)

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

### ตัวแบ่ง

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

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

### HTML

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


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

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

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

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

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="แบบฟอร์มสำหรับลูกค้าเป้าหมาย HTML ในตัวแก้ไขในแอปพร้อมช่องชื่อและอีเมลและปุ่ม 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>รับส่วนลด 20% ของคุณ</h2>
<p>ทิ้งชื่อและอีเมลของคุณไว้ — เราจะส่งรหัสโปรโมชั่นให้ทันที</p>

<div id="form">
  <input type="text" id="name" placeholder="ชื่อของคุณ" />
  <input type="email" id="email" placeholder="อีเมลของคุณ" />
  <button onclick="submit()">ส่งรหัสให้ฉัน</button>
</div>

<div class="thanks" id="thanks">
  🎉 เรียบร้อย! ตรวจสอบกล่องจดหมายของคุณเพื่อรับรหัสโปรโมชั่น
</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="แบบสำรวจ">

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="แบบสำรวจ HTML ในตัวแก้ไขในแอปถามว่าผู้ใช้ชอบออกกำลังกายเวลาใดพร้อมตัวเลือกเวลาสี่แบบ" 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>คุณชอบออกกำลังกายเวลาไหน?</h2>
<p>ช่วยเราจัดตารางคลาสที่ดีที่สุดสำหรับคุณ</p>

<button class="option" onclick="pick('morning')">☀️ ตอนเช้า (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ ตอนบ่าย (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 ตอนเย็น (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 เฉพาะวันหยุดสุดสัปดาห์</button>

<div class="thanks" id="thanks">รับทราบ! เราจะส่งตารางที่ดีที่สุดให้คุณ 💪</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 ในข้อความในแอป

<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>ตัวอย่างวิดีโอในแอป</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>ตัวอย่างวิดีโอในแอป</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** จะวางรายการที่สามารถคลิกได้หลายรายการในแถวหรือคอลัมน์ ใช้สำหรับแถบนำทางหรือรายชื่อผู้ติดต่อของบริษัท

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

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

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

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

### โซเชียล

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

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

<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"/>

### ตัวนับถอยหลัง

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

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

1. ใน **Countdown** ตั้งค่า **End date** และ **End time** จากนั้นเลือก **Timezone** และ **Language** สำหรับป้ายกำกับตัวจับเวลา
2. เปิด **Labels** เพื่อแสดงคำบรรยาย "วัน / ชั่วโมง / นาที / วินาที" ใต้ตัวเลข หรือปิดเพื่อแสดงเฉพาะตัวเลข
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, Labels, Appearance และตัวเลือก Spacing"/>

### คอลัมน์

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

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

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

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

## กำหนดค่าการจัดรูปแบบทั้งเทมเพลต

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

เปิดแท็บ **Settings** ในแผงด้านขวา

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="แท็บ Settings พร้อมส่วน Document, Popup และสไตล์เริ่มต้นสำหรับบล็อกและคอลัมน์" width="320"/>

ส่วนที่มีอยู่:

* **Document:** ขนาดและลักษณะของพื้นที่ข้อความทั้งหมด: ความกว้าง, padding, สีพื้นหลังหรือรูปภาพ, สีข้อความ, ตระกูลแบบอักษร และช่องว่างระหว่างบล็อก
* **Popup:** ลักษณะที่ข้อความวางอยู่บนพื้นหลังที่หรี่แสง: รัศมีมุม, รวมถึงสีและความทึบของโอเวอร์เลย์
* **Block defaults:** สไตล์เริ่มต้นร่วมกันสำหรับบล็อกที่คุณเพิ่มในภายหลัง เพื่อให้เนื้อหาใหม่ตรงกับเทมเพลตจนกว่าคุณจะแทนที่บล็อกบน canvas
* **Columns defaults:** ระยะห่างสำหรับทุกเค้าโครง Columns: padding ด้านนอก, padding ภายในแต่ละคอลัมน์ และช่องว่างระหว่างคอลัมน์
* **Card defaults:** ลักษณะเริ่มต้นสำหรับคอนเทนเนอร์ Card ที่จัดกลุ่มเนื้อหาในเค้าโครง ซึ่งจะถูกนำไปใช้จนกว่าคุณจะจัดสไตล์การ์ดทีละใบ
* **Button group defaults:** ระยะห่างและการจัดตำแหน่งเมื่อมีปุ่มหลายปุ่มอยู่ด้วยกันเป็นกลุ่ม
* **Button defaults:** ลักษณะเริ่มต้นสำหรับบล็อก Button ใหม่ เพื่อให้ CTA มีความสอดคล้องกันทั่วทั้งเทมเพลตจนกว่าคุณจะจัดสไตล์แยกต่างหาก
* **Divider defaults:** สไตล์เส้นเริ่มต้น, สี, ความหนา และความกว้างสำหรับบล็อก Divider ใหม่

ค่าเริ่มต้นจะถูกนำไปใช้ในทุกที่ที่บล็อกแต่ละบล็อกไม่ได้แทนที่

<Aside type="note">
ไม่มีการตั้งค่าความสูง ป๊อปอัปจะขยายตามเนื้อหา สำหรับข้อความเต็มหน้าจอ ให้ตั้งค่า **Width** ใน **Settings** และเลือก **Fullscreen** ใน **In-app settings**
</Aside>

## แปลเทมเพลตเป็นภาษาท้องถิ่น

เทมเพลตหลายภาษาจะจัดเก็บสำเนาที่แปลเป็นภาษาท้องถิ่นสำหรับแต่ละภาษาในการออกแบบในแอปเดียว ใช้ตัวสลับภาษาเหนือ canvas เพื่อเพิ่มภาษาและแก้ไขเนื้อหาต่อภาษา สำหรับวิธีการทำงานของการส่งข้อความหลายภาษาในทุกช่องทาง ดู [การส่งข้อความหลายภาษา](/th/product/personalization/multi-language/)

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

<Aside type="note">
บล็อกใดๆ ที่คุณเพิ่มจะปรากฏพร้อมเนื้อหาเดียวกันสำหรับทุกภาษา อย่าลืมแปลข้อความใหม่และป้ายกำกับปุ่มสำหรับทุกภาษาที่คุณใช้ในเทมเพลตของคุณ
</Aside>

## กำหนดค่าลักษณะที่ปรากฏของข้อความในแอปบนอุปกรณ์

**In-app settings** ควบคุมลักษณะที่ข้อความปรากฏและทำงานบนอุปกรณ์: ตำแหน่ง, แอนิเมชั่น, ท่าทางการปัด และปุ่มปิด การตั้งค่าเหล่านี้ใช้ได้กับ iOS และ Android Native เท่านั้น

คลิก **In-app settings** ในแถบด้านบน:

* **Position on Screen:** Fullscreen, Top, Center หรือ Bottom
* **Present Animation** / **Close Animation:** None, Fade, Left, Right, Up หรือ Down หรือ Default เพื่อใช้ค่าเริ่มต้น SDK ของแอปของคุณ

<Aside type="note">
**None** และ **Fade** ปัจจุบันทำงานบน Android บน iOS ข้อความจะปรากฏและหายไปทันที (การจัดตำแหน่งจะมาเร็วๆ นี้)
</Aside>

* **Animation Duration (MS):** 100 ถึง 3000 มิลลิวินาที เว้นว่างไว้เพื่อใช้เวลาเริ่มต้นของ SDK
* **Swipe to Close:** เปิดใช้งานการผสมผสานใดๆ ของ Left, Right, Up และ Down
* **Show close button:** เปิดหรือปิดปุ่มควบคุมการปิด เมื่อเปิด ให้ตั้งค่า **Position** (Top right, Top left, Bottom right, Bottom left), **Background** (สี หรือ **Transparent**) และ **Icon Color** ซึ่งแตกต่างจากการตั้งค่าอื่นๆ ในโมดอลนี้ ลักษณะของปุ่มปิดจะถูกเรนเดอร์ลงในข้อความเองและแสดงบนทุกแพลตฟอร์ม ไม่ใช่แค่ iOS และ Android Native

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="โมดอลการตั้งค่าในแอปพร้อมตำแหน่ง, แอนิเมชั่น, การปัดเพื่อปิด และตัวเลือกปุ่มปิด"/>

คลิก **Apply** เพื่อบันทึกตัวเลือกของคุณ หรือ **Cancel** เพื่อยกเลิก

## บันทึกเทมเพลต

คลิก **Save** ในแถบด้านบนเพื่อบันทึกการเปลี่ยนแปลงของคุณ ใช้ **Undo**/**Redo** ในแถบด้านบนเพื่อย้อนกลับและไปข้างหน้าในการแก้ไขของคุณ

<Aside type="note">
การบันทึกจะจัดเก็บเทมเพลตในแอปของคุณใน **Content** → **In-apps** จากที่นั่นคุณสามารถดูตัวอย่าง แก้ไข และจัดการเทมเพลตได้ [เรียนรู้เพิ่มเติม](/th/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## ใช้เทมเพลตที่บันทึกไว้

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

* [แสดงข้อความในแอปเป็นส่วนหนึ่งของ Customer Journey](/th/product/customer-journey/journey-elements/#in-app)
* [ส่งข้อความพุชที่เปิดข้อความในแอปเมื่อคลิก](/th/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
* [แสดงข้อความในแอปเดียวให้ผู้ใช้ของคุณ](/th/product/messaging-channels/in-apps/)