การอ้างอิงบล็อกใน In-app editor

การอ้างอิงสำหรับทุกบล็อกที่คุณสามารถเพิ่มลงบน canvas ของ editor ในตัว

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

• หัวเรื่อง: ชื่อเรื่องและหัวข้อสั้นๆ
• ข้อความ: เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
• ปุ่ม: call to action ที่สามารถแตะได้
• รูปภาพ: รูปภาพจาก Media store, การอัปโหลด หรือ URL
• วิดีโอ: ภาพขนาดย่อของวิดีโอที่สามารถแตะได้ ซึ่งจะเปิดวิดีโอ YouTube หรือ Vimeo
• การ์ด: รูปภาพพร้อมหัวเรื่อง ข้อความ และปุ่มในเลย์เอาต์เดียว
• เส้นแบ่ง: เส้นที่แบ่งส่วนต่างๆ
• คอลัมน์: เลย์เอาต์แบบเคียงข้างกัน (2, 3 หรือ 4 คอลัมน์เท่ากัน หรือแบ่ง 33/67 และ 67/33)
• ตัวจับเวลา: การนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
• บาร์โค้ด: Code 128, EAN-13, EAN-8, UPC-A หรือ QR code ที่สแกนได้ ซึ่งสร้างจากค่าส่วนบุคคล เช่น บัตรกำนัล
• เมนู: แถวหรือคอลัมน์ของลิงก์นำทางหรือลิงก์ติดต่อ
• โซเชียล: ไอคอนที่เชื่อมโยงไปยังโปรไฟล์โซเชียลของคุณ
• HTML: HTML ที่กำหนดเอง เช่น แบบฟอร์ม แบบสำรวจ หรือวิดีโอที่ฝังไว้
• ผลิตภัณฑ์: ตารางการ์ดผลิตภัณฑ์จาก Product Catalog ของคุณ หรือตะกร้าสินค้าที่ถูกละทิ้งของผู้ใช้

วิธีการกำหนดค่าบล็อกใน editor

ลากบล็อกลงบน canvas จากแท็บ Blocks หรือคลิกเพื่อเพิ่มที่ส่วนท้าย เลือกบล็อกเพื่อเปิดการตั้งค่าในแผงด้านขวาและกำหนดค่าเนื้อหา ลิงก์ ขนาด และระยะห่าง

เคล็ดลับ

ทุกบล็อกยังมีการตั้งค่า Visibility และ Display condition ใช้เพื่อซ่อนบล็อกบนโทรศัพท์หรือเดสก์ท็อป หรือแสดงเฉพาะผู้ใช้บางราย เรียนรู้เพิ่มเติม

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

บล็อก Heading และ Text ใช้สำหรับเก็บข้อความที่ผู้ใช้อ่านในข้อความ in-app แก้ไขข้อความบน canvas และจัดรูปแบบด้วยแถบเครื่องมือ

คลิกบล็อก Heading หรือ Text เพื่อแก้ไขข้อความบน canvas เลือกข้อความบางส่วนเพื่อเปิดแถบเครื่องมือจัดรูปแบบ: ตัวหนา ตัวเอียง ขีดเส้นใต้ การจัดตำแหน่ง ปุ่มลิงก์ และเมนูแบบเลื่อนลง text style

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

รูปภาพ

บล็อก 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): กำหนดขนาดรูปภาพเป็นพิกเซล ปล่อยให้ฟิลด์ว่างไว้เพื่อให้ขนาดปรับอัตโนมัติ ด้านล่างฟิลด์เหล่านี้จะมีคำแนะนำแสดงขนาดที่รูปภาพจะแสดงผลและขนาดที่ควรอัปโหลด: 2 เท่าของขนาดที่แสดงผล เพื่อให้รูปภาพยังคงคมชัดบนหน้าจอโทรศัพท์ หากไฟล์ที่อัปโหลดมีขนาดเล็กกว่าขนาดที่แสดงผลในแกนใดแกนหนึ่ง จะมีคำเตือนแจ้งว่ารูปภาพจะถูกขยายและดูเป็นพิกเซล
• Corner radius (px): ทำให้มุมของรูปภาพโค้งมน
• Alignment: ซ้าย กลาง หรือขวา

ใน Link ตั้งค่า Action Type (เช่น Open Website หรือ URL or Deeplink) และ URL ของมันเพื่อเปิดบางอย่างเมื่อแตะที่รูปภาพ และ Link target เพื่อเปิดในแท็บเดียวกันหรือแท็บใหม่

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

ขนาดรูปภาพที่แนะนำ

อัปโหลดรูปภาพขนาด 2 เท่าของขนาดที่คำแนะนำใต้ Width (px) / Height (px) แสดงสำหรับบล็อกนั้น นั่นคือตัวเลขที่ต้องตรวจสอบ เนื่องจากมันสะท้อนการตั้งค่า Width/Height และการครอบตัดของคุณเอง เมื่อคุณยังไม่ได้ตั้งค่าบล็อก ให้ใช้ความกว้างของสล็อตทั่วไปเหล่านี้เป็นจุดเริ่มต้น:

ตำแหน่งของรูปภาพ	แสดงผลที่	อัปโหลดอย่างน้อย
รูปภาพเต็มความกว้างในป๊อปอัปเริ่มต้น	กว้างสูงสุด 600 px	กว้าง 1200 px
ตัวอย่างบนโทรศัพท์	กว้าง 360–430 px ขึ้นอยู่กับอุปกรณ์	กว้างสูงสุด 860 px
ตัวอย่างบนแท็บเล็ต/เดสก์ท็อป	กว้าง 768 px	กว้าง 1536 px

อัตราส่วนภาพขึ้นอยู่กับคุณ เลย์เอาต์เป็นแบบตอบสนอง ดังนั้นความสูงจะขึ้นอยู่กับการตั้งค่า Height (px) หรือการครอบตัดที่คุณตั้งไว้ ดู Document and popup size เพื่อเปลี่ยนความกว้างป๊อปอัปเริ่มต้น

หมายเหตุ

ตารางนี้ครอบคลุมบล็อกรูปภาพใน editor ในตัว Native in-apps (modal, fullscreen, stories, sheet, carousel, banner, video) ยังไม่มีขนาดปกที่แนะนำ

วิดีโอ

บล็อก 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: ควบคุมลักษณะของภาพขนาดย่อและตำแหน่งในเลย์เอาต์

การ์ด

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

• Layout: เลือกว่าจะให้รูปภาพอยู่ด้านใดเมื่อเทียบกับเนื้อหา หรือเปิด Wrap text around image
• Image: เพิ่มหรือแทนที่รูปภาพ ตั้งค่าข้อความ alt แก้ไข Prompt การสร้าง AI เพิ่ม Padding และตั้งค่า Corner radius (px)
• Size & fit: ตั้งค่า Width, Height, Crop (Original หรืออัตราส่วนคงที่) และ Fit (Cover หรือจุดโฟกัส) ของรูปภาพ ฟิลด์ที่แน่นอนจะขึ้นอยู่กับ Layout ที่คุณเลือก
• Link: ทำให้การ์ดทั้งใบเปิด URL เมื่อแตะ

แก้ไขหัวเรื่อง ข้อความ และปุ่มของการ์ดในลักษณะเดียวกับที่คุณแก้ไขบล็อก Heading, Text และ Button แบบเดี่ยว

ปุ่ม

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

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

URL or Deeplink

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

Run custom JavaScript

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

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

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

• pushwoosh.closeInApp(): ปิดข้อความ in-app ละเว้นเพื่อให้ข้อความเปิดอยู่หลังจากการแตะ
• pushwoosh.sendTags({...}): บันทึกค่าเป็น device tags สำหรับแคมเปญในอนาคต
• pushwoosh.postEvent(...): ส่ง custom event เช่น เพื่อเริ่ม Customer Journey
• pushwoosh.getTags(...): อ่าน tags ปัจจุบัน มีประโยชน์ใน HTML ที่กำหนดเองเพื่อเปลี่ยนสิ่งที่ข้อความแสดง
• pushwoosh.getCustomData(): อ่านข้อมูลที่กำหนดเองที่ส่งมาจาก push ที่เปิด in-app นี้
• pushwoosh.registerForPushNotifications(): ทริกเกอร์กล่องโต้ตอบการอนุญาต push ดั้งเดิมของแพลตฟอร์ม เช่น จาก pre-permission in-app

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

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

3. ตั้งค่า Action type เป็น Custom Javascript สำหรับแต่ละปุ่ม
4. สำหรับปุ่ม Yoga ให้วางโค้ดนี้ลงใน onClick:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. สำหรับปุ่ม Gym ให้วางโค้ดนี้ลงใน onClick:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

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

เรียนรู้เพิ่มเติมเกี่ยวกับวิธีสร้าง in-apps ด้วย JavaScript

เส้นแบ่ง

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

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

HTML

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

ตัวอย่าง

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

หมายเหตุ

ตัวอย่างแบบฟอร์มและแบบสำรวจจะบันทึก device tags และส่ง events ผ่าน Pushwoosh สร้าง custom events ในบัญชีของคุณก่อนที่จะใช้ในแคมเปญ

แบบฟอร์มลูกค้าเป้าหมาย

แบบฟอร์มลูกค้าเป้าหมายนี้จะเขียนชื่อและอีเมลเป็น tags, ส่ง promo_requested event, แสดงข้อความขอบคุณ แล้วปิด 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, ส่ง schedule_survey_completed event, แสดงข้อความขอบคุณ แล้วปิด 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>

เมนู

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

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

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

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

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

โซเชียล

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

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

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

บล็อก 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) ตามต้องการ

บาร์โค้ด

บล็อก Barcode จะแสดงบาร์โค้ดหรือ QR code ที่สแกนได้จากค่าส่วนบุคคล ซึ่งส่วนใหญ่มักจะเป็น voucher

วิธีการตั้งค่า:

1. ใน Code ให้คง device tag {Coupon|String|} ไว้ หรือคลิก Merge tag และเลือก device tag อื่นที่เก็บรหัสของผู้รับแต่ละคน In-apps ไม่ประเมิน Liquid SDK จะเติม tag บนอุปกรณ์ก่อนที่ in-app จะแสดง ซึ่งแตกต่างจากบล็อก Barcode ของอีเมลที่ใช้ {{voucher}}

2. เลือก Symbology:
   • QR: โค้ด 2D สี่เหลี่ยมที่โทรศัพท์สามารถสแกนได้ รองรับข้อความใดๆ รวมถึงรหัสตัวอักษรและตัวเลข เช่น WELCOME2025-A1
   • Code 128: บาร์โค้ดเชิงเส้นสำหรับข้อความใดๆ รวมถึงรหัสตัวอักษรและตัวเลขเดียวกัน
   • EAN-13: บาร์โค้ดขายปลีกทั่วไปในยุโรปและภูมิภาคอื่นๆ อีกมากมาย เฉพาะตัวเลข, 12–13 ตัวอักษร
   • EAN-8: บาร์โค้ดขายปลีกที่สั้นกว่าสำหรับบรรจุภัณฑ์ขนาดเล็ก เฉพาะตัวเลข, 7–8 ตัวอักษร
   • UPC-A: บาร์โค้ดขายปลีกทั่วไปในอเมริกาเหนือ เฉพาะตัวเลข, 11–12 ตัวอักษร
3. หากคุณเลือก QR ให้ตั้งค่า Error correction ซึ่งจะเพิ่มข้อมูลสำรองเพื่อให้โค้ดยังคงสแกนได้เมื่อส่วนหนึ่งถูกบดบัง สึกหรอ หรือมองเห็นได้ยาก เลือก L, M, Q, หรือ H (ค่าเริ่มต้น M) ระดับที่สูงขึ้นจะทนทานต่อความเสียหายได้มากขึ้น แต่ทำให้รูปแบบหนาแน่นขึ้น ซึ่งอาจอ่านได้ยากขึ้นในขนาดเล็ก ข้ามฟิลด์นี้สำหรับสัญลักษณ์อื่นๆ
4. เลือกเปิด Print the code in digits เพื่อแสดงค่าใต้โค้ด

5. ใน Appearance ตั้งค่า Bars color ให้เข้มกว่า Background — เครื่องสแกนส่วนใหญ่ไม่สามารถอ่านแถบสีอ่อนบนพื้นหลังสีเข้มได้ ตั้งค่า Width (px) และ Height (px) อย่างน้อย 600×200 เพื่อให้โค้ดยังคงสแกนได้ในระยะกล้องโทรศัพท์ทั่วไป ปล่อยให้ Quiet zone, modules เป็น Auto สำหรับระยะขอบเริ่มต้น

หมายเหตุ

บน canvas บล็อกจะแสดงบาร์โค้ดตัวอย่าง ไม่ใช่รหัสผู้รับจริง device tag เช่น {Coupon|String|} จะถูกเติมบนอุปกรณ์เท่านั้น ดังนั้น Preview จึงไม่สามารถสร้างภาพจริงได้เช่นกัน ตรวจสอบบาร์โค้ดบนอุปกรณ์จริงก่อนที่คุณจะเผยแพร่ ใช้ EAN-13, EAN-8, หรือ UPC-A เฉพาะสำหรับค่า tag ที่เป็นตัวเลขเท่านั้น ตามความยาวที่แต่ละประเภทต้องการ สำหรับรหัสตัวอักษรและตัวเลข เช่น WELCOME2025-A1 ให้ใช้ Code 128 หรือ QR แทน

คอลัมน์

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

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

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

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

ผลิตภัณฑ์

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

ในแผงการตั้งค่า ใต้ Source เลือกว่าผลิตภัณฑ์มาจากที่ใด:

• Manual: ป้อนผลิตภัณฑ์ด้วยตนเอง หรือคลิก Pick from catalog… เพื่อเลือกรายการเฉพาะจาก Product Catalog ของคุณตาม ID คุณสามารถผสมทั้งสองอย่างในบล็อกเดียวกันได้
• Catalog rule: ดึงผลิตภัณฑ์โดยอัตโนมัติตามหมวดหมู่และลำดับการจัดเรียง ซึ่งจะดึงข้อมูลใหม่จากแคตตาล็อกเมื่อข้อความแสดงขึ้น
• Cart: แสดงรายการจากตะกร้าสินค้าที่ถูกละทิ้งปัจจุบันของผู้ใช้แต่ละคน วิธีการตั้งค่าแคมเปญตะกร้าสินค้าที่ถูกละทิ้ง

หมายเหตุ

Catalog rule และ Cart ต้องการ Content Templates ในแผนของคุณ และ API access token (Settings → API Access) หากตัวเลือก Source ไม่เปลี่ยนเป็นหนึ่งในนั้น หรือบล็อกไม่แสดงผลิตภัณฑ์ โปรดติดต่อฝ่ายสนับสนุนหรือผู้จัดการบัญชีของคุณ หรือสร้าง token และเลือกแหล่งที่มาอีกครั้ง

เมื่อคุณเลือกแหล่งที่มาแล้ว การตั้งค่าเหล่านี้จะควบคุมลักษณะของตารางและการ์ด:

• Number of products (หรือ Max products shown สำหรับ Cart): จำนวนการ์ดที่จะแสดง
• Columns: 1, 2 หรือ 3 การ์ดต่อแถว
• Gap: ช่องว่างระหว่างการ์ด
• Description limit: ขีดจำกัดตัวอักษรที่ข้อความคำอธิบายจะถูกตัด เพื่อให้การ์ดมีขนาดสม่ำเสมอ
• Card template: เลือกเลย์เอาต์ จากนั้นตั้งค่า Card background, Card corner radius, และ Content padding สำหรับทุกการ์ด

บันทึกและนำบล็อกกลับมาใช้ใหม่

บันทึกบล็อกเพื่อนำกลับมาใช้ใหม่ในเทมเพลต in-app นี้หรือเทมเพลตอื่น ๆ แทนที่จะต้องสร้างใหม่ทุกครั้ง

1. เลือกบล็อกบน canvas
2. คลิกไอคอนบุ๊กมาร์ก (Save block for reuse) ในแถบเครื่องมือของบล็อกและตั้งชื่อ

บล็อกที่บันทึกไว้จะปรากฏใต้ Saved blocks ที่ด้านล่างของแท็บ Blocks

• ลากบล็อกที่บันทึกไว้ลงบน canvas หรือคลิกเพื่อเพิ่มที่ส่วนท้ายของเทมเพลต
• คลิก × บนไทล์ของบล็อกที่บันทึกไว้เพื่อลบ

ทำให้สำเนาซิงค์กัน

เมื่อคุณบันทึกบล็อก ให้เปิด Keep copies in sync เพื่อเชื่อมโยงสำเนาที่แทรกทุกอันเข้ากับแหล่งที่มาเดียวกัน แก้ไขแหล่งที่มาเพียงครั้งเดียว และการเปลี่ยนแปลงจะถูกนำไปใช้ทุกที่ที่ใช้บล็อกนั้น

สำเนาที่ซิงค์จะถูกล็อกบน canvas คุณไม่สามารถแก้ไขได้โดยตรง เลือกสำเนาเพื่อเปิดการตั้งค่า:

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

หมายเหตุ

ทุกครั้งที่คุณเปิดเทมเพลต in-app, Pushwoosh จะตรวจสอบสำเนาที่ซิงค์และอัปเดตสำเนาที่ล้าสมัย ข้อความ toast จะแสดงจำนวนที่รีเฟรช หากแหล่งที่มามีเนื้อหาใหม่กว่า การตั้งค่าของสำเนาจะแสดงคำเตือนจนกว่าคุณจะเปิดเทมเพลตอีกครั้งหรือคลิก Update from source หากแหล่งที่มาถูกลบ สำเนาจะเก็บเนื้อหาล่าสุดไว้และคุณสามารถทำได้เพียง Detach from source เท่านั้น