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

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

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

อินเทอร์เฟซการสร้างเทมเพลตข้อความในแอปที่แสดงปุ่ม Add template

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

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

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

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

ฟอร์มการสร้างเทมเพลตพร้อมช่องชื่อและตัวเลือก Create new template

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

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

เลย์เอาต์

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

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

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

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

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

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

ข้อความในแอปแนวตั้ง

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

ข้อความในแอปแนวนอน

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

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

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

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

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

การกำหนดค่าเลย์เอาต์คอลัมน์แบบผสมที่แสดงตัวเลือกการซ้อนแนวตั้งและแนวนอน

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

หัวข้อ

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

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

ข้อความ

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

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

รูปภาพ

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

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

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

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

ปุ่ม

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

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

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

ตัวแบ่ง

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

ฟอร์ม

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

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

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

การกำหนดค่าพารามิเตอร์ฟิลด์ฟอร์มที่แสดงประเภทฟิลด์ ชื่อ ป้ายกำกับ และการตั้งค่าข้อความตัวยึด

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

อินเทอร์เฟซ Add New Field สำหรับการสร้างฟิลด์ฟอร์มเพิ่มเติมด้วยประเภทข้อมูลที่แตกต่างกัน

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

HTML

บล็อก HTML ช่วยให้คุณสามารถเพิ่มโค้ด HTML ที่กำหนดเองลงในเทมเพลตได้

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

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

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

ตัวอย่างเทมเพลตฟอร์มสำรวจที่ออกแบบไว้ล่วงหน้าในส่วนเทมเพลตเริ่มต้น

นอกจากนี้ คุณยังสามารถปรับปรุงข้อความในแอปของคุณโดยการฝังวิดีโอเพื่อประสบการณ์ผู้ใช้ที่น่าสนใจยิ่งขึ้น นี่คือตัวอย่างวิธีการฝังวิดีโอ 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:

อินเทอร์เฟซองค์ประกอบเมนูที่แสดงตัวเลือก Add New Item สำหรับรายการนำทาง

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

การกำหนดค่ารายการเมนูที่แสดงการป้อนข้อความและตัวเลือกการเลือกการกระทำ

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

ตัวเลือกเลย์เอาต์เมนูที่แสดงประเภทเมนูแนวนอนและแนวตั้งพร้อมการตั้งค่าตัวคั่น

การปรับเนื้อหาให้เหมาะกับแต่ละบุคคล

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

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

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

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

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

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

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

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

ป๊อปอัปการตั้งค่าเทมเพลตทั่วไปที่แสดงตำแหน่ง ขนาด สไตล์ และตัวเลือกปุ่มปิด

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

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

ในการกำหนดค่าการตั้งค่าในแอป:

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

ตำแหน่งปุ่ม Settings ในอินเทอร์เฟซตัวแก้ไขในแอป

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

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

เลือกว่าข้อความควรปรากฏที่ใด

ตัวเลือกรวมถึง: Fullscreen, Top, Center, Bottom

เลือกภาพเคลื่อนไหวขาเข้า

เลือกว่าข้อความจะปรากฏบนหน้าจออย่างไร

ตัวเลือกรวมถึง: Up, Down, Left, Right

เลือกภาพเคลื่อนไหวขาออก

เลือกว่าข้อความจะหายไปอย่างไร

ตัวเลือกรวมถึง: Up, Down, Left, Right

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

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

ตัวเลือกรวมถึง: Left, Right, Up, Down

ฟอร์มที่แสดงตัวเลือกการตั้งค่าข้อความในแอปทั้งหมด รวมถึงตำแหน่งข้อความ ภาพเคลื่อนไหวขาเข้าและขาออก และทิศทางการปัดเพื่อปิด

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

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

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

อินเทอร์เฟซยืนยันการบันทึกเทมเพลตที่แสดงการสร้างเทมเพลตสำเร็จ

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