การอ้างอิงบล็อกใน In-app editor
การอ้างอิงสำหรับทุกบล็อกที่คุณสามารถเพิ่มลงบน canvas ของ editor ที่มีในตัว
บล็อกแต่ละประเภทมีวัตถุประสงค์ที่แตกต่างกันในข้อความ:
- หัวเรื่อง: ชื่อเรื่องและหัวข้อสั้นๆ
- ข้อความ: เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
- ปุ่ม: call to action ที่สามารถแตะได้
- รูปภาพ: รูปภาพจาก Media store การอัปโหลด หรือ URL
- วิดีโอ: ภาพขนาดย่อของวิดีโอที่สามารถแตะได้ ซึ่งจะเปิดวิดีโอ YouTube หรือ Vimeo
- การ์ด: รูปภาพพร้อมหัวเรื่อง ข้อความ และปุ่มในเลย์เอาต์เดียว
- เส้นแบ่ง: เส้นที่แบ่งส่วนต่างๆ
- คอลัมน์: เลย์เอาต์แบบเคียงข้างกัน (2, 3 หรือ 4 คอลัมน์เท่ากัน หรือแบ่ง 33/67 และ 67/33)
- ตัวจับเวลา: การนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
- เมนู: แถวหรือคอลัมน์ของลิงก์นำทางหรือลิงก์ติดต่อ
- โซเชียล: ไอคอนที่เชื่อมโยงไปยังโปรไฟล์โซเชียลของคุณ
- HTML: HTML ที่กำหนดเอง เช่น แบบฟอร์ม แบบสำรวจ หรือวิดีโอที่ฝังไว้
- ผลิตภัณฑ์: ตารางการ์ดผลิตภัณฑ์จาก Product Catalog ของคุณ หรือตะกร้าสินค้าที่ถูกละทิ้งของผู้ใช้
วิธีการกำหนดค่าบล็อกใน editor
Anchor link toลากบล็อกลงบน canvas จากแท็บ Blocks หรือคลิกเพื่อเพิ่มที่ส่วนท้าย เลือกบล็อกเพื่อเปิดการตั้งค่าในแผงด้านขวาและกำหนดค่าเนื้อหา ลิงก์ ขนาด และระยะห่าง
หัวเรื่องและข้อความ
Anchor link toบล็อก Heading และ Text ใช้สำหรับเก็บข้อความที่ผู้ใช้อ่านในข้อความ in-app แก้ไขข้อความบน canvas และจัดรูปแบบด้วยแถบเครื่องมือ
คลิกบล็อก Heading หรือ Text เพื่อแก้ไขข้อความบน canvas เลือกข้อความบางส่วนเพื่อเปิดแถบเครื่องมือจัดรูปแบบ: ตัวหนา ตัวเอียง ขีดเส้นใต้ การจัดตำแหน่ง ปุ่มลิงก์ และเมนูแบบเลื่อนลง text style

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

เลือกบน canvas เพื่อเปิดการตั้งค่า Image ในแผงด้านขวา
- Add image / Replace image: คลิก Add image เมื่อบล็อกว่างเปล่า หรือ Replace image เมื่อมีรูปภาพอยู่แล้ว คุณสามารถอัปโหลดไฟล์หรือเลือกจาก 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 เพื่อตั้งค่าแต่ละด้านแยกกัน
วิดีโอ
Anchor link toบล็อก Video เพิ่มวิดีโอ YouTube หรือ Vimeo ลงในข้อความในรูปแบบภาพขนาดย่อที่สามารถแตะได้ ข้อความจะแสดงภาพนิ่งพร้อมสัญลักษณ์ ▶ การแตะจะเปิดวิดีโอในแอป YouTube หรือ Vimeo หรือเบราว์เซอร์

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

- 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 และ Button แบบสแตนด์อโลน
ปุ่ม
Anchor link toButton คือ call to action ที่สามารถแตะได้ในข้อความ in-app ใช้เพื่อเปิด URL, รัน JavaScript ที่กำหนดเอง หรือปิดข้อความ
คลิกบล็อก Button เพื่อแก้ไขป้ายกำกับบน canvas ใช้แถบเครื่องมือเพื่อเปลี่ยนขนาดตัวอักษร สีข้อความ ตัวหนา ตัวเอียง ขีดเส้นใต้ และการจัดตำแหน่ง
เพื่อตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อผู้ใช้แตะปุ่ม:
- คลิกไอคอนลิงก์ในแถบเครื่องมือเพื่อเปิด Insert/Edit Link
- เลือก Action type: Open Website, URL or Deeplink หรือ Custom Javascript
- กรอกข้อมูลในฟิลด์สำหรับการกระทำนั้น (ดูด้านล่าง)
- คลิก Save
Open Website
Anchor link toOpen Website เปิดหน้าเว็บเมื่อผู้ใช้แตะปุ่ม ป้อนที่อยู่ใน URL เช่น https://example.com

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

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

เมธอดที่ใช้ได้ใน onClick
pushwoosh.closeInApp(): ปิดข้อความ in-app ละเว้นเพื่อเปิดข้อความทิ้งไว้หลังจากการแตะpushwoosh.sendTags({...}): บันทึกค่าเป็น device tags สำหรับแคมเปญในอนาคตpushwoosh.postEvent(...): ส่ง custom event เช่น เพื่อเริ่ม Customer Journeypushwoosh.getTags(...): อ่าน tags ปัจจุบัน มีประโยชน์ใน HTML ที่กำหนดเองเพื่อเปลี่ยนสิ่งที่ข้อความแสดงpushwoosh.getCustomData(): อ่านข้อมูลที่กำหนดเองที่ส่งมาจาก push ที่เปิด in-app นี้
ตัวอย่าง: ให้ผู้ใช้เลือกความสนใจและบันทึกไว้สำหรับแคมเปญในอนาคต
Anchor link to- เพิ่มคำถามในบล็อก Text หรือ Heading เช่น “คุณสนใจกีฬาประเภทไหน”
- เพิ่ม Button หนึ่งปุ่มต่อหนึ่งตัวเลือก เช่น Yoga และ Gym

- ตั้งค่า Action type เป็น Custom Javascript สำหรับแต่ละปุ่ม
- สำหรับปุ่ม Yoga ให้วางโค้ดนี้ลงใน onClick:
pushwoosh.sendTags({ interest: "yoga" });pushwoosh.closeInApp();- สำหรับปุ่ม Gym ให้วางโค้ดนี้ลงใน onClick:
pushwoosh.sendTags({ interest: "gym" });pushwoosh.closeInApp();เมื่อผู้ใช้แตะ Yoga Pushwoosh จะเขียน tag interest บนอุปกรณ์ของพวกเขาและปิด in-app จากนั้นคุณสามารถกำหนดเป้าหมายผู้ใช้นั้นใน segment หรือ Customer Journey
เส้นแบ่ง
Anchor link toDivider คือเส้นแนวนอนระหว่างบล็อกเนื้อหา ใช้เพื่อแบ่งส่วนต่างๆ ในเทมเพลตด้วยสายตา
กำหนดค่า line style (Solid, Dashed, Dotted), color, thickness และ width ในแผงการตั้งค่า
HTML
Anchor link toบล็อก HTML ให้คุณวาง HTML ที่กำหนดเองลงในเทมเพลต in-app ใช้สำหรับแบบฟอร์มที่กำหนดเอง แบบสำรวจ หรือวิดีโอที่ฝังไว้ เมื่อไม่มีบล็อก Form เฉพาะสำหรับข้อความ in-app
ตัวอย่าง
Anchor link toตัวอย่างด้านล่างแสดงวิธีทั่วไปในการใช้บล็อก HTML ในเทมเพลต in-app: แบบฟอร์มสำหรับลูกค้าเป้าหมาย แบบสำรวจ และวิดีโอที่ฝังไว้
แบบฟอร์มสำหรับลูกค้าเป้าหมายนี้จะเขียนชื่อและอีเมลเป็น tags, ส่ง event promo_requested, แสดงข้อความขอบคุณ แล้วปิด in-app

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

โค้ด 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>ตัวอย่างนี้ฝังวิดีโอ YouTube ในข้อความ in-app
โค้ด 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 วางรายการที่สามารถคลิกได้หลายรายการในแถวหรือคอลัมน์ ใช้สำหรับแถบนำทางหรือรายชื่อผู้ติดต่อของบริษัท
สำหรับแต่ละรายการเมนู ให้ตั้งค่า:
- Label: ข้อความที่ผู้ใช้เห็น
- URL: ที่ที่รายการจะเปิด
- Target: แท็บเดียวกันหรือแท็บใหม่
ในการตั้งค่าบล็อก คุณยังสามารถตั้งค่า:
- Direction: แนวนอนหรือแนวตั้ง
- Alignment: ซ้าย กลาง หรือขวา
- Separator: ตัวแบ่งทางเลือกระหว่างรายการ
- แบบอักษร ขนาด น้ำหนัก ระยะห่างตัวอักษร และสีลิงก์/ข้อความ
โซเชียล
Anchor link toบล็อก Social แสดงแถวของไอคอนโซเชียลมีเดียที่เชื่อมโยงไปยังโปรไฟล์ของคุณ ใช้เพื่อส่งผู้ใช้ไปยัง Facebook, Instagram, X และแพลตฟอร์มอื่นๆ จากข้อความ in-app
เพิ่มรายการแพลตฟอร์ม จากนั้นตั้งค่าการจัดตำแหน่ง ขนาดไอคอน และช่องว่างระหว่างไอคอน

ตัวจับเวลาถอยหลัง
Anchor link toบล็อก Timer คือการนับถอยหลังในข้อความ in-app ใช้สำหรับข้อเสนอที่มีเวลาจำกัด, flash sales และการแจ้งเตือนกิจกรรม
เพื่อตั้งค่า:
- ใน Countdown ตั้งค่า End date และ End time จากนั้นเลือก Timezone และ Language สำหรับป้ายกำกับตัวจับเวลา
- เปิด Labels เพื่อแสดงคำบรรยาย “days / hours / minutes / seconds” ใต้ตัวเลข หรือปิดเพื่อแสดงเฉพาะตัวเลข
- ใน Appearance ตั้งค่า Background, Digits color, Labels color และขนาดตัวอักษรสำหรับตัวเลข (ค่าเริ่มต้น 40px) และป้ายกำกับ (ค่าเริ่มต้น 16px)
- ปรับ Spacing (padding) ตามต้องการ

คอลัมน์
Anchor link toColumns แบ่ง canvas ออกเป็นส่วนๆ เคียงข้างกันเพื่อให้คุณสามารถวางเนื้อหาติดกันในแถวเดียวได้
ลากหนึ่งในบล็อกเหล่านี้ลงบน canvas:
- 2 columns: สองคอลัมน์เท่ากัน
- 3 columns: สามคอลัมน์เท่ากัน
- 4 columns: สี่คอลัมน์เท่ากัน
- 33 / 67: คอลัมน์ซ้ายกว้างประมาณ 33%, ขวาประมาณ 67%
- 67 / 33: คอลัมน์ซ้ายกว้างประมาณ 67%, ขวาประมาณ 33%
จากนั้นเพิ่มเนื้อหาลงในแต่ละคอลัมน์ หากต้องการเปลี่ยนระยะห่างสำหรับทุกคอลัมน์ในเทมเพลต ให้เปิด Settings → Columns defaults และปรับ padding ด้านนอก, padding ของคอลัมน์ และช่องว่างระหว่างคอลัมน์
ผลิตภัณฑ์
Anchor link toบล็อก Products แสดงตารางการ์ดผลิตภัณฑ์จากเทมเพลตที่ใช้ร่วมกันหนึ่งเทมเพลต การ์ดแต่ละใบสามารถมีรูปภาพ ชื่อ คำอธิบาย ราคา และปุ่มซื้อได้ เทมเพลตจะทำซ้ำสำหรับทุกผลิตภัณฑ์

ในแผงการตั้งค่า ใต้ Source เลือกว่าผลิตภัณฑ์มาจากที่ใด:
- Manual: ป้อนผลิตภัณฑ์ด้วยตนเอง หรือคลิก Pick from catalog… เพื่อเลือกรายการเฉพาะจาก Product Catalog ของคุณตาม ID คุณสามารถผสมทั้งสองอย่างในบล็อกเดียวกันได้
- Catalog rule: ดึงผลิตภัณฑ์โดยอัตโนมัติตามหมวดหมู่และลำดับการจัดเรียง ซึ่งจะถูกแก้ไขใหม่จากแคตตาล็อกเมื่อข้อความแสดงขึ้น
- Cart: แสดงรายการจากตะกร้าสินค้าที่ถูกละทิ้งปัจจุบันของผู้ใช้แต่ละคน วิธีตั้งค่าแคมเปญตะกร้าสินค้าที่ถูกละทิ้ง
เมื่อคุณเลือก source แล้ว การตั้งค่าเหล่านี้จะควบคุมลักษณะของตารางและการ์ด:
- Number of products (หรือ Max products shown สำหรับ Cart): จำนวนการ์ดที่จะแสดง
- Columns: 1, 2 หรือ 3 การ์ดต่อแถว
- Gap: ช่องว่างระหว่างการ์ด
- Description limit: ขีดจำกัดตัวอักษรที่ข้อความคำอธิบายจะถูกตัด เพื่อให้การ์ดมีขนาดสม่ำเสมอ
- Card template: เลือกเลย์เอาต์ จากนั้นตั้งค่า Card background, Card corner radius และ Content padding สำหรับทุกการ์ด
บันทึกและนำบล็อกกลับมาใช้ใหม่
Anchor link toบันทึกบล็อกเพื่อนำกลับมาใช้ใหม่ในเทมเพลต in-app นี้หรือเทมเพลตอื่นๆ แทนที่จะสร้างใหม่ทุกครั้ง
- เลือกบล็อกบน canvas
- คลิกไอคอนบุ๊กมาร์ก (Save block for reuse) ในแถบเครื่องมือของบล็อกและตั้งชื่อ

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