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

เพิ่มเทมเพลตใหม่

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

ป้อนชื่อเทมเพลต เลือก Create new template และคลิก Add template:

คุณสามารถสร้างหน้าข้อความ In-App ใหม่โดยอิงจากเทมเพลตเริ่มต้น หรือเริ่มต้นจากศูนย์โดยการเลือกเทมเพลตเปล่า

เพิ่มเนื้อหา

เลย์เอาต์

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

หากคุณต้องการวางองค์ประกอบเนื้อหามากกว่าหนึ่งรายการในแถวเดียว ให้เพิ่มองค์ประกอบ Columns ลงในเทมเพลต เลือกประเภทบล็อกที่ต้องการและเพิ่มเนื้อหาลงในแต่ละคอลัมน์:

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

หากเลือกเลย์เอาต์ทั้งหมด คุณยังสามารถแก้ไขการตั้งค่า padding และอัปโหลดภาพพื้นหลังได้

การสร้างข้อความ In-App ในแนวตั้งและแนวนอน

Pushwoosh มอบความยืดหยุ่นในการสร้างเนื้อหาข้อความ In-App ทั้งในแนวตั้งและแนวนอน เพื่อให้แน่ใจว่าแคมเปญของคุณจะดึงดูดสายตาและมีประสิทธิภาพบนทุกอุปกรณ์

ข้อความ In-App แนวตั้ง

ในการสร้างข้อความ In-App ที่ออกแบบมาสำหรับแนวตั้ง ซึ่งโดยทั่วไปจะใช้บนอุปกรณ์มือถือ ให้ไปที่ แท็บ Mobile ในตัวแก้ไข ที่นี่คุณสามารถออกแบบเนื้อหาของคุณให้พอดีกับเลย์เอาต์แนวตั้งที่เหมาะสำหรับหน้าจอสมาร์ทโฟน

ข้อความ In-App แนวนอน

สำหรับข้อความ In-App ในแนวนอน ซึ่งโดยทั่วไปนิยมใช้สำหรับหน้าจอที่กว้างกว่า ให้ไปที่ แท็บ Desktop ภายในตัวแก้ไข ที่นี่คุณสามารถจัดโครงสร้างข้อความ In-App ของคุณเพื่อใช้ประโยชน์จากพื้นที่แนวนอนที่กว้างขึ้น

การเพิ่มคอลัมน์ในข้อความ In-App แนวนอน

หากคุณต้องการเพิ่มคอลัมน์ในข้อความ In-App แนวนอนของคุณ ก่อนอื่นให้เพิ่มองค์ประกอบ Column กำหนดจำนวนและเลย์เอาต์ของคอลัมน์ที่คุณต้องการ

หลังจากออกแบบข้อความ In-App แนวนอนพร้อมคอลัมน์แล้ว ให้สลับไปที่ แท็บ Mobile เลื่อนลงไปที่ส่วน RESPONSIVE DESIGN ซึ่งอยู่ที่ด้านล่างของแผงการตั้งค่า และเปิดใช้งานตัวเลือก Do Not Stack on Mobile

หมายเหตุ

ขั้นตอนนี้มีความสำคัญอย่างยิ่งในการรักษารูปแบบที่ต้องการของข้อความ In-App แนวนอนของคุณเมื่อดูบนอุปกรณ์มือถือ เพื่อให้แน่ใจว่าคอลัมน์ยังคงอยู่เคียงข้างกัน แทนที่จะซ้อนกัน

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

องค์ประกอบเนื้อหา

หัวเรื่อง

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

หมายเหตุ

หากคุณต้องการปรับแต่งหัวเรื่องให้เป็นส่วนตัวสำหรับผู้ใช้แต่ละคน เพิ่ม Tags เข้าไป

คุณยังสามารถประหยัดเวลาได้โดยให้ AI สร้างข้อความหัวเรื่องให้คุณ คลิกปุ่มในส่วน Smart Headings ป้อนคำสำคัญบางคำ และคลิก Get Suggestions:

ข้อความ

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

หมายเหตุ

หากคุณต้องการปรับแต่งข้อความให้เป็นส่วนตัวสำหรับผู้ใช้แต่ละคน เพิ่ม Tags เข้าไป

คุณยังสามารถปรับปรุงข้อความของคุณได้โดยใช้ตัวเลือก Smart Text:

รูปภาพ

หากต้องการเพิ่มรูปภาพ ให้คลิกที่บล็อกรูปภาพและลากไฟล์ของคุณไปยังแผงแก้ไข:

อีกทางเลือกหนึ่ง คุณสามารถระบุ Image URL แทนการอัปโหลดไฟล์ได้

คุณยังสามารถทดลองกับการสร้างภาพด้วย AI ได้อีกด้วย ในการทำเช่นนี้ ให้คลิกที่ปุ่มในส่วน Magic Image อธิบายภาพที่คุณต้องการสร้าง และคลิก Generate Images:

ในส่วน Action คุณสามารถตั้งค่าการกระทำที่ควรจะเกิดขึ้นเมื่อคลิกที่รูปภาพ คุณสามารถเปิดเว็บไซต์ (หรือ deep link ไปยังหน้าภายในแอปของคุณ) หรือปิดป๊อปอัปได้ คุณยังสามารถแทรกแอตทริบิวต์ตัวจัดการ JavaScript ที่กำหนดเองเพื่อตั้งค่าการกระทำเมื่อคลิกรูปภาพ หากไม่ต้องการการกระทำใด ๆ ให้ละเว้นการตั้งค่านี้

หมายเหตุ

หากคุณต้องการเปิดหน้าในแอปมือถือของคุณเมื่อคลิกรูปภาพ ให้เลือกตัวเลือก Open Website และแทรก deep link

ปุ่ม

เมื่อเพิ่มปุ่มลงในเทมเพลตของคุณแล้ว คุณสามารถปรับแต่งข้อความ สี padding และเส้นขอบของปุ่มได้

หมายเหตุ

หากคุณต้องการปรับแต่งข้อความปุ่มให้เป็นส่วนตัวสำหรับผู้ใช้แต่ละคน เพิ่ม Tags เข้าไป

AI สามารถช่วยคุณคิดข้อความปุ่มได้ เพียงคลิกที่ปุ่มในส่วน Smart Buttons ป้อนคำสำคัญ และคลิก Get Suggestions:

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

หมายเหตุ

หากคุณต้องการเปิดหน้าในแอปมือถือของคุณเมื่อคลิกปุ่ม ให้เลือกตัวเลือก Open Website และแทรก deep link

ตัวแบ่ง

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

ฟอร์ม

หมายเหตุ

ในการกำหนดค่าองค์ประกอบนี้ คุณจะต้องได้รับความช่วยเหลือจากนักพัฒนา

ฟอร์มช่วยให้คุณสามารถรวบรวมอีเมล หมายเลขโทรศัพท์ ความชอบ และข้อมูลอื่น ๆ ของผู้ใช้ที่อาจเป็นประโยชน์สำหรับการสื่อสารในอนาคต องค์ประกอบนี้ได้รับการกำหนดค่าเป็นฟอร์ม HTML มาตรฐาน: ข้อมูลจะถูกส่งในคำขอ GET หรือ POST ไปยังที่อยู่ที่ระบุในช่อง URL

คลิกที่ชื่อฟิลด์เพื่อกำหนดค่าพารามิเตอร์:

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

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

คุณสามารถปรับแต่งพารามิเตอร์ของฟอร์มได้ เช่น ความกว้าง การจัดแนว ระยะห่างระหว่างฟิลด์ ข้อความปุ่ม สี และแบบอักษร

HTML

บล็อก 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>

เมนู

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

หากต้องการเพิ่มรายการเมนู ให้คลิก Add New Item:

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

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

การปรับแต่งเนื้อหาให้เป็นส่วนตัว

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

ขั้นแรก คุณต้อง ตั้งค่า Tags และกำหนดค่าการรวบรวมข้อมูลจากผู้ใช้ (เช่น ผ่านฟอร์มความคิดเห็น) เมื่อสร้างข้อความ In-App ให้เลือกบล็อกเนื้อหาที่ต้องการ คลิก Merge Tags และเลือก Tag ที่คุณต้องการใช้:

เทมเพลตหลายภาษา

คุณสามารถแปลข้อความของเทมเพลตข้อความ In-App ของคุณสำหรับแต่ละภาษาที่ผู้ใช้ของคุณพูดได้ ในการทำเช่นนี้ ให้สลับระหว่างภาษาในรายการ Editable language และแก้ไขเนื้อหาในแต่ละภาษาแยกกัน:

หากเนื้อหาไม่ได้รับการแปล จะแสดงในภาษาที่ระบุเป็น default ใน Language settings

หมายเหตุ

องค์ประกอบใด ๆ ที่คุณเพิ่มลงในเทมเพลตจะปรากฏพร้อมเนื้อหาเดียวกันสำหรับทุกภาษา อย่าลืมแปลข้อความที่เพิ่มเข้ามา (รวมถึงข้อความปุ่ม) สำหรับทุกภาษาที่คุณใช้ในเทมเพลตของคุณ

การตั้งค่าเทมเพลตทั่วไป

ในแท็บ Popup คุณสามารถกำหนดค่าการตั้งค่าเทมเพลตทั่วไปได้:

• ตั้งค่าตำแหน่งป๊อปอัปบนหน้าจอ;
• เปลี่ยนความกว้างและความสูงของป๊อปอัป;
• ปรับความโค้งของเส้นขอบ;
• กำหนดค่าการตั้งค่าเนื้อหาสำหรับทั้งเทมเพลต: การจัดแนว ความกว้าง แบบอักษร และสี;
• ตั้งค่าสีพื้นหลังหรือเพิ่มภาพพื้นหลัง;
• ปรับแต่งตำแหน่งและลักษณะของปุ่มปิด

ปรับแต่งลักษณะและการทำงานของข้อความ In-App (iOS และ Android Native)

ใช้ In-App Settings เพื่อควบคุมลักษณะและการทำงานของข้อความ In-App ของคุณบนแอป iOS และ Android แบบเนทีฟ คุณสามารถปรับตำแหน่งบนหน้าจอ เลือกแอนิเมชัน และเปิดใช้งานท่าทางการปัดเพื่อปิดได้

ในการกำหนดค่าการตั้งค่า In-App:

1. คลิก Settings ที่ด้านบนของหน้าจอ

2. ในหน้าต่างการตั้งค่า เลือกลักษณะและการทำงานที่คุณต้องการสำหรับข้อความ In-App ของคุณโดยการปรับตัวเลือกที่มีอยู่:

ตั้งค่าตำแหน่งข้อความบนหน้าจอ

เลือกตำแหน่งที่ข้อความควรจะปรากฏ

ตัวเลือกประกอบด้วย: Fullscreen, Top, Center, Bottom

เลือกแอนิเมชันขาเข้า

เลือกวิธีที่ข้อความจะปรากฏบนหน้าจอ

ตัวเลือกประกอบด้วย: Up, Down, Left, Right

เลือกแอนิเมชันขาออก

เลือกวิธีที่ข้อความจะหายไป

ตัวเลือกประกอบด้วย: Up, Down, Left, Right

เปิดใช้งานการปัดเพื่อปิด (ไม่บังคับ)

อนุญาตให้ผู้ใช้ปิดข้อความโดยการปัดไปในทิศทางเดียวหรือหลายทิศทาง

ตัวเลือกประกอบด้วย: Left, Right, Up, Down

3. หลังจากเลือกการตั้งค่าที่คุณต้องการแล้ว คลิก Apply เพื่อบันทึกการเปลี่ยนแปลง หรือ Cancel เพื่อยกเลิก

บันทึกและใช้เทมเพลต

คลิก Save เพื่อใช้การเปลี่ยนแปลง

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

• แสดง In-App เป็นส่วนหนึ่งของ Customer Journey;
• ส่ง Push ที่เปิด In-App เมื่อคลิก;
• แสดง In-App เดียวให้กับผู้ใช้ของคุณ