ข้ามไปยังเนื้อหา

การอ้างอิงบล็อกใน 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

บล็อกหัวเรื่องที่ถูกเลือกบน canvas พร้อมแถบเครื่องมือจัดรูปแบบข้อความที่แสดงตัวเลือกสไตล์และการจัดรูปแบบ

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

รูปภาพ

Anchor link to

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

บล็อกรูปภาพบน canvas พร้อมการตั้งค่ารูปภาพที่แสดง Replace image, Image URL, Alt text, Generate alt with AI, Prompt, Width, Height, Corner radius และ Alignment

เลือกบน 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, Alt text, Replace thumbnail, Thumbnail URL และ Play button overlay

เลือกบล็อกบน 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 จับคู่รูปภาพกับหัวเรื่อง ข้อความ และปุ่มในเลย์เอาต์สำเร็จรูปเดียว คุณจึงไม่ต้องวางและจัดตำแหน่งบล็อกสี่บล็อกแยกกันด้วยตนเอง

บล็อกการ์ดบน canvas พร้อมการตั้งค่าการ์ดที่แสดง Layout, Replace image, Image URL, Alt text, Prompt, Padding และ Corner radius
  • 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 to

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

Anchor link to

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

กล่องโต้ตอบ Insert Edit Link สำหรับปุ่มที่มี Action type Open Website และฟิลด์ URL
Anchor link to

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

แถบเครื่องมือปุ่มพร้อมกล่องโต้ตอบ Insert Edit Link ที่เปิดอยู่, Action type URL or Deeplink และ URL ที่ตั้งค่าเป็น myapp://screen

Run custom JavaScript

Anchor link to

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

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

กล่องโต้ตอบ Insert Edit Link สำหรับปุ่มที่มี Action type Custom Javascript และ onClick ที่ตั้งค่าเป็น closeInApp

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

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

เมื่อผู้ใช้แตะ Yoga Pushwoosh จะเขียน tag interest บนอุปกรณ์ของพวกเขาและปิด in-app จากนั้นคุณสามารถกำหนดเป้าหมายผู้ใช้นั้นใน segment หรือ Customer Journey

เส้นแบ่ง

Anchor link to

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

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

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

ตัวอย่าง
Anchor link to

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

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

แบบฟอร์มสำหรับลูกค้าเป้าหมาย HTML ใน in-app editor พร้อมฟิลด์ชื่อและอีเมล และปุ่ม Send me the code
โค้ด 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>

เมนู

Anchor link to

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

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

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

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

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

โซเชียล

Anchor link to

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

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

การตั้งค่าบล็อกโซเชียลพร้อมลิงก์ TikTok, Instagram และ Facebook รวมถึง Alignment, Icon size และ Gap

ตัวจับเวลาถอยหลัง

Anchor link to

บล็อก 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) ตามต้องการ
การตั้งค่าบล็อกตัวจับเวลาพร้อมวันที่และเวลาสิ้นสุดการนับถอยหลัง, ป้ายกำกับ, ลักษณะที่ปรากฏ และตัวเลือกระยะห่าง

คอลัมน์

Anchor link to

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

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

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

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

ผลิตภัณฑ์

Anchor link to

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

บล็อกผลิตภัณฑ์พร้อมการ์ดผลิตภัณฑ์สองใบที่แสดงรูปภาพ ชื่อ คำอธิบาย ราคา และปุ่ม Shop now

ในแผงการตั้งค่า ใต้ 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 นี้หรือเทมเพลตอื่นๆ แทนที่จะสร้างใหม่ทุกครั้ง

  1. เลือกบล็อกบน canvas
  2. คลิกไอคอนบุ๊กมาร์ก (Save block for reuse) ในแถบเครื่องมือของบล็อกและตั้งชื่อ
แถบเครื่องมือบล็อกการ์ดพร้อมไอคอน Move up, Move down, Duplicate, Delete, Save block for reuse และ Ask AI

บล็อกที่บันทึกไว้จะปรากฏใต้ 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 เพื่อให้คุณสามารถแก้ไขได้ด้วยตัวเอง