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

ไปที่ Content → Rich media และคลิก Add template:

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

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

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

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

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

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

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

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

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

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

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

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

คุณสามารถแก้ไขพารามิเตอร์แบบอักษร สี การจัดแนวข้อความ ความสูงของบรรทัด และ 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 และเลือกประเภทข้อมูล:

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

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

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

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

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

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

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

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

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

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

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

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

• แสดง in-app เป็นส่วนหนึ่งของ customer journey
• ส่ง push notification ที่จะเปิด in-app เมื่อคลิก
• แสดง in-app เดียวให้กับผู้ใช้ของคุณ