สร้างข้อความ in-app ในเครื่องมือแก้ไขในตัว
เพิ่มเทมเพลตใหม่
Anchor link toในการสร้างเทมเพลต in-app ให้ไปที่ Content → In-apps และคลิก Add template:

ที่นี่ คุณมีสองวิธีในการสร้างเทมเพลต:
- Upload ZIP — อัปโหลดไฟล์ ZIP พร้อมข้อความ in-app ที่เป็น HTML ของคุณ
- Create new template — สร้างเทมเพลตในเครื่องมือแก้ไขแบบภาพ หลังจากสร้างแล้ว คุณสามารถเริ่มต้นจาก เทมเพลตที่สร้างไว้ล่วงหน้า หรือเทมเพลตเปล่า
ในบทความนี้ เราจะดูการสร้างเทมเพลตตั้งแต่ต้น ทำตามขั้นตอนเดียวกันเพื่อปรับแต่งเทมเพลตที่มีอยู่ของคุณ
ป้อนชื่อเทมเพลต เลือก Create new template และคลิก Add template:

คุณสามารถสร้างหน้าข้อความ in-app ใหม่โดยใช้เทมเพลตเริ่มต้น หรือเริ่มจากศูนย์โดยเลือกเทมเพลตเปล่า
การตั้งค่าเทมเพลตทั่วไป
Anchor link toก่อนที่คุณจะเพิ่มบล็อกเนื้อหา ให้กำหนดค่าเทมเพลตในแท็บ Popup:
- ตั้งค่าตำแหน่งของ popup บนหน้าจอ
- เปลี่ยนความกว้างและความสูงของ popup
- ปรับความโค้งของขอบ
- กำหนดค่าการตั้งค่าเนื้อหาสำหรับทั้งเทมเพลต: การจัดตำแหน่ง ความกว้าง แบบอักษร และสี
- ตั้งค่าสีพื้นหลังหรือเพิ่มภาพพื้นหลัง
- ปรับแต่งตำแหน่งและลักษณะของปุ่มปิด

in-app แบบเต็มหน้าจอและบางส่วนของหน้าจอใช้เครื่องมือแก้ไขเดียวกัน เลือกรูปแบบด้านล่างและตั้งค่าความกว้างและความสูงของ popup ให้ตรงกัน
ข้อความ in-app แบบเต็มหน้าจอ
Anchor link toใช้ in-app แบบเต็มหน้าจอสำหรับการ onboarding, paywalls และโปรโมชั่น เช่น offerwalls
ในแท็บ Popup ตั้งค่าความกว้างและความสูงให้ใกล้เคียงกับขนาดหน้าจอของอุปกรณ์เป้าหมายเพื่อให้ข้อความครอบคลุมพื้นที่ส่วนใหญ่ของจอแสดงผล

คำแนะนำเกี่ยวกับรูปภาพสำหรับ in-app แบบเต็มหน้าจอ (แนวตั้ง)
| รูปภาพและข้อความ | ความละเอียดสูง: 1200 x 1000 px ขนาดขั้นต่ำ: 600 x 500 px อัตราส่วนภาพ: 6:5 |
|---|---|
| รูปภาพเท่านั้น | ความละเอียดสูง: 1200 x 2000 px ขนาดขั้นต่ำ: 600 x 1000 px อัตราส่วนภาพ: 3:5 |
ข้อความ in-app แบบบางส่วนของหน้าจอ
Anchor link toin-app แบบบางส่วนของหน้าจอเป็นข้อความซ้อนทับขนาดกะทัดรัดที่ปล่อยให้บางส่วนของแอปยังคงมองเห็นได้ด้านหลัง popup ใช้สำหรับข้อความแจ้งให้ opt-in, ประกาศ และเนื้อหาโปรโมชั่น
ในแท็บ Popup ตั้งค่าความกว้างและความสูงให้เล็กลงเพื่อให้ popup ไม่ครอบคลุมทั้งหน้าจอ

เพิ่มเนื้อหา
Anchor link toบล็อกเนื้อหา
Anchor link toกำหนดเค้าโครงของเทมเพลตโดยการลากและวางบล็อกเนื้อหาที่ต้องการลงในส่วนเนื้อหาของเทมเพลต คุณสามารถเพิ่มหัวข้อ, ข้อความ, รูปภาพ, ปุ่ม, เส้นแบ่ง, ฟอร์มที่กรอกได้, บล็อก HTML, เมนู, ภาพสไลด์, ตัวนับถอยหลัง และตาราง
หากคุณต้องการวางองค์ประกอบเนื้อหามากกว่าหนึ่งรายการในแถวเดียวกัน ให้เพิ่มองค์ประกอบ Columns ลงในเทมเพลต เลือกประเภทบล็อกที่ต้องการและเพิ่มเนื้อหาในแต่ละคอลัมน์:
หากต้องการเปลี่ยนสีพื้นหลังของเค้าโครง ให้คลิกที่ขอบด้านนอก ตรวจสอบให้แน่ใจว่าได้เลือกเค้าโครงทั้งหมดแล้วและเลือกสี:
หากเลือกเค้าโครงทั้งหมด คุณยังสามารถแก้ไขการตั้งค่า padding และอัปโหลดภาพพื้นหลังได้
การวางแนวตั้งและแนวนอน
Anchor link toPushwoosh ให้ความยืดหยุ่นในการสร้างเนื้อหาข้อความ in-app ทั้งในแนวตั้งและแนวนอน สิ่งนี้ช่วยให้แน่ใจว่าแคมเปญของคุณน่าดึงดูดและมีประสิทธิภาพบนทุกอุปกรณ์
แนวตั้ง (แท็บ Mobile)
Anchor link toในการสร้างข้อความ in-app ที่ออกแบบมาสำหรับแนวตั้ง ซึ่งโดยทั่วไปใช้บนอุปกรณ์มือถือ ให้ไปที่ แท็บ Mobile ในเครื่องมือแก้ไข ที่นี่คุณสามารถออกแบบเนื้อหาของคุณให้พอดีกับเค้าโครงแนวตั้งที่เหมาะสมสำหรับหน้าจอสมาร์ทโฟน
แนวนอน (แท็บ Desktop)
Anchor link toสำหรับข้อความ in-app ที่วางแนวนอน ซึ่งโดยทั่วไปนิยมใช้สำหรับหน้าจอที่กว้างกว่า ให้ไปที่ แท็บ Desktop ภายในเครื่องมือแก้ไข ที่นี่คุณสามารถจัดโครงสร้างข้อความ in-app ของคุณเพื่อใช้ประโยชน์จากพื้นที่แนวนอนที่กว้างขึ้น

คอลัมน์ในเค้าโครงแนวนอน
Anchor link toหากคุณต้องการเพิ่มคอลัมน์ในข้อความ in-app แนวนอนของคุณ ก่อนอื่นให้เพิ่มองค์ประกอบ Column กำหนดจำนวนและเค้าโครงของคอลัมน์ที่คุณต้องการ
หลังจากออกแบบข้อความ in-app แนวนอนของคุณด้วยคอลัมน์แล้ว ให้สลับไปที่ แท็บ Mobile เลื่อนลงไปที่ส่วน RESPONSIVE DESIGN ซึ่งอยู่ที่ด้านล่างของแผงการตั้งค่า และเปิดใช้งานตัวเลือก Do Not Stack on Mobile
Pushwoosh ยังช่วยให้คุณสามารถผสมและจับคู่เค้าโครงคอลัมน์ในข้อความ in-app ของคุณได้ คุณสามารถกำหนดค่าคอลัมน์เฉพาะให้ซ้อนกันในแนวตั้งในขณะที่คอลัมน์อื่น ๆ ยังคงอยู่ในแนวนอน ในการทำเช่นนี้ ให้ปรับแต่ละบล็อกคอลัมน์ตามต้องการ

องค์ประกอบเนื้อหา
Anchor link toหัวข้อ
Anchor link toคุณสามารถแก้ไขแบบอักษร, สี, การจัดตำแหน่งข้อความ, ความสูงของบรรทัด และพารามิเตอร์ padding สำหรับหัวข้อได้
คุณยังสามารถประหยัดเวลาโดยให้ AI สร้างข้อความหัวข้อให้คุณ คลิกปุ่มในส่วน Smart Headings ป้อนคำสำคัญบางคำ แล้วคลิก Get Suggestions:
ข้อความ
Anchor link toข้อความสามารถปรับแต่งได้เช่นเดียวกับหัวข้อ (ในเครื่องมือแก้ไข บล็อกนี้มีป้ายกำกับว่า Paragraph) คุณสามารถเปลี่ยนแบบอักษร, สี, การจัดตำแหน่งข้อความ, ความสูงของบรรทัด และพารามิเตอร์ padding ได้
คุณยังสามารถปรับปรุงข้อความของคุณโดยใช้ตัวเลือก Smart Text:
รูปภาพ
Anchor link toในการเพิ่มรูปภาพ ให้คลิกที่บล็อกรูปภาพและลากไฟล์ของคุณไปยังแผงเครื่องมือแก้ไข:
หรือคุณสามารถระบุ Image URL แทนการอัปโหลดไฟล์ได้ คุณยังสามารถวาง URL ของรูปภาพจาก Media store ของคุณลงในช่อง Image URL ได้
คุณยังสามารถทดลองกับการสร้างภาพด้วย AI ได้อีกด้วย ในการทำเช่นนี้ ให้คลิกที่ปุ่มในส่วน Magic Image อธิบายภาพที่คุณต้องการสร้าง แล้วคลิก Generate Images:
หากต้องการวางข้อความทับรูปภาพโดยตรง ให้เลือกบล็อกรูปภาพแล้วคลิก Apply Effects คลิก Text แทรกเนื้อหาของคุณ และปรับพารามิเตอร์:
ในส่วน Action ให้เปิดเมนู Action Type เพื่อตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อคลิกที่รูปภาพ: URL or Deeplink (เปิดเว็บไซต์หรือ deep link ไปยังหน้าภายในแอปของคุณ), Close Popup หรือ Custom Javascript (แทรก JavaScript handler ที่กำหนดเอง) หากไม่ต้องการการกระทำใด ๆ ให้เลือก Close Popup ไว้
ปุ่ม
Anchor link toเมื่อเพิ่มปุ่มลงในเทมเพลตของคุณแล้ว คุณสามารถปรับแต่งข้อความ, สี, padding และเส้นขอบของปุ่มได้
AI สามารถช่วยคุณคิดข้อความปุ่มได้ เพียงคลิกที่ปุ่มในส่วน Smart Buttons ป้อนคำสำคัญ แล้วคลิก Get Suggestions:
ในการระบุการกระทำที่ควรทำหลังจากคลิกปุ่ม ให้ไปที่ส่วน Action และเปิดเมนู Action Type: URL or Deeplink (เปิดเว็บไซต์หรือ deep link), Close Popup หรือ Custom Javascript (แทรก JavaScript handler ที่กำหนดเอง)
เส้นแบ่ง
Anchor link toเส้นแบ่งคือเส้นที่คุณสามารถวางระหว่างบล็อกเนื้อหาได้ ใช้เพื่อจัดโครงสร้างเทมเพลตของคุณและเน้นบล็อกที่สำคัญที่สุด คุณสามารถเปลี่ยนความกว้าง, ประเภทเส้น, การจัดตำแหน่ง และการตั้งค่า padding ของเส้นแบ่งได้
ฟอร์ม
Anchor link toฟอร์มช่วยให้คุณสามารถรวบรวมอีเมล, หมายเลขโทรศัพท์, ความชอบ และข้อมูลอื่น ๆ ของผู้ใช้ซึ่งอาจเป็นประโยชน์สำหรับการสื่อสารในอนาคต องค์ประกอบนี้ถูกกำหนดค่าเป็นฟอร์ม HTML มาตรฐาน: ข้อมูลจะถูกส่งในคำขอ GET หรือ POST ไปยังที่อยู่ที่ระบุในช่อง URL

คลิกที่ชื่อฟิลด์เพื่อกำหนดค่าพารามิเตอร์:
- Field Type: ประเภทของข้อมูลที่ควรส่งในฟิลด์
- Field Name: ชื่อของพารามิเตอร์ที่ข้อมูลจากฟิลด์จะถูกส่งผ่าน
- Field Label: ข้อความที่แสดงเหนือฟิลด์
- Placeholder Text;
- ช่องทำเครื่องหมายที่ระบุว่าฟิลด์นี้จำเป็นต้องกรอกเพื่อส่งฟอร์มหรือไม่

ในการเพิ่มฟิลด์อื่น ให้คลิก Add New Field และเลือกประเภทข้อมูล:

คุณสามารถปรับแต่งพารามิเตอร์ของฟอร์ม เช่น ความกว้าง, การจัดตำแหน่ง, ระยะห่างระหว่างฟิลด์, ข้อความปุ่ม, สี และแบบอักษร
HTML
Anchor link toบล็อก HTML ช่วยให้คุณสามารถเพิ่มโค้ด HTML ที่กำหนดเองลงในเทมเพลตได้
สิ่งนี้มีประโยชน์อย่างยิ่งในการปรับปรุงข้อความ in-app ของคุณด้วยองค์ประกอบแบบโต้ตอบหรือดึงดูดสายตา ตัวอย่างเช่น หากคุณต้องการสร้างฟอร์มที่กำหนดเองสำหรับแบบสำรวจ คุณสามารถใช้บล็อก HTML เพื่อรวมฟอร์มที่คุณออกแบบเองได้
หลังจากตั้งค่าฟอร์มแล้ว คุณสามารถติดตามสถิติได้โดยตรงภายใน Pushwoosh ซึ่งช่วยให้สามารถวิเคราะห์ผลลัพธ์และการโต้ตอบของผู้ใช้ได้อย่างง่ายดาย ในการดำเนินการนี้ คุณจะต้องได้รับความช่วยเหลือจากทีมพัฒนาของคุณ โปรดแชร์ ลิงก์นี้ กับพวกเขา
มีเทมเพลตข้อความ in-app ที่ออกแบบไว้ล่วงหน้าพร้อมฟอร์มสำรวจที่กำหนดเองในเทมเพลตเริ่มต้น คุณสามารถใช้สิ่งนี้เป็นข้อมูลอ้างอิงหรือจุดเริ่มต้นสำหรับฟอร์มสำรวจของคุณเองได้

นอกจากนี้ คุณยังสามารถปรับปรุงข้อความ in-app ของคุณโดยการฝังวิดีโอเพื่อประสบการณ์ผู้ใช้ที่น่าสนใจยิ่งขึ้น นี่คือตัวอย่างวิธีการฝังวิดีโอ YouTube โดยใช้ 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>เมนู
Anchor link toองค์ประกอบ Menu ช่วยให้คุณสามารถวางรายการที่คลิกได้หลายรายการในแถวหรือคอลัมน์ ตัวอย่างเช่น คุณสามารถเพิ่มแถบนำทางหรือข้อมูลติดต่อของบริษัทได้
ในการเพิ่มรายการเมนู ให้คลิก Add New Item:

เพิ่มข้อความรายการและตั้งค่าการกระทำที่ควรทำเมื่อคลิกที่รายการ:

เลือกประเภทเมนูแนวนอนหรือแนวตั้งและเพิ่มตัวคั่นระหว่างรายการหากจำเป็น:

ภาพสไลด์
Anchor link toองค์ประกอบ Carousel จะแสดงภาพหลายภาพในรูปแบบสไลเดอร์ที่สามารถปัดได้ภายในข้อความ in-app เดียว ใช้เพื่อแสดงสินค้าหลายรายการ, ภาพหน้าจอ หรือขั้นตอนการ onboarding

ในการตั้งค่า carousel:
-
เมื่อเลือกบล็อก Carousel แล้ว ให้สลับระหว่าง Mobile และ Desktop ที่ด้านบนของแผงเพื่อกำหนดค่าแต่ละมุมมอง
-
ในส่วน Images ให้ใช้แท็บ Image 1, Image 2, Image 3 ฯลฯ เพื่อเลือกสไลด์ คลิก + เพื่อเพิ่มสไลด์อื่น หรือไอคอนลบเพื่อลบสไลด์ที่ใช้งานอยู่
-
สำหรับสไลด์ที่เลือก ให้คลิก Upload Image หรือเลือกตัวเลือกจาก More Images คุณยังสามารถวางลิงก์ที่โฮสต์ไว้ใน Image URL รวมถึงรูปภาพจาก Media store ของคุณ
-
ป้อน Alternate Text สำหรับสไลด์ หากต้องการปรับภาพเอง ให้คลิก Edit Image ถัดจากภาพตัวอย่างขนาดเล็ก
-
คลิก Show More Options ที่ด้านล่างของแผงหากคุณต้องการการตั้งค่าสไลด์เพิ่มเติม
ตัวนับถอยหลัง
Anchor link toองค์ประกอบ Timer จะเพิ่มการนับถอยหลังลงในข้อความ in-app ของคุณ ใช้สำหรับข้อเสนอที่มีเวลาจำกัด, flash sales และการแจ้งเตือนกิจกรรม ตั้งวันที่และเวลาเป้าหมาย จากนั้นปรับแต่งลักษณะของตัวนับ

ในการตั้งค่าตัวนับ:
-
เมื่อเลือกบล็อก Timer แล้ว ให้สลับระหว่าง Mobile และ Desktop ที่ด้านบนของแผงเพื่อกำหนดค่าแต่ละมุมมอง
-
ในส่วน Countdown ให้ตั้งค่า End Time เป็นวันที่และเวลาที่การนับถอยหลังควรจะถึงศูนย์ เลือก Timezone และ Language สำหรับป้ายกำกับของตัวนับ
-
เปิด Labels เพื่อแสดง Days, Hours, Minutes และ Seconds ใต้ตัวเลข หรือปิดเพื่อแสดงเฉพาะตัวเลขการนับถอยหลัง
-
ในส่วน Styling ให้ตั้งค่า Background, Digits Color และ Labels Color เลือก Digits Font, Digits Font Size, Labels Font และ Labels Font Size
-
กำหนดค่าตัวเลือกอื่น ๆ ใน Image, Action และ General ตามต้องการ
ตาราง
Anchor link toองค์ประกอบ Table ช่วยให้คุณนำเสนอเนื้อหาที่มีโครงสร้างเป็นแถวและคอลัมน์ เช่น การเปรียบเทียบแผน, ราคา หรือรายการคุณสมบัติ เพิ่มหรือลบแถวและคอลัมน์ และปรับแต่งเส้นขอบ, padding และสไตล์ข้อความ

ในการตั้งค่าตาราง:
-
เมื่อเลือกบล็อก Table แล้ว ให้สลับระหว่าง Mobile และ Desktop ที่ด้านบนของแผงเพื่อกำหนดค่าแต่ละมุมมอง
-
ในส่วน Layout ให้ตั้งค่า Columns และ Rows ด้วยปุ่ม + และ -
-
เลือก Background Color เปิด Border เพื่อตั้งค่าสไตล์, ความหนา และสี หรือใช้ More Options สำหรับการตั้งค่าเส้นขอบขั้นสูง เปิด Striped Rows เพื่อสลับสีพื้นหลังของแถว
-
คลิกที่เซลล์ในตัวอย่างเพื่อป้อนข้อความหัวเรื่องหรือเนื้อหา
-
ใน Header และ Content ให้ปรับแต่งแบบอักษร, สี และการจัดตำแหน่งข้อความสำหรับเซลล์หัวเรื่องและเนื้อหา
-
กำหนดค่า Links, General และ Responsive Design ตามต้องการ
การปรับเนื้อหาให้เหมาะกับแต่ละบุคคล
Anchor link toปรับแต่งข้อความหลัก, หัวเรื่อง หรือข้อความปุ่มเพื่อให้เนื้อหาของคุณมีความเกี่ยวข้องและน่าสนใจยิ่งขึ้น ตัวอย่างเช่น คุณสามารถเรียกชื่อผู้ใช้หรือกล่าวถึงความชอบของพวกเขาได้
ขั้นแรก คุณต้อง ตั้งค่า Tags และกำหนดค่าการรวบรวมข้อมูลจากผู้ใช้ (เช่น ผ่านฟอร์มความคิดเห็น) เมื่อสร้างข้อความ in-app ให้เลือกบล็อกเนื้อหาที่ต้องการ คลิก Merge Tags และเลือก Tag ที่คุณต้องการใช้:
เทมเพลตหลายภาษา
Anchor link toคุณสามารถแปลข้อความของเทมเพลตข้อความ in-app ของคุณสำหรับแต่ละภาษาที่ผู้ใช้ของคุณพูดได้ ในการทำเช่นนี้ ให้สลับระหว่างภาษาในรายการ Editable language และแก้ไขเนื้อหาในแต่ละภาษาแยกกัน:

หากเนื้อหาไม่ได้รับการแปล จะแสดงเป็นภาษาที่ระบุเป็น default ใน Language settings
ปรับแต่งลักษณะและการทำงานของข้อความ in-app (iOS และ Android Native)
Anchor link toใช้ In-App Settings เพื่อควบคุมลักษณะและการทำงานของข้อความ in-app ของคุณบนแอป iOS และ Android แบบเนทีฟ คุณสามารถปรับตำแหน่งบนหน้าจอ, เลือกแอนิเมชั่น และเปิดใช้งานการปัดเพื่อปิดได้
ในการกำหนดค่าการตั้งค่า in-app:
- คลิก Settings ที่ด้านบนของหน้าจอ

- ในหน้าต่างการตั้งค่า เลือกลักษณะและการทำงานที่คุณต้องการสำหรับข้อความ in-app ของคุณโดยการปรับตัวเลือกที่มีอยู่:
ตั้งค่าตำแหน่งข้อความบนหน้าจอ
Anchor link toเลือกตำแหน่งที่ข้อความควรปรากฏ
ตัวเลือกประกอบด้วย: Fullscreen, Top, Center, Bottom
เลือกแอนิเมชั่นการเข้า
Anchor link toเลือกวิธีที่ข้อความจะปรากฏบนหน้าจอ ในการตั้งค่า นี่คือตัวเลือก Present Animation
ตัวเลือกประกอบด้วย: Up, Down, Left, Right
เลือกแอนิเมชั่นการออก
Anchor link toเลือกวิธีที่ข้อความจะหายไป ในการตั้งค่า นี่คือตัวเลือก Close Animation
ตัวเลือกประกอบด้วย: Up, Down, Left, Right
เปิดใช้งานการปัดเพื่อปิด (ไม่บังคับ)
Anchor link toอนุญาตให้ผู้ใช้ปิดข้อความโดยการปัดไปในทิศทางเดียวหรือหลายทิศทาง
ตัวเลือกประกอบด้วย: Left, Right, Up, Down

- หลังจากเลือกค่ากำหนดของคุณแล้ว คลิก Apply เพื่อบันทึกการเปลี่ยนแปลง หรือ Cancel เพื่อยกเลิก
บันทึกและใช้เทมเพลต
Anchor link toคลิก Save เพื่อใช้การเปลี่ยนแปลง

ตอนนี้คุณสามารถใช้เทมเพลตข้อความ in-app ของคุณได้ด้วยวิธีใดวิธีหนึ่งต่อไปนี้: