สร้างข้อความ in-app ในเครื่องมือแก้ไขในตัว

วิดีโอ Youtube: สร้าง In-Apps โดยไม่ต้องเขียนโค้ดในเครื่องมือแก้ไขที่ใช้งานง่ายของเรา

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

ในการสร้างเทมเพลต in-app ให้ไปที่ Content → In-apps และคลิก Add template:

ที่นี่ คุณมีสามตัวเลือก:

1. อัปโหลดไฟล์ ZIP พร้อมข้อความ in-app ที่เป็น HTML ของคุณ
2. เลือกและปรับแต่ง หนึ่งในเทมเพลตที่สร้างไว้ล่วงหน้า
3. สร้างเทมเพลตของคุณเองตั้งแต่ต้น

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

ป้อนชื่อเทมเพลต เลือก 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 เดียวให้กับผู้ใช้ของคุณ