สร้างข้อความในแอปในตัวแก้ไขในตัว

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

สร้างเทมเพลตในแอปใหม่

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

ไปที่ Content → In-apps
คลิก Add template

หน้า Content In-apps พร้อมปุ่ม Add template ที่มุมขวาบนของรายการเทมเพลต

ป้อนชื่อเทมเพลต
เลือกวิธีสร้างเทมเพลต:
- Upload ZIP: อัปโหลดไฟล์ ZIP พร้อมข้อความในแอป HTML ของคุณ
- Create new template: สร้างเทมเพลตในตัวแก้ไขในตัว
เลือก Create new template
คลิก Add template

แบบฟอร์มเทมเพลตใหม่พร้อมช่องชื่อ ตัวเลือก Upload ZIP และเลือก Create new template

สำรวจเค้าโครงของตัวแก้ไข

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

แถบด้านบน

ใช้แถบด้านบนเพื่อเปลี่ยนชื่อเทมเพลต เลิกทำการแก้ไข บันทึกงานของคุณ หรือเปิด In-app settings เมื่อคุณต้องการเปลี่ยนลักษณะที่ข้อความปรากฏบนอุปกรณ์ ดู กำหนดค่าลักษณะที่ปรากฏของข้อความในแอปบนอุปกรณ์

Canvas

ใช้ canvas เพื่อดูข้อความตามที่ผู้ใช้จะเห็น และเพื่อแก้ไขข้อความ รูปภาพ และปุ่มโดยตรงบนเค้าโครง เทมเพลตที่ว่างเปล่าจะแสดง Start with a block เหนือ canvas มีปุ่มสลับโทรศัพท์/แท็บเล็ตเพื่อเปลี่ยนความกว้างของการแสดงตัวอย่าง — ไม่ได้เปลี่ยนเค้าโครงของคุณ เพียงแค่เปลี่ยนความกว้างของหน้าจอที่คุณกำลังดูตัวอย่าง

Layers

แผง Layers จะแสดงรายการทุกบล็อกในเทมเพลตของคุณเป็นโครงสร้างต้นไม้ ตามลำดับเดียวกับบน canvas เปิดจากขอบด้านซ้ายเมื่อคุณต้องการเลือกบล็อกที่ซ้อนกัน (เช่น ปุ่มภายในกลุ่ม) หรือลากแถวเพื่อเปลี่ยนลำดับของเนื้อหา

แผงด้านขวา

ใช้ Blocks ในแผงด้านขวาเพื่อเพิ่มเนื้อหาลงในข้อความ และ Settings เมื่อคุณต้องการการจัดรูปแบบที่ใช้กับทั้งเทมเพลตพร้อมกัน ดู กำหนดค่าการจัดรูปแบบทั้งเทมเพลต

เริ่มสร้างเทมเพลต

หลังจากที่คุณสร้างเทมเพลต ตัวแก้ไขจะเปิดขึ้นพร้อมกับ canvas ที่ว่างเปล่าและแท็บ Blocks ทางด้านขวา

ลากบล็อกออกจากแผง Blocks ไปยัง canvas หรือคลิกบล็อกในแผงเพื่อเพิ่ม
เพิ่มบล็อกต่อไปในลักษณะเดียวกันจนกว่าเค้าโครงจะพร้อม
เปิดแท็บ Settings เมื่อคุณต้องการการจัดรูปแบบทั้งเทมเพลต

ตัวแก้ไขในแอปที่ว่างเปล่าพร้อม Start with a block บน canvas และแผง Blocks ที่เปิดอยู่

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

บล็อกเนื้อหาเป็นส่วนประกอบในการสร้างเทมเพลตในแอปในตัวแก้ไขในตัว คุณสามารถรวมหัวเรื่อง ข้อความ รูปภาพ ปุ่ม และบล็อกอื่นๆ เข้าด้วยกันเป็นเค้าโครงเดียว

เปิดแท็บ Blocks และลากบล็อกไปยัง canvas หรือคลิกบล็อกเพื่อเพิ่ม บล็อกที่มีอยู่:

Heading: ชื่อเรื่องและหัวข้อสั้นๆ ในข้อความ
Text: เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
Button: ปุ่มเรียกร้องให้ดำเนินการที่สามารถแตะได้
Image: รูปภาพจาก Media store การอัปโหลด หรือ URL
Divider: เส้นที่แบ่งส่วนต่างๆ ออกจากกัน
2 columns: สองคอลัมน์เท่ากันวางข้างกัน
3 columns: สามคอลัมน์เท่ากันวางข้างกัน
4 columns: สี่คอลัมน์เท่ากันวางข้างกัน
33 / 67: สองคอลัมน์โดยที่คอลัมน์ซ้ายใช้ความกว้างประมาณ 33% และคอลัมน์ขวาประมาณ 67%
67 / 33: สองคอลัมน์โดยที่คอลัมน์ซ้ายใช้ความกว้างประมาณ 67% และคอลัมน์ขวาประมาณ 33%
Timer: ตัวนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
Menu: แถวหรือคอลัมน์ของลิงก์ เช่น การนำทางหรือข้อมูลติดต่อ
Social: ไอคอนที่เชื่อมโยงไปยังโปรไฟล์โซเชียลของคุณ
HTML: HTML ที่กำหนดเอง เช่น แบบฟอร์มหรือวิดีโอที่ฝังไว้

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

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

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

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

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

รูปภาพ

บล็อก Image จะแสดงรูปภาพในเทมเพลตในแอป เลือกบน canvas เพื่อเปิดการตั้งค่า Image ในแผงด้านขวา

Add image / Replace image: คลิก Add image เมื่อบล็อกว่างเปล่า หรือ Replace image เมื่อมีรูปภาพอยู่แล้ว คุณสามารถอัปโหลดไฟล์หรือเลือกจาก Media store ของคุณ
Image URL: วางลิงก์ที่โฮสต์ไปยังรูปภาพ
Alt text: อธิบายรูปภาพเพื่อการเข้าถึง
Link URL: เปิดเว็บไซต์เมื่อแตะรูปภาพ
Link target: เปิดลิงก์ในแท็บเดียวกันหรือแท็บใหม่
File: หลังจากที่คุณเพิ่มรูปภาพ จะแสดงเส้นทางของไฟล์ที่ใช้งานอยู่

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

บล็อก Image ที่ว่างเปล่าบน canvas พร้อมการตั้งค่า Image ที่แสดง Add image, Image URL, Alt text, Link URL และ Spacing

ปุ่ม

Button เป็นปุ่มเรียกร้องให้ดำเนินการที่สามารถแตะได้ในข้อความในแอป ใช้เพื่อเปิด URL, รัน JavaScript ที่กำหนดเอง หรือปิดข้อความ

คลิกบล็อก Button เพื่อแก้ไขป้ายกำกับบน canvas ใช้แถบเครื่องมือเพื่อเปลี่ยนขนาดตัวอักษร สีข้อความ ตัวหนา ตัวเอียง ขีดเส้นใต้ และการจัดตำแหน่ง

เพื่อตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อผู้ใช้แตะปุ่ม:

คลิกไอคอนลิงก์ในแถบเครื่องมือเพื่อเปิด Insert/Edit Link
เลือก Action type
กรอกข้อมูลในช่องสำหรับแอ็คชั่นนั้น (ดูด้านล่าง)
คลิก Save

เปิดเว็บไซต์

Open Website จะเปิดลิงก์เมื่อผู้ใช้แตะปุ่ม ป้อนที่อยู่ใน URL สิ่งที่คุณสามารถป้อนได้:

เว็บไซต์: https://example.com
ลิงก์แอปที่เปิดหน้าจอภายในแอปของคุณ: myapp://promo
ปิดข้อความในแอปโดยไม่ต้องใช้ JavaScript: pushwoosh://close

กล่องโต้ตอบ Insert Edit Link สำหรับ Button ที่มี Action type Open Website และช่อง URL

รัน JavaScript ที่กำหนดเอง

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

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

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

เมธอดที่มีอยู่ใน onClick

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

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

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

เทมเพลตในแอปพร้อมปุ่ม Yoga และ Gym และ Custom Javascript onClick สำหรับปุ่ม Yoga

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

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

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

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับวิธีสร้างข้อความในแอปด้วย JavaScript

ตัวแบ่ง

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

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

HTML

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

ตัวอย่าง

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

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

แบบฟอร์มสำหรับลูกค้าเป้าหมาย HTML ในตัวแก้ไขในแอปพร้อมช่องชื่อและอีเมลและปุ่ม 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>รับส่วนลด 20% ของคุณ</h2>
<p>ทิ้งชื่อและอีเมลของคุณไว้ — เราจะส่งรหัสโปรโมชั่นให้ทันที</p>

<div id="form">
  <input type="text" id="name" placeholder="ชื่อของคุณ" />
  <input type="email" id="email" placeholder="อีเมลของคุณ" />
  <button onclick="submit()">ส่งรหัสให้ฉัน</button>
</div>

<div class="thanks" id="thanks">
  🎉 เรียบร้อย! ตรวจสอบกล่องจดหมายของคุณเพื่อรับรหัสโปรโมชั่น
</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>

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

แบบสำรวจ HTML ในตัวแก้ไขในแอปถามว่าผู้ใช้ชอบออกกำลังกายเวลาใดพร้อมตัวเลือกเวลาสี่แบบ

โค้ด 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>คุณชอบออกกำลังกายเวลาไหน?</h2>
<p>ช่วยเราจัดตารางคลาสที่ดีที่สุดสำหรับคุณ</p>

<button class="option" onclick="pick('morning')">☀️ ตอนเช้า (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ ตอนบ่าย (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 ตอนเย็น (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 เฉพาะวันหยุดสุดสัปดาห์</button>

<div class="thanks" id="thanks">รับทราบ! เราจะส่งตารางที่ดีที่สุดให้คุณ 💪</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 ในข้อความในแอป

โค้ด HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างวิดีโอในแอป</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>ตัวอย่างวิดีโอในแอป</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 และแพลตฟอร์มอื่นๆ จากข้อความในแอป

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

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

ตัวนับถอยหลัง

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

เพื่อตั้งค่า:

ใน Countdown ตั้งค่า End date และ End time จากนั้นเลือก Timezone และ Language สำหรับป้ายกำกับตัวจับเวลา
เปิด Labels เพื่อแสดงคำบรรยาย “วัน / ชั่วโมง / นาที / วินาที” ใต้ตัวเลข หรือปิดเพื่อแสดงเฉพาะตัวเลข
ใน Appearance ตั้งค่า Background, Digits color, Labels color และขนาดตัวอักษรสำหรับตัวเลข (ค่าเริ่มต้น 40px) และป้ายกำกับ (ค่าเริ่มต้น 16px)
ปรับ Spacing (padding) ตามต้องการ

การตั้งค่าบล็อก Timer พร้อมวันที่และเวลาสิ้นสุด Countdown, Labels, Appearance และตัวเลือก Spacing

คอลัมน์

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

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

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

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

กำหนดค่าการจัดรูปแบบทั้งเทมเพลต

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

เปิดแท็บ Settings ในแผงด้านขวา

ส่วนที่มีอยู่:

Document: ขนาดและลักษณะของพื้นที่ข้อความทั้งหมด: ความกว้าง, padding, สีพื้นหลังหรือรูปภาพ, สีข้อความ, ตระกูลแบบอักษร และช่องว่างระหว่างบล็อก
Popup: ลักษณะที่ข้อความวางอยู่บนพื้นหลังที่หรี่แสง: รัศมีมุม, รวมถึงสีและความทึบของโอเวอร์เลย์
Block defaults: สไตล์เริ่มต้นร่วมกันสำหรับบล็อกที่คุณเพิ่มในภายหลัง เพื่อให้เนื้อหาใหม่ตรงกับเทมเพลตจนกว่าคุณจะแทนที่บล็อกบน canvas
Columns defaults: ระยะห่างสำหรับทุกเค้าโครง Columns: padding ด้านนอก, padding ภายในแต่ละคอลัมน์ และช่องว่างระหว่างคอลัมน์
Card defaults: ลักษณะเริ่มต้นสำหรับคอนเทนเนอร์ Card ที่จัดกลุ่มเนื้อหาในเค้าโครง ซึ่งจะถูกนำไปใช้จนกว่าคุณจะจัดสไตล์การ์ดทีละใบ
Button group defaults: ระยะห่างและการจัดตำแหน่งเมื่อมีปุ่มหลายปุ่มอยู่ด้วยกันเป็นกลุ่ม
Button defaults: ลักษณะเริ่มต้นสำหรับบล็อก Button ใหม่ เพื่อให้ CTA มีความสอดคล้องกันทั่วทั้งเทมเพลตจนกว่าคุณจะจัดสไตล์แยกต่างหาก
Divider defaults: สไตล์เส้นเริ่มต้น, สี, ความหนา และความกว้างสำหรับบล็อก Divider ใหม่

ค่าเริ่มต้นจะถูกนำไปใช้ในทุกที่ที่บล็อกแต่ละบล็อกไม่ได้แทนที่

แปลเทมเพลตเป็นภาษาท้องถิ่น

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

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

กำหนดค่าลักษณะที่ปรากฏของข้อความในแอปบนอุปกรณ์

In-app settings ควบคุมลักษณะที่ข้อความปรากฏและทำงานบนอุปกรณ์: ตำแหน่ง, แอนิเมชั่น, ท่าทางการปัด และปุ่มปิด การตั้งค่าเหล่านี้ใช้ได้กับ iOS และ Android Native เท่านั้น

คลิก In-app settings ในแถบด้านบน:

Position on Screen: Fullscreen, Top, Center หรือ Bottom
Present Animation / Close Animation: None, Fade, Left, Right, Up หรือ Down หรือ Default เพื่อใช้ค่าเริ่มต้น SDK ของแอปของคุณ

Animation Duration (MS): 100 ถึง 3000 มิลลิวินาที เว้นว่างไว้เพื่อใช้เวลาเริ่มต้นของ SDK
Swipe to Close: เปิดใช้งานการผสมผสานใดๆ ของ Left, Right, Up และ Down
Show close button: เปิดหรือปิดปุ่มควบคุมการปิด เมื่อเปิด ให้ตั้งค่า Position (Top right, Top left, Bottom right, Bottom left), Background (สี หรือ Transparent) และ Icon Color ซึ่งแตกต่างจากการตั้งค่าอื่นๆ ในโมดอลนี้ ลักษณะของปุ่มปิดจะถูกเรนเดอร์ลงในข้อความเองและแสดงบนทุกแพลตฟอร์ม ไม่ใช่แค่ iOS และ Android Native

โมดอลการตั้งค่าในแอปพร้อมตำแหน่ง, แอนิเมชั่น, การปัดเพื่อปิด และตัวเลือกปุ่มปิด

คลิก Apply เพื่อบันทึกตัวเลือกของคุณ หรือ Cancel เพื่อยกเลิก

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

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

ใช้เทมเพลตที่บันทึกไว้

หลังจากที่คุณบันทึกเทมเพลตในแอปแล้ว คุณสามารถแสดงให้ผู้ใช้เห็นใน Customer Journey เป็นข้อความในแอปแบบครั้งเดียว หรือเมื่อผู้ใช้แตะข้อความพุช