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

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

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

## สร้างเทมเพลต In-App ใหม่

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

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. เลือกวิธีสร้างเทมเพลต:
   * **Create new template:** สร้างเทมเพลตในตัวแก้ไขในตัว
   * **Upload ZIP:** [อัปโหลดไฟล์ ZIP](/th/developer/guides/content/rich-media-templates-syntax) พร้อมข้อความ In-App แบบ HTML ของคุณ
   * **Create native rich media:** สร้าง In-App แบบเนทีฟที่เรนเดอร์โดย SDK [เรียนรู้เพิ่มเติม](/th/product/content/in-apps/create-native-in-app-messages/)
5. เลือก **Create new template**
6. คลิก **Add template**

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="กล่องโต้ตอบ Add new template ที่มีช่องชื่อ, ตัวเลือก Create new template ที่ถูกเลือก, Upload ZIP, และ Create native rich media"/>

## สำรวจเลย์เอาต์ของตัวแก้ไข

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

### แถบด้านบน

แถบด้านบนเป็นที่ที่คุณจัดการเทมเพลตโดยรวม: ชื่อ, ประวัติการเลิกทำ, สถานะการบันทึก, ลักษณะที่ปรากฏบนอุปกรณ์ (**In-app settings**), ภาษา (**Auto-translate** และตัวสลับภาษา), และความกว้างของการแสดงตัวอย่างบนโทรศัพท์หรือเดสก์ท็อป ดูที่ [กำหนดค่าลักษณะที่ปรากฏของ In-App บนอุปกรณ์](/th/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) และ [ปรับเทมเพลตให้เข้ากับท้องถิ่น](#localize-the-template)

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="แถบด้านบนของตัวแก้ไข In-App ที่มีชื่อเทมเพลต, Undo, Redo, In-app settings, ตัวสลับภาษา, Auto-translate, การแสดงตัวอย่างบนโทรศัพท์และเดสก์ท็อป, และ Saved"/>

เปิดเมนู **⋮** ในแถบด้านบนเพื่อดูการดำเนินการเพิ่มเติม:

#### การแสดงตัวอย่าง

**Preview** ให้คุณลองใช้ข้อความก่อนที่จะบันทึก: แตะปุ่ม, เลื่อนผ่านโฟลว์หลายหน้าจอ, และตรวจสอบเลย์เอาต์บนโทรศัพท์หรือเดสก์ท็อป

<img src="/rich-media-create-rich-media-in-the-built-in-editor-44.webp" alt="แผง Preview ที่มีตัวสลับโทรศัพท์และเดสก์ท็อป, Restart, และข้อความ In-App ที่แสดงรูปภาพ, ข้อความข้อเสนอ, ตัวจับเวลา, และปุ่ม Claim" width="480"/>

สิ่งที่ทำงานในการแสดงตัวอย่าง:

* ปุ่มและโฟลว์หลายหน้าจอทำงานจริง
* ลิงก์และ deep links จะถูกรายงาน แต่ไม่เปิด
* การเรียก SDK และสถิติการเปิด/คลิกจะปิดอยู่
* ภาษาจะตรงกับตัวสลับภาษา Merge Tags จะยังคงเป็นตัวยึดตำแหน่ง

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

#### Brand book

* **Brand book:** เปิด [Brand book](/th/product/content/brand-book/) ของบัญชีคุณ
* **Apply brand book styles:** จัดสไตล์เทมเพลตใหม่ให้ตรงกับ Brand book ของคุณ (หลังจากที่คุณตั้งค่าแล้ว)
* **Reset custom styles:** ลบการกำหนดสไตล์ที่กำหนดเองบนเทมเพลตและกลับไปเป็นค่าเริ่มต้น


### Canvas

แก้ไขข้อความบน canvas: คลิกข้อความ, รูปภาพ, และปุ่มเพื่อเปลี่ยนแปลง ใช้ตัวสลับโทรศัพท์/เดสก์ท็อปในแถบด้านบนเพื่อตรวจสอบว่าเลย์เอาต์มีลักษณะอย่างไรในแต่ละความกว้าง ตัวสลับจะเปลี่ยนเฉพาะการแสดงตัวอย่างเท่านั้น ไม่ใช่ตัวเลย์เอาต์เอง

### 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:** เพิ่มเนื้อหาลงในข้อความ ดูที่ [การอ้างอิงบล็อกของตัวแก้ไข In-App](/th/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/)
* **Settings:** ใช้สไตล์กับทั้งเทมเพลตพร้อมกัน ดูที่ [กำหนดค่าการตั้งค่าเทมเพลต In-App](/th/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)
* **AI:** แชทกับผู้ช่วย AI เพื่อสร้างหรือแก้ไขเนื้อหาจาก prompt

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

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

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

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

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

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

ดู [การอ้างอิงบล็อกของตัวแก้ไข In-App](/th/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) สำหรับการตั้งค่าของแต่ละบล็อก, และ [วิธีบันทึกและนำบล็อกกลับมาใช้ใหม่](/th/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks)

### แสดงบล็อกให้ผู้ใช้เฉพาะกลุ่ม

ไม่ใช่ผู้ใช้ทุกคนที่ต้องเห็นบล็อกเดียวกัน ตั้งค่า **display condition** บนบล็อกเพื่อให้แสดงหรือซ่อนตาม [Tags](/th/product/audience-data-and-segmentation/user-data-tags/tags/) ของผู้ใช้ คุณยังคงส่งเทมเพลตเดียว, แต่แต่ละคนจะเห็นเฉพาะส่วนที่เกี่ยวข้องกับตนเองเท่านั้น

เลือกบล็อกบน canvas, เปิด **Display condition** ในแผงด้านขวา, และเปิด **Show this block conditionally** [เรียนรู้เพิ่มเติม](/th/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)

## ปรับเทมเพลตให้เข้ากับท้องถิ่น

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

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

## กำหนดค่าการตั้งค่าเทมเพลต

ใช้สองตำแหน่งในการจัดสไตล์และวางตำแหน่งข้อความ:

* แท็บ **Settings** (แผงด้านขวา): ขนาดเอกสาร, สี, การพิมพ์, และสไตล์เริ่มต้นสำหรับบล็อก
* **In-app settings** (แถบด้านบน): ตำแหน่งบนหน้าจอ, แอนิเมชัน, และปุ่มปิด

[เรียนรู้เพิ่มเติม](/th/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)

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

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

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