การอ้างอิงบล็อกเนื้อหาอีเมล

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

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

เปิดแท็บ Blocks และลากบล็อกไปยังพื้นที่ทำงาน หรือคลิกที่บล็อกเพื่อเพิ่มไว้ที่ท้ายอีเมล บล็อกที่มีให้ใช้งาน:

• หัวเรื่อง: ชื่อเรื่องและหัวข้อสั้นๆ ในอีเมล
• ข้อความ: เนื้อหาหลักและคำอธิบายที่ยาวขึ้น
• ปุ่ม: call to action ที่สามารถคลิกได้
• รูปภาพ: รูปภาพจาก Media store การอัปโหลด หรือ URL
• วิดีโอ: โปสเตอร์วิดีโอที่สามารถคลิกได้ซึ่งเชื่อมโยงไปยังวิดีโอ YouTube หรือ Vimeo
• การ์ด: รูปภาพที่จับคู่กับหัวเรื่อง ข้อความ และปุ่มในเลย์เอาต์เดียว
• เส้นแบ่ง: เส้นที่แบ่งส่วนต่างๆ ทางสายตา
• 2 คอลัมน์: สองคอลัมน์เท่ากันวางข้างกัน
• 3 คอลัมน์: สามคอลัมน์เท่ากันวางข้างกัน
• 4 คอลัมน์: สี่คอลัมน์เท่ากันวางข้างกัน
• 33 / 67: สองคอลัมน์โดยที่ด้านซ้ายใช้ความกว้างประมาณ 33% และด้านขวาประมาณ 67%
• 67 / 33: สองคอลัมน์โดยที่ด้านซ้ายใช้ความกว้างประมาณ 67% และด้านขวาประมาณ 33%
• ตัวจับเวลา: การนับถอยหลังสำหรับข้อเสนอและกำหนดเวลา
• บาร์โค้ด: Code 128, EAN-13, EAN-8, UPC-A หรือ QR code ที่สแกนได้ซึ่งสร้างจากค่าส่วนบุคคล เช่น บัตรกำนัล
• เมนู: แถวหรือคอลัมน์ของลิงก์ เช่น การนำทางหรือรายชื่อติดต่อ
• โซเชียล: ไอคอนที่เชื่อมโยงไปยังโปรไฟล์โซเชียลของคุณ
• HTML: HTML ที่กำหนดเอง เช่น แบบฟอร์ม แบบสำรวจ หรือวิดีโอที่ฝังไว้
• สินค้า: ตารางการ์ดสินค้าที่เกิดซ้ำ ป้อนสินค้าด้วยตนเอง หรือดึงมาจาก แคตตาล็อกสินค้า ของคุณ, ตะกร้าสินค้าที่ถูกทิ้งของผู้รับ หรือกลยุทธ์การแนะนำในตัว เช่น สินค้าขายดีหรือสินค้ากลับมาในสต็อก
• ข่าวสาร: ตารางการ์ดบทความที่เกิดซ้ำ เลือกด้วยตนเองจากฟีด RSS หรือ Atom หรือดึงข้อมูลสดจากฟีดที่ลงทะเบียนสำหรับแอปพลิเคชันของคุณ
• ช่องโฆษณา: ตำแหน่งที่ต้องชำระเงินซึ่งแสดงแคมเปญที่ได้รับการสนับสนุนแก่ผู้รับ

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

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

คลิกที่บล็อกบนพื้นที่ทำงานเพื่อเริ่มแก้ไข เลือกข้อความเพื่อเปิดแถบเครื่องมือจัดรูปแบบ

ตัวเลือกในแถบเครื่องมือ

• สไตล์ข้อความ: ตั้งค่าสไตล์ย่อหน้า (Heading 1, Heading 2, Normal ฯลฯ) สำหรับทั้งบล็อก
• ขนาดตัวอักษร: ปรับขนาดข้อความที่เลือก หรือใช้ขนาดกับทั้งย่อหน้า
• ตัวหนา / ตัวเอียง / ขีดเส้นใต้ / ขีดทับ: การจัดรูปแบบตัวอักษรมาตรฐาน
• การจัดตำแหน่ง: ชิดซ้าย, กึ่งกลาง หรือชิดขวา
• ลิงก์: ครอบข้อความที่เลือกด้วยไฮเปอร์ลิงก์
• รายการสัญลักษณ์ / รายการลำดับเลข: เปลี่ยนบรรทัดที่เลือกให้เป็นรายการ สัญลักษณ์หรือตัวเลขใดๆ ที่บรรทัดเริ่มต้นด้วยจะถูกลบออก เพื่อไม่ให้ซ้ำกับเครื่องหมายของรายการเอง

เลือกบล็อก (ไม่ใช่ช่วงข้อความ) เพื่อเปิดการตั้งค่าในแผงด้านขวา จากนั้นเปิด Letter spacing เพื่อเพิ่มหรือลดระยะห่างระหว่างตัวอักษรสำหรับทั้งบล็อก ยอมรับค่าทศนิยมและค่าลบ หากต้องการใช้ระยะห่างตัวอักษรกับบล็อกข้อความทั้งหมดพร้อมกัน ให้ตั้งค่าเป็นค่าเริ่มต้นสำหรับทั้งอีเมลภายใต้ Typography ดูที่ กำหนดค่าสไตล์ทั้งอีเมล

การวางจากเอกสารอื่น

การวางข้อความจาก Google Docs, Word หรือหน้าเว็บจะคงรูปแบบตัวหนา, ตัวเอียง, ขีดเส้นใต้, ขีดทับ และลิงก์ไว้ สี, ขนาดตัวอักษร และตระกูลตัวอักษรจากต้นฉบับจะไม่ถูกนำมาใช้ — การพิมพ์ของบล็อกเองจะมีความสำคัญกว่าเสมอ หากต้องการละเว้นการจัดรูปแบบต้นฉบับทั้งหมดและใช้สไตล์ของบล็อก ให้วางด้วย Ctrl+Shift+V (Cmd+Shift+V บน Mac)

รายการสัญลักษณ์หรือรายการลำดับเลขที่วางจะคงสัญลักษณ์หรือตัวเลขไว้เป็นข้อความธรรมดาที่จุดเริ่มต้นของแต่ละบรรทัดในบล็อกเดียวกัน เลือกบรรทัดเหล่านั้นแล้วคลิก Bulleted list / Numbered list เพื่อเปลี่ยนให้เป็นรายการจริง — ปุ่มจะลบเครื่องหมายที่เหลืออยู่ให้คุณ

ในช่องบรรทัดเดียว เช่น ป้ายกำกับ Button การขึ้นบรรทัดใหม่ที่วางจะยุบเป็นช่องว่างเดียว

การปรับแต่งส่วนบุคคลด้วย Merge Tags

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

รูปภาพ

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

การเพิ่มรูปภาพ

คลิก Add image เมื่อบล็อกว่างเปล่า หรือ Replace image เมื่อมีรูปภาพตั้งค่าอยู่แล้ว ซึ่งจะเปิด Media Gallery ที่มีสามแท็บ:

• Library: ไฟล์ที่คุณอัปโหลด สามารถค้นหาตามชื่อไฟล์ได้
• Stock photos: ค้นหารูปภาพฟรีจาก Pexels โดยไม่ต้องออกจากตัวแก้ไข คลิกที่รูปภาพเพื่อคัดลอกไปยังไลบรารีของคุณและแทรกเข้าไป
• Generate with AI: อธิบายรูปภาพที่คุณต้องการและเลือกอัตราส่วนภาพ รูปภาพที่สร้างขึ้นจะถูกบันทึกไว้ในไลบรารีของคุณ

คุณยังสามารถวางลิงก์ที่โฮสต์ไว้โดยตรงใน Image URL เพื่อข้ามแกลเลอรีได้

การลบรูปภาพออกจาก Library

ลบรูปภาพโดยไม่ต้องออกจากตัวแก้ไข: วางเมาส์เหนือไฟล์แล้วคลิก Delete หรือเลือกหลายไฟล์แล้วคลิก Delete selected จากนั้นยืนยันในกล่องโต้ตอบ

ข้อควรระวัง

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

ข้อความ Alt

อธิบายรูปภาพใน Alt text เพื่อการเข้าถึง หรือคลิก Generate alt with AI เพื่อให้ AI เขียนคำอธิบายจากรูปภาพในภาษาที่คุณกำลังแก้ไขอยู่ รูปภาพที่เพิ่มจาก Stock photos หรือ Generate with AI จะได้รับข้อความ alt โดยอัตโนมัติ

ขนาดและการปรับพอดี

• Width: ตั้งค่าความกว้างของรูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของพื้นที่ที่มีอยู่เพื่อให้รูปภาพยืดหยุ่นได้ ปล่อยไว้ที่ค่าเริ่มต้นเพื่อใช้ความกว้างตามธรรมชาติของรูปภาพ
• Height (px): ตั้งค่าความสูงในการแสดงผลแบบคงที่ ปล่อยว่างไว้เพื่อปรับขนาดโดยอัตโนมัติ — จากอัตราส่วนการครอบตัดหากมีการตั้งค่าไว้ มิฉะนั้นจะมาจากสัดส่วนตามธรรมชาติของรูปภาพ
• Crop: เลือก Original เพื่อรักษาสัดส่วนตามธรรมชาติของรูปภาพ หรืออัตราส่วน (Square (1:1), 4:3, 3:2, 16:9) เพื่อครอบตัดรูปภาพให้พอดีกับกล่องนั้น
• Fit: เลือก Cover เพื่อเติมเต็มกล่องและครอบตัดให้พอดี ตั้งค่าจุดครอบตัดด้วย Focal point หรือเลือก Contain เพื่อปรับขนาดรูปภาพทั้งหมดภายในกล่องโดยไม่ครอบตัด จัดตำแหน่งด้วย Set position
• Corner radius (px): ทำให้มุมของรูปภาพโค้งมน เปิด More options เพื่อตั้งค่าแต่ละมุมแยกกัน หรือปิดไว้เพื่อใช้รัศมีเดียวกันกับทั้งสี่มุม

หมายเหตุ

Gmail และ Apple Mail จะแสดงผลมุมโค้งมนในอีเมลที่ส่ง รวมถึงค่าแต่ละมุมด้วย Outlook Desktop จะไม่สนใจรัศมีมุมบนรูปภาพ เช่นเดียวกับที่ทำกับส่วนอื่นๆ ในอีเมล ดังนั้นรูปภาพจะยังคงเป็นมุมเหลี่ยม

สลับพื้นที่ทำงานเป็น Mobile (ดู แก้ไขมุมมองมือถือ) เพื่อตั้งค่าเหล่านี้แยกกันสำหรับหน้าจอโทรศัพท์ เลือก Width (mobile), Height (mobile), Crop (mobile) หรือ Fit (mobile) เพื่อแทนที่การตั้งค่านั้นๆ โดยเริ่มจากค่าบนเดสก์ท็อป ปล่อยให้ช่องไม่ถูกเลือกเพื่อสืบทอดการตั้งค่าจากเดสก์ท็อปต่อไป Crop (mobile) จะปรากฏขึ้นเมื่อ Crop ถูกตั้งค่าเป็นอัตราส่วนบนเดสก์ท็อปเท่านั้น และการเปลี่ยน Crop กลับเป็น Original บนเดสก์ท็อปจะยกเลิกการแทนที่ Crop (mobile) ใดๆ

ลิงก์และระยะห่าง

หากต้องการเปิดลิงก์เมื่อคลิกที่รูปภาพ ให้ป้อนใน Link URL และตั้งค่า Link target ให้เปิดในแท็บเดียวกันหรือแท็บใหม่ ดู เพิ่มลิงก์ สำหรับประเภทลิงก์ที่มีให้ใช้งาน

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

วิดีโอ

บล็อก Video จะเพิ่มวิดีโอ YouTube หรือ Vimeo ลงในอีเมลในรูปแบบภาพขนาดย่อที่สามารถคลิกได้ โปรแกรมอีเมลไม่สามารถเล่นวิดีโอภายในข้อความได้ ดังนั้นบล็อกจะแสดงภาพนิ่งพร้อมสัญลักษณ์ ▶ ซ้อนทับ เมื่อผู้รับแตะที่ภาพ วิดีโอจะเปิดขึ้นบน YouTube หรือ Vimeo ซึ่งใช้งานได้กับโปรแกรมอีเมลหลักทุกโปรแกรม รวมถึง Outlook

เลือกบล็อก Video บนพื้นที่ทำงานเพื่อเปิดการตั้งค่าในแผงด้านขวา

• Video URL: วางลิงก์ YouTube หรือ Vimeo ตัวแก้ไขจะดึงภาพขนาดย่อมาโดยอัตโนมัติ
• Alt text: อธิบายวิดีโอเพื่อการเข้าถึง
• Thumbnail URL: เก็บภาพขนาดย่อที่ดึงมาอัตโนมัติ หรือคลิก Add thumbnail / Replace thumbnail เพื่อเลือกจาก Media Gallery หรือวางลิงก์ที่โฮสต์ไว้โดยตรง
• Play button overlay: เปิดใช้งานโดยค่าเริ่มต้น ปิดเพื่อแสดงภาพขนาดย่อธรรมดาโดยไม่มีสัญลักษณ์ ▶ ซ้อนทับ การซ้อนทับนี้ไม่สามารถใช้ได้กับภาพขนาดย่อบนโฮสต์ภายนอกบางแห่ง ตัวแก้ไขจะเตือนคุณเมื่อเป็นเช่นนั้น และอีเมลจะแสดงภาพขนาดย่อธรรมดาแทน
• Width (px), Corner radius (px) และ Alignment: ควบคุมลักษณะและตำแหน่งของภาพขนาดย่อในเลย์เอาต์ คุณสามารถตั้งค่าการจัดตำแหน่งแยกกันสำหรับมือถือได้

การ์ด

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

• Layout: เลือกด้านที่รูปภาพจะอยู่เมื่อเทียบกับเนื้อหา
• Image: แทนที่รูปภาพ, ตั้งค่าข้อความ alt หรือแก้ไขข้อความแจ้งสำหรับรูปภาพที่คุณสร้างด้วย Generate with AI
• Size & fit: ช่องขนาดจะขึ้นอยู่กับ Layout Crop สามารถใช้ได้กับทุกเลย์เอาต์ Fit ใช้ได้กับทุกเลย์เอาต์:
  • Top: Height ตั้งค่าความสูงของรูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของความกว้างของการ์ด Width (px) จะจำกัดความกว้างของรูปภาพให้เป็นพิกเซลคงที่และจัดให้อยู่กึ่งกลาง
  • Background: Height ตั้งค่าความสูงของการ์ดเป็น px หรือเป็นเปอร์เซ็นต์ของความกว้าง ไม่มีช่อง Width (px) รูปภาพจะเป็นพื้นหลังของการ์ด Fit ก็ทำงานที่นี่เช่นกัน: Cover จะครอบตัดรูปภาพให้พอดีกับการ์ด — ตั้งค่าจุดครอบตัดด้วย Focal point — และ Contain จะปรับขนาดรูปภาพทั้งหมดภายในนั้น โดยจัดตำแหน่งด้วย Set position Outlook Desktop จะประมาณค่า Contain และไม่สนใจทั้งสองอย่าง
  • Left หรือ Right: Width ตั้งค่าความกว้างของคอลัมน์รูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของการ์ด Height (px) จะกำหนดความสูงของรูปภาพเป็นพิกเซลคงที่ การตั้งค่าความสูงเป็นพิกเซลจะล้างอัตราส่วนการครอบตัดด้านล่าง การเลือกอัตราส่วนการครอบตัดจะล้างความสูงเป็นพิกเซล คุณไม่สามารถใช้ทั้งสองอย่างพร้อมกันได้
  • สำหรับทุกเลย์เอาต์:
    • Crop: เลือก Original เพื่อรักษาสัดส่วนตามธรรมชาติของรูปภาพ หรืออัตราส่วน (Square (1:1), 4:3, 3:2, 16:9) เพื่อครอบตัดรูปภาพให้พอดีกับกล่องนั้น
    • Fit: เลือก Cover เพื่อเติมเต็มกล่องและครอบตัดให้พอดี ตั้งค่าจุดครอบตัดด้วย Focal point หรือเลือก Contain เพื่อปรับขนาดรูปภาพทั้งหมดภายในกล่องโดยไม่ครอบตัด จัดตำแหน่งด้วย Set position
    • Corner radius (px): ทำให้มุมของรูปภาพโค้งมน เปิด More options เพื่อตั้งค่าแต่ละมุมแยกกัน หรือปิดไว้เพื่อใช้รัศมีเดียวกันกับทั้งสี่มุม Gmail และ Apple Mail จะแสดงผล แต่ Outlook Desktop จะไม่สนใจ เช่นเดียวกับ บล็อกรูปภาพ
• Spacing: ตั้งค่าระยะห่างรอบๆ เนื้อหาของการ์ด

ปุ่ม

Button คือ call to action ที่สามารถคลิกได้ในอีเมล

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

หากต้องการตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อผู้รับคลิกปุ่ม:

• คลิกไอคอนลิงก์ในแถบเครื่องมือเพื่อเปิด Insert/Edit Link
• หรือใช้ Action type และ URL ในส่วน Link ของแผงด้านขวา

ดู เพิ่มลิงก์ สำหรับประเภทการกระทำที่มีให้ใช้งาน

ในแผงด้านขวา ภายใต้ Styles:

• Alignment: ชิดซ้าย, กึ่งกลาง หรือชิดขวา
• Background: เปิดเพื่อแทนที่ลักษณะเริ่มต้น จากนั้นเลือก Solid สำหรับสีทึบ หรือ Gradient สำหรับการไล่ระดับสีเชิงเส้นสองจุด (สีเริ่มต้น, สีสิ้นสุด และมุมเป็นองศา, ค่าเริ่มต้น 90°) เมื่อเลือก Gradient ปุ่มจะยังคงแสดงสีทึบในโปรแกรมอีเมลที่ไม่รองรับพื้นหลังแบบไล่ระดับสี เช่น Outlook บน Windows ปุ่มที่มีพื้นหลังสีทึบอยู่แล้วจะยังคงอยู่และเปิดด้วย Solid ที่ถูกเลือก
• Text color, Font size และ Font family: เปิดแต่ละตัวเลือกเพื่อแทนที่ลักษณะเริ่มต้น
• Corner radius, Border color และ Border width: รูปร่างและเส้นขอบของปุ่ม Gmail และ Apple Mail จะแสดงผลรัศมีมุมของปุ่ม แต่ Outlook Desktop จะไม่สนใจและแสดงมุมเหลี่ยม เช่นเดียวกับที่ทำกับรูปภาพ
• Width: ตั้งค่าความกว้างของปุ่มแบบคงที่หรือปล่อยให้เป็นอัตโนมัติ
• Padding: เพิ่มช่องว่างภายในปุ่ม ใช้ All sides สำหรับระยะห่างที่เท่ากัน หรือเปิด More options เพื่อตั้งค่าแต่ละด้านแยกกัน

เส้นแบ่ง

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

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

HTML

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

เหนือช่องโค้ด คลิก Merge tag เพื่อค้นหา Tags ของบัญชีของคุณและแทรก Merge Tag ที่ตำแหน่งเคอร์เซอร์ — ซึ่งเป็นคุณสมบัติการปรับแต่งส่วนบุคคลเช่นเดียวกับที่อธิบายไว้ข้างต้น — หรือคลิกไอคอนอีโมจิเพื่อแทรกอีโมจิในลักษณะเดียวกัน คลิกที่ Merge Tag ที่แทรกเข้าไปเพื่อเปิดแผง Default / Format เดียวกันกับในบล็อก Heading หรือ Text

ตัวอย่าง

แบบฟอร์มลูกค้าเป้าหมาย

แบบฟอร์มลูกค้าเป้าหมายนี้รวบรวมที่อยู่อีเมลเพื่อส่งรหัสโปรโมชั่นสำหรับ New Year Sale

โค้ด 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: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</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;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

วิดีโอ

ตัวอย่างนี้ฝังวิดีโอโปรโมชั่น New Year Sale ในอีเมล

โค้ด HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

หมายเหตุ

คุณยังสามารถเพิ่มลิงก์ยกเลิกการสมัครรับข่าวสารได้โดยตรงในบล็อก HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

ตัวยึดตำแหน่ง %%PW_EMAIL_UNSUBSCRIBE%% จะถูกแทนที่ด้วย URL ยกเลิกการสมัครรับข่าวสารของ Pushwoosh เมื่ออีเมลถูกส่ง

เมนู

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

สำหรับแต่ละรายการในเมนู ให้ตั้งค่า:

• Label: ข้อความที่ผู้รับเห็น
• URL: ที่ที่รายการจะเปิด
• Target: แท็บเดียวกันหรือแท็บใหม่

ในการตั้งค่าบล็อก คุณยังสามารถตั้งค่า:

• Direction: แนวนอนหรือแนวตั้ง
• Alignment: ชิดซ้าย, กึ่งกลาง หรือชิดขวา
• Separator: ตัวคั่นเสริมระหว่างรายการ
• แบบอักษร, ขนาด, น้ำหนัก, ระยะห่างตัวอักษร และสีของลิงก์/ข้อความ

โซเชียล

บล็อก Social จะแสดงแถวของไอคอนโซเชียลมีเดียที่เชื่อมโยงไปยังโปรไฟล์ของคุณ ใช้เพื่อส่งผู้รับไปยัง Facebook, Instagram, X และแพลตฟอร์มอื่นๆ จากอีเมล

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

ตัวจับเวลาถอยหลัง

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

วิธีการตั้งค่า:

1. ใน Countdown ตั้งค่า End date และ End time จากนั้นเลือก Timezone และ Language สำหรับป้ายกำกับของตัวจับเวลา
2. เปิด Labels เพื่อแสดงคำบรรยาย “days / hours / minutes / seconds” ใต้ตัวเลข หรือปิดเพื่อแสดงเฉพาะตัวเลข
3. ใน Appearance ตั้งค่า Background, Digits color, Labels color และขนาดตัวอักษรสำหรับตัวเลข (ค่าเริ่มต้น 40px) และป้ายกำกับ (ค่าเริ่มต้น 16px)
4. ปรับ Spacing (ระยะห่าง) ตามต้องการ

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

บาร์โค้ด

บล็อก Barcode จะแสดงบาร์โค้ดหรือ QR code ที่สามารถสแกนได้จากค่าส่วนบุคคล ซึ่งส่วนใหญ่มักจะเป็น บัตรกำนัล

วิธีการตั้งค่า:

1. ใน Code ให้คง {{voucher}} ไว้เมื่ออีเมลถูกส่งพร้อมกับ voucher pool หรือคลิก Merge tag และเลือกแท็กที่เก็บรหัสของผู้รับแต่ละคน อีเมลจะแปลงแท็ก ณ เวลาส่งเพื่อให้แต่ละคนได้รับค่าที่สามารถสแกนได้ของตนเอง

2. เลือก Symbology:
   • QR: โค้ด 2D สี่เหลี่ยมที่โทรศัพท์สามารถสแกนได้ รองรับข้อความใดๆ รวมถึงรหัสตัวอักษรและตัวเลข เช่น WELCOME2025-A1
   • Code 128: บาร์โค้ดเชิงเส้นสำหรับข้อความใดๆ รวมถึงรหัสตัวอักษรและตัวเลขเดียวกัน
   • EAN-13: บาร์โค้ดค้าปลีกทั่วไปในยุโรปและภูมิภาคอื่นๆ อีกมากมาย เฉพาะตัวเลข, 12–13 ตัวอักษร
   • EAN-8: บาร์โค้ดค้าปลีกที่สั้นกว่าสำหรับบรรจุภัณฑ์ขนาดเล็ก เฉพาะตัวเลข, 7–8 ตัวอักษร
   • UPC-A: บาร์โค้ดค้าปลีกทั่วไปในอเมริกาเหนือ เฉพาะตัวเลข, 11–12 ตัวอักษร
3. หากคุณเลือก QR ให้ตั้งค่า Error correction ซึ่งจะเพิ่มข้อมูลสำรองเพื่อให้โค้ดยังคงสแกนได้เมื่อส่วนหนึ่งถูกบดบัง, สึกหรอ หรือมองเห็นได้ยาก เลือก L, M, Q หรือ H (ค่าเริ่มต้น M) ระดับที่สูงขึ้นจะทนทานต่อความเสียหายได้มากขึ้น แต่จะทำให้รูปแบบหนาแน่นขึ้น ซึ่งอาจทำให้อ่านได้ยากขึ้นในขนาดเล็ก ข้ามช่องนี้สำหรับสัญลักษณ์อื่นๆ
4. เลือกเปิด Print the code in digits เพื่อแสดงค่าใต้โค้ด

5. ใน Appearance ตั้งค่า Bars color, Background, Width (px) และ Height (px) ปล่อย Quiet zone, modules ไว้ที่ Auto สำหรับระยะขอบเริ่มต้น

หมายเหตุ

บนพื้นที่ทำงาน บล็อกจะแสดงบาร์โค้ดตัวอย่าง ไม่ใช่รหัสผู้รับจริง {{voucher}} และตัวยึดตำแหน่งอื่นๆ ไม่สามารถเปลี่ยนเป็นภาพที่สแกนได้จนกว่าจะถึงเวลาส่ง ส่งอีเมลทดสอบ เพื่อดูรหัสจริงก่อนที่แคมเปญจะออกไป ใช้ EAN-13, EAN-8 หรือ UPC-A เฉพาะสำหรับค่าที่เป็นตัวเลขเท่านั้น ตามความยาวที่แต่ละประเภทคาดหวัง สำหรับรหัสตัวอักษรและตัวเลข เช่น WELCOME2025-A1 ให้ใช้ Code 128 หรือ QR แทน Smart check จะเตือนคุณด้วยหากค่าไม่ตรงกับ Symbology ที่คุณเลือก

คอลัมน์

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

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

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

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

สำหรับรูปภาพของคอลัมน์เอง (รูปภาพที่คุณเพิ่มด้วย Add image ในการตั้งค่าของคอลัมน์) การตั้งค่าจะแสดงส่วน Size & fit ซึ่งเป็นการควบคุมเดียวกับเลย์เอาต์ Left / Right ของบล็อก Card บล็อก Image ที่ลากเข้ามาในคอลัมน์จะเป็นองค์ประกอบเนื้อหาแยกต่างหากและจะคงช่องขนาดที่เรียบง่ายของตัวเองไว้ — ดู รูปภาพ

คุณยังสามารถวางลิงก์ที่โฮสต์ไว้โดยตรงใน Image URL เพื่อข้ามแกลเลอรีได้

• Width: ตั้งค่าความกว้างของรูปภาพเป็น px หรือเป็นเปอร์เซ็นต์ของคอลัมน์ ปล่อยว่างไว้เพื่อเติมเต็มคอลัมน์
• Height (px): กำหนดความสูงของรูปภาพเป็นพิกเซลคงที่ การตั้งค่าความสูงเป็นพิกเซลจะล้างอัตราส่วนการครอบตัดด้านล่าง การเลือกอัตราส่วนการครอบตัดจะล้างความสูงเป็นพิกเซล คุณไม่สามารถใช้ทั้งสองอย่างพร้อมกันได้
• Crop: เลือก Original เพื่อรักษาสัดส่วนตามธรรมชาติของรูปภาพ หรืออัตราส่วน (Square (1:1), 4:3, 3:2, 16:9) เพื่อครอบตัดรูปภาพให้พอดีกับกล่องนั้น
• Fit: เลือก Cover เพื่อเติมเต็มกล่องและครอบตัดให้พอดี ตั้งค่าจุดครอบตัดด้วย Focal point หรือเลือก Contain เพื่อปรับขนาดรูปภาพทั้งหมดภายในกล่องโดยไม่ครอบตัด จัดตำแหน่งด้วย Set position
• Corner radius (px): ทำให้มุมของรูปภาพโค้งมน เปิด More options เพื่อตั้งค่าแต่ละมุมแยกกัน หรือปิดไว้เพื่อใช้รัศมีเดียวกันกับทั้งสี่มุม Gmail และ Apple Mail จะแสดงผล แต่ Outlook Desktop จะไม่สนใจ เช่นเดียวกับ บล็อกรูปภาพ

หมายเหตุ

รูปภาพคอลัมน์ที่ตั้งค่าเฉพาะ Height (px) จะยืดตามความกว้างของคอลัมน์และครอบตัดตามความสูงนั้น

สินค้า

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

คลิกที่การ์ดบนพื้นที่ทำงานเพื่อให้ใช้งานได้และแก้ไข:

• เปลี่ยนชื่อ, คำอธิบาย, ราคา, รูปภาพ หรือลิงก์ต่อสินค้าเพื่ออัปเดตเฉพาะการ์ดนั้น
• เปลี่ยนเลย์เอาต์ของเทมเพลต, สี, ระยะห่าง หรือองค์ประกอบที่มีอยู่เพื่ออัปเดตทุกการ์ด

ในแผงการตั้งค่า ภายใต้ Source ให้เลือกที่มาของสินค้า:

• Manual: ป้อนสินค้าด้วยตนเอง, เลือกจากแคตตาล็อกสินค้าของคุณตาม ID หรือผสมทั้งสองอย่าง
• Catalog rule: ดึงสินค้าโดยอัตโนมัติตามหมวดหมู่และลำดับการจัดเรียง ซึ่งจะดึงข้อมูลล่าสุดจากแคตตาล็อก ณ เวลาส่ง
• Cart: แสดงรายการจากตะกร้าสินค้าที่ถูกทิ้งล่าสุดของผู้รับแต่ละคน
• Recommendations: ดึงสินค้าที่จัดอันดับตามกลยุทธ์ในตัว — สินค้าขายดี, สินค้ามาใหม่, สินค้ากลับมาในสต็อก หรือลดราคา — ซึ่งจะดึงข้อมูลจากแคตตาล็อกของคุณ ณ เวลาส่ง

หมายเหตุ

แหล่งข้อมูลเหล่านี้ต้องมี Content Templates ในแผนของคุณ หากตัวเลือก Source ไม่สามารถเปลี่ยนเป็น Catalog rule, Cart หรือ Recommendations ได้ โปรดติดต่อฝ่ายสนับสนุนหรือผู้จัดการบัญชีของคุณ

คุณยังต้องมี API access token (Settings → API Access) เพื่อบันทึกอีเมล การแสดงตัวอย่าง, การเรียกใช้ Smart check และทุกอย่างในตัวแก้ไขจะทำงานได้โดยไม่มีโทเค็น เฉพาะ Save เท่านั้นที่จะล้มเหลว พร้อมกับข้อความแจ้งว่าบล็อกไม่มี API access token

เพิ่มสินค้าด้วยตนเอง

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

• Number of products: ตั้งค่าจำนวนการ์ดที่จะแสดง (1–24)
• Add product: เพิ่มการ์ดและกรอกชื่อ, คำอธิบาย, ราคา, รูปภาพ และลิงก์ด้วยตนเอง
• Pick from catalog…: เลือกสินค้าเฉพาะจาก แคตตาล็อกสินค้า ของคุณแทนการพิมพ์
• Refresh from catalog: ดึงข้อมูลชื่อ, คำอธิบาย, ราคา และรูปภาพล่าสุดสำหรับสินค้าที่คุณเลือกจากแคตตาล็อก ในกรณีที่มีการเปลี่ยนแปลงหลังจากที่คุณเพิ่มเข้าไป ไม่ส่งผลกระทบต่อสินค้าที่ป้อนด้วยตนเอง
• Product images: คลิกที่ภาพขนาดย่อเพื่อแทนที่รูปภาพของสินค้านั้น
• Product links: ป้อนหรือแก้ไข URL สำหรับแต่ละสินค้า

ดึงสินค้าด้วยกฎแคตตาล็อก

ดึงสินค้าโดยอัตโนมัติตามหมวดหมู่และลำดับการจัดเรียง โดยไม่ต้องเลือกด้วยตนเอง

• Category: จำกัดเฉพาะหมวดหมู่แคตตาล็อกที่ระบุ หรือ All categories
• Sort: เลือกลำดับที่สินค้าจะถูกดึงมา: Newest first, Price: low to high, Price: high to low หรือ Title A-Z
• Number of products: ตั้งค่าขีดจำกัดจำนวนการ์ดที่จะแสดง (1–12)
• Refresh preview: คำนวณการแสดงตัวอย่างบนพื้นที่ทำงานใหม่เทียบกับแคตตาล็อกในขณะนี้

การแสดงตัวอย่างเทียบกับเวลาส่ง

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

แสดงรายการจากตะกร้าสินค้า

แสดงรายการปัจจุบันจากตะกร้าสินค้าที่ถูกทิ้งของผู้รับ

• Max products shown: ตั้งค่าขีดจำกัดจำนวนการ์ดที่จะแสดง (1–12)
• Preview a user’s cart: ป้อน ID ผู้ใช้หรืออีเมลแล้วคลิก Preview cart เพื่อดูว่าบล็อกแสดงผลอย่างไรสำหรับผู้รับรายนั้นๆ

หมายเหตุ

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

รับสินค้าแนะนำ

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

• Strategy: เลือกว่าสินค้าจะถูกจัดอันดับอย่างไร — Bestsellers (7 days), Bestsellers (30 days), New arrivals, Back in stock, Price drop, Bought together หรือ Based on what they viewed การเลือก Recommendations จะแทนที่การควบคุม Sort จาก Catalog rule ด้วยตัวเลือก Strategy นี้ Bestsellers, Bought together และ Based on what they viewed ต้องการเหตุการณ์จากแบ็กเอนด์ของคุณ ดู วิธีการตั้งค่าการแนะนำสินค้าในอีเมล

• Category: จำกัดเฉพาะหมวดหมู่แคตตาล็อกที่ระบุ หรือ All categories
• Number of products: ตั้งค่าขีดจำกัดจำนวนการ์ดที่จะแสดง (1–12)
• Refresh preview: คำนวณการแสดงตัวอย่างบนพื้นที่ทำงานใหม่เทียบกับแคตตาล็อกในขณะนี้

Bought together ต้องการแท็ก Product

การเลือก Bought together จะเพิ่มช่อง Product tag — ป้อนชื่อแท็กอุปกรณ์ที่เก็บสินค้าอ้างอิง และบล็อกจะแสดงสินค้าที่มักจะซื้อร่วมกันกับสินค้านั้น หากไม่ได้ตั้งค่าแท็ก บล็อกจะกลับไปใช้แคตตาล็อกปกติ

ชื่อแท็กยอมรับเฉพาะตัวอักษร, ตัวเลข, ขีดล่าง และช่องว่างเท่านั้น — อย่างอื่นจะถูกปฏิเสธพร้อมข้อผิดพลาดในบรรทัด เนื่องจากแท็กต้องสามารถอ้างอิงได้ใน Liquid

หมายเหตุ

Bestsellers จัดอันดับสินค้าตามประวัติการสั่งซื้อโดยเฉพาะ Bought together สร้างจากสตรีมการโต้ตอบที่กว้างเช่นเดียวกับ Based on what they viewed — การดู, ตะกร้าสินค้า และการซื้อเหมือนกัน ไม่ใช่เฉพาะการซื้อเท่านั้น บัญชีใหม่ หรือบัญชีที่ยังไม่ได้รวบรวมประวัติเพียงพอสำหรับกลยุทธ์ที่กำหนด จะได้รับแคตตาล็อกปกติแทนจนกว่าจะสะสมเพียงพอ

การตั้งค่าบล็อกสินค้ายังไม่ได้รับการแปล

การตั้งค่าของบล็อก Products รวมถึงชื่อแหล่งข้อมูล Recommendations และป้ายกำกับกลยุทธ์ จะแสดงเป็นภาษาอังกฤษโดยไม่คำนึงถึงภาษาของบัญชีของคุณ

จัดสไตล์ตาราง

เมื่อคุณเลือกแหล่งข้อมูลแล้ว การตั้งค่าเหล่านี้จะควบคุมลักษณะของตารางและการ์ดของมัน ซึ่งจะยังคงเหมือนเดิมไม่ว่าคุณจะใช้แหล่งข้อมูลใด:

• Columns: เลือก 1, 2 หรือ 3 การ์ดต่อแถว บนมือถือ การ์ดจะเรียงซ้อนกันในคอลัมน์เดียวเสมอ
• Gap: เปิดเพื่อตั้งค่าช่องว่างระหว่างการ์ด ปิดจะใช้ค่าเริ่มต้น (16px)
• Description limit: ขีดจำกัดตัวอักษรที่ข้อความคำอธิบายจะถูกตัด เพื่อให้การ์ดมีขนาดที่สม่ำเสมอ
• Card template: เลือกเลย์เอาต์ จากนั้นตั้งค่า Card background, Card corner radius และ Content padding สำหรับทุกการ์ด
• Size & fit: แสดงสำหรับทุกเลย์เอาต์ที่มีรูปภาพ การควบคุม Width, Height, Crop และ Fit เดียวกันกับการปรับขนาดรูปภาพต่อเลย์เอาต์ของ บล็อกการ์ด โดยปรับขนาดตามความกว้างของการ์ดแทนที่จะเป็นทั้งอีเมล

การตั้งค่า Block style ด้านล่างจะจัดสไตล์บล็อกโดยรวม แยกจากการ์ดภายใน:

• Background และ Background image: ตั้งค่าสีพื้นหลังหรือรูปภาพพื้นหลังสำหรับทั้งตาราง เมื่อตั้งค่ารูปภาพ Fit จะเลือกว่าจะวางอย่างไรในบล็อก — Cover จะครอบตัดให้พอดีกับบล็อก, Contain จะพอดีกับรูปภาพทั้งหมดภายใน — และ Focal point / Set position จะวางตำแหน่ง Outlook Desktop จะแสดงเฉพาะสีพื้นหลังและไม่สนใจรูปภาพ ดังนั้นให้ใช้สีที่อ่านง่ายไว้ด้านหลัง
• Border color, Border width และ Corner radius: เพิ่มเส้นขอบและมุมโค้งมนรอบทั้งตาราง เปิด More options ใน Corner radius เพื่อตั้งค่าแต่ละมุมแยกกัน หรือปิดไว้เพื่อใช้รัศมีเดียวกันกับทั้งสี่มุม Gmail และ Apple Mail จะแสดงผล แต่ Outlook Desktop จะไม่สนใจและแสดงมุมเหลี่ยม เช่นเดียวกับที่ทำกับรูปภาพ
• Hide on mobile และ Hide on desktop: ซ่อนทั้งบล็อกบนอุปกรณ์หนึ่ง ดู แสดงหรือซ่อนเนื้อหาตามอุปกรณ์

ราคาลดปรากฏอย่างไร

หากสินค้ามีราคาลดในแคตตาล็อกของคุณ การ์ดจะแสดงราคาที่ลดแล้วพร้อมกับราคาเดิมที่ขีดทฆ่า ซึ่งใช้กับ Catalog rule, Cart และรายการแคตตาล็อกใน Manual สินค้าที่ป้อนด้วยตนเองจะไม่มีราคาลด

ข่าวสาร

บล็อก News จะแสดงตารางการ์ดบทความ การ์ดแต่ละใบสามารถมีรูปภาพ, วันที่, หัวข้อ, สรุป และลิงก์ “อ่านเพิ่มเติม” ได้ เทมเพลตจะทำซ้ำสำหรับทุกบทความ เช่นเดียวกับ บล็อกสินค้า บล็อก News ใหม่จะเริ่มต้นด้วยการ์ดตัวอย่าง 2 ใบ

ในแผงการตั้งค่า ภายใต้ Source ให้เลือกที่มาของบทความ:

• Picked: โหลดบทความจากฟีด RSS หรือ Atom หนึ่งครั้ง หรือเลือกบทความเฉพาะด้วยตนเอง บทความจะถูกคัดลอกไปยังอีเมลและจะไม่เปลี่ยนแปลงอีก
• Live feed: ดึงบทความจากฟีดที่ลงทะเบียนสำหรับแอปพลิเคชันของคุณ ซึ่งจะดึงข้อมูลล่าสุด ณ เวลาส่งเพื่อให้ผู้รับทุกคนได้รับบทความใหม่ล่าสุด

หมายเหตุ

Live feed ต้องการ Content Templates ในแผนของคุณ หาก Source ไม่สามารถเปลี่ยนเป็น Live feed ได้ Pushwoosh จะแสดงคำใบ้ว่าเนื้อหาไดนามิกยังไม่เปิดใช้งานสำหรับบัญชี โปรดติดต่อฝ่ายสนับสนุนหรือผู้จัดการบัญชีของคุณ

เลือกบทความจากฟีด

คลิกที่การ์ดบนพื้นที่ทำงานเพื่อให้ใช้งานได้และแก้ไข:

• เปลี่ยนวันที่, หัวข้อ, สรุป, รูปภาพ หรือลิงก์ต่อบทความเพื่ออัปเดตเฉพาะการ์ดนั้น
• เปลี่ยนเลย์เอาต์ของเทมเพลต, สี, ระยะห่าง หรือองค์ประกอบที่มีอยู่เพื่ออัปเดตทุกการ์ด

บทความจะถูกคัดลอกไปยังเนื้อหาอีเมลเมื่อคุณโหลดแล้ว จะไม่มีการดึงข้อมูลอีกครั้ง ณ เวลาส่ง รูปภาพบทความจะถูกคัดลอกไปยัง Media store ของคุณและแปลงจาก WebP เป็น JPEG หากจำเป็น เนื่องจาก Outlook ไม่สามารถแสดงผล WebP ได้

วาง RSS 2.0 หรือ Atom Feed URL จากนั้น:

• Load latest articles: แทนที่การ์ดปัจจุบันด้วยบทความล่าสุดจากฟีด โดยมีจำนวนการ์ดเท่าเดิม (ค่าเริ่มต้น 2 ใบ)
• Pick articles…: เปิดลิ้นชักที่แสดงรายการบทความล่าสุดของฟีดสูงสุด 12 รายการ พร้อมภาพขนาดย่อ, หัวข้อ, วันที่, หมวดหมู่ และผู้เขียน และเลือกบทความที่จะเพิ่ม บทความที่เลือกจะถูกต่อท้ายการ์ดที่มีอยู่ สูงสุด 12 ใบ บทความที่อยู่บนพื้นที่ทำงานแล้วไม่สามารถเลือกซ้ำได้

หมายเหตุ

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

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

• Article images: คลิกที่ภาพขนาดย่อเพื่อแทนที่รูปภาพของบทความนั้น
• Article links: แสดงเมื่อเทมเพลตการ์ดมีลิงก์ที่ผูกกับบทความ (ปุ่ม “อ่านเพิ่มเติม” เริ่มต้น) แสดงรายการแต่ละบทความตามหัวข้อเพื่อให้คุณสามารถแก้ไขหรือแทนที่ URL ปลายทาง ซึ่งดึงมาจากฟีดในตอนแรก

ดึงบทความจากฟีดสด

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

• Registered feed: เลือกฟีดที่ลงทะเบียนสำหรับแอปพลิเคชันของคุณแล้ว หรือ All feeds of the application เพื่อดึงจากทั้งหมด แผงนี้ใช้สำหรับเลือกฟีดเท่านั้น ไม่ได้ใช้ลงทะเบียน หากยังไม่มี ให้เพิ่มในหน้า News feeds โดยใช้ Add feed
• Category filter: ตัวกรองข้อความอิสระเสริมที่จับคู่กับหมวดหมู่ของบทความจากฟีด (ค่าเริ่มต้น: ทุกหมวดหมู่)
• Articles: จำนวนการ์ดที่จะแสดง (1–12, ค่าเริ่มต้น 3)
• Refresh preview: คำนวณการแสดงตัวอย่างบนพื้นที่ทำงานใหม่เทียบกับฟีดในขณะนี้ หากฟีดไม่ส่งคืนบทความใดๆ Pushwoosh จะปล่อยให้การ์ดปัจจุบันไม่เปลี่ยนแปลง หากไม่สามารถเข้าถึงฟีดได้ Pushwoosh จะแสดงข้อผิดพลาดแทน

การแสดงตัวอย่างเทียบกับเวลาส่ง

การแสดงตัวอย่างบนพื้นที่ทำงานจะแสดงบทความที่ตรงกันในขณะนี้ ผู้รับจะได้รับข้อมูลที่ดึงมาใหม่ ณ เวลาส่ง โดยไม่ซ้ำกันตาม GUID ของแต่ละบทความในฟีด และจำกัดเฉพาะบทความที่เผยแพร่ในช่วง 30 วันที่ผ่านมา

หมายเหตุ

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

จัดสไตล์ตาราง

เมื่อคุณเลือกแหล่งข้อมูลแล้ว การตั้งค่าเหล่านี้จะควบคุมลักษณะของตารางและการ์ดของมัน ซึ่งจะยังคงเหมือนเดิมไม่ว่าคุณจะใช้แหล่งข้อมูลใด:

• Columns: เลือก 1, 2 หรือ 3 การ์ดต่อแถว บนมือถือ การ์ดจะเรียงซ้อนกันในคอลัมน์เดียวเสมอ
• Gap: เปิดเพื่อตั้งค่าช่องว่างระหว่างการ์ด ปิดจะใช้ค่าเริ่มต้น (16px)
• Summary limit: ขีดจำกัดตัวอักษรที่สรุปบทความจะถูกตัด เพื่อให้การ์ดมีขนาดที่สม่ำเสมอ
• Card template: เลือกเลย์เอาต์ จากนั้นตั้งค่า Card background, Card corner radius และ Content padding สำหรับทุกการ์ด สำหรับเลย์เอาต์ Left หรือ Right ให้เปิด Wrap text around image เพื่อให้หัวข้อและสรุปไหลรอบรูปภาพแทนที่จะอยู่ในคอลัมน์คงที่ Size & fit (Width, Height, Crop, Fit) ทำงานเช่นเดียวกับการปรับขนาดรูปภาพต่อเลย์เอาต์ของ บล็อกการ์ด โดยปรับขนาดตามความกว้างของการ์ด

การตั้งค่า Block style ด้านล่างจะจัดสไตล์บล็อกโดยรวม แยกจากการ์ดภายใน:

• Background และ Background image: ตั้งค่าสีพื้นหลังหรือรูปภาพพื้นหลังสำหรับทั้งตาราง เมื่อตั้งค่ารูปภาพ Fit จะเลือกว่าจะวางอย่างไรในบล็อก — Cover จะครอบตัดให้พอดีกับบล็อก, Contain จะพอดีกับรูปภาพทั้งหมดภายใน — และ Focal point / Set position จะวางตำแหน่ง Outlook Desktop จะแสดงเฉพาะสีพื้นหลังและไม่สนใจรูปภาพ ดังนั้นให้ใช้สีที่อ่านง่ายไว้ด้านหลัง
• Border color, Border width และ Corner radius: เพิ่มเส้นขอบและมุมโค้งมนรอบทั้งตาราง เปิด More options ใน Corner radius เพื่อตั้งค่าแต่ละมุมแยกกัน หรือปิดไว้เพื่อใช้รัศมีเดียวกันกับทั้งสี่มุม Gmail และ Apple Mail จะแสดงผล แต่ Outlook Desktop จะไม่สนใจและแสดงมุมเหลี่ยม เช่นเดียวกับที่ทำกับรูปภาพ
• Hide on mobile และ Hide on desktop: ซ่อนทั้งบล็อกบนอุปกรณ์หนึ่ง ดู แสดงหรือซ่อนเนื้อหาตามอุปกรณ์

หมายเหตุ

เช่นเดียวกับบล็อกอื่นๆ บล็อก News รองรับ เงื่อนไขการแสดงผล เพื่อแสดงเฉพาะกับกลุ่มผู้รับย่อย

ช่องโฆษณา

บล็อก Ad slot จะแสดงแคมเปญที่ได้รับการสนับสนุนแก่ผู้รับอีเมล เป็นตำแหน่งที่ต้องชำระเงินซึ่งผู้จัดการบัญชีของคุณขาย ไม่ใช่บล็อกที่คุณเติมด้วยครีเอทีฟของคุณเอง

หมายเหตุ

Ad slot ต้องเปิดใช้งานสำหรับบัญชีของคุณ หากไม่มีในแท็บ Blocks ของคุณ โปรดติดต่อฝ่ายสนับสนุนหรือผู้จัดการบัญชีของคุณ เมื่อเปิดใช้งานแล้ว ให้สร้างและจัดการแคมเปญที่สามารถแสดงได้จากหน้าจอ Ad inventory

เลือกบล็อกบนพื้นที่ทำงานเพื่อเปิดการตั้งค่าในแผงด้านขวา

• Campaign ID: ID ตัวเลขของแคมเปญโฆษณาที่จะแสดง ปล่อยไว้ที่ 0 เพื่อจับคู่กับแคมเปญที่ใช้งานอยู่ใดๆ แทน รายการ ad inventory จะไม่แสดง ID สำหรับแคมเปญ — คัดลอกหมายเลขจากแถบที่อยู่ของเบราว์เซอร์บนหน้าของแคมเปญเองหลังจากที่คุณบันทึกแล้ว
• Category: จำกัดการจับคู่กับแคมเปญที่ติดแท็กด้วยหมวดหมู่นี้ ตั้งค่าร่วมกับ Campaign ID เพื่อกำหนดให้ต้องมีทั้งสองอย่าง — โฆษณาจะแสดงก็ต่อเมื่อแคมเปญนั้นมีหมวดหมู่นี้ด้วย ปล่อย Campaign ID ไว้ที่ 0 เพื่อจับคู่กับแคมเปญที่ใช้งานอยู่ใดๆ ในหมวดหมู่นั้นแทน
• Label above the creative: บรรทัดสั้นๆ ที่แสดงเหนือโฆษณา เช่น “Sponsored” ปล่อยว่างไว้เพื่อไม่แสดงป้ายกำกับ
• When nothing is sold: เลือกว่าบล็อกจะแสดงอะไรหากไม่มีแคมเปญที่ตรงกัน Hide the slot (ค่าเริ่มต้น) จะไม่ทิ้งอะไรไว้แทนที่ Show my own copy จะเพิ่มส่วนที่สองภายในบล็อกเดียวกัน ซึ่งมีเครื่องหมาย “Shown when no campaign is running” ซึ่งคุณสามารถเขียนข้อความแทนและเพิ่มรูปภาพได้ ส่วนนั้นจะถูกส่งไปในอีเมลแทนโฆษณาเมื่อไม่มีแคมเปญที่ตรงกัน การปล่อยว่างไว้จะบันทึกเป็น Hide the slot — ข้อความแทนที่ว่างเปล่าจะไม่ถูกส่งเป็นบล็อกว่าง

พื้นที่ทำงานจะแสดง ID, หมวดหมู่ หรือป้ายกำกับที่คุณตั้งค่าเป็นตัวยึดตำแหน่ง — ไม่ใช่ครีเอทีฟโฆษณาจริง Pushwoosh จะเลือกแคมเปญที่ตรงกันหนึ่งครั้งเมื่ออีเมลเริ่มส่ง เพื่อให้ผู้รับทุกคนในการส่งนั้นเห็นโฆษณาเดียวกัน — ไม่มีการกำหนดเป้าหมายต่อผู้รับสำหรับแคมเปญที่จะแสดง และไม่มีการจำกัดความถี่ในรุ่นนี้

หมายเหตุ

เช่นเดียวกับบล็อกอื่นๆ บล็อก Ad slot รองรับ เงื่อนไขการแสดงผล เพื่อแสดงเฉพาะกับกลุ่มผู้รับย่อย ซึ่งแยกจากการจับคู่แคมเปญข้างต้น เงื่อนไขการแสดงผลจะควบคุมว่าใครจะเห็นบล็อกเลย ไม่ใช่ว่าแคมเปญใดจะแสดง

หมายเหตุ

การแสดงผลของ Ad slot ขึ้นอยู่กับบัญชีที่เป็นเจ้าของอีเมล ไม่ใช่เทมเพลต การทำซ้ำเทมเพลตจะไม่เปลี่ยนแปลงสิ่งนี้ — สำเนาที่ทำจากบัญชีที่ Ad slot ไม่ได้เปิดใช้งานจะไม่แสดงโฆษณาเช่นกัน หาก Ad slot เปิดใช้งานหรือปิดใช้งานสำหรับบัญชีของคุณหลังจากที่คุณสร้างอีเมลแล้ว การบันทึกอีกครั้งจะใช้การเปลี่ยนแปลงนั้น ปิดและบันทึก โฆษณาจะหยุดแสดง เปิดอีกครั้งและบันทึก โฆษณาจะกลับมาแสดง

บันทึกและนำบล็อกกลับมาใช้ใหม่

บันทึกบล็อกเพื่อนำกลับมาใช้ใหม่ในอีเมลนี้หรืออีเมลอื่นแทนที่จะสร้างใหม่ทุกครั้ง

1. คลิกที่บล็อก (กรอบหรือพื้นหลัง ไม่ใช่ข้อความหรือปุ่มภายใน) เพื่อเลือก Card, Columns และ Social เป็นตัวอย่างของบล็อกที่ทำงานในลักษณะนี้

เคล็ดลับ

หากต้องการบันทึกหลายบล็อกพร้อมกัน ให้กด Shift ค้างไว้แล้วคลิกบล็อกพี่น้องเพิ่มเติมบนพื้นที่ทำงานหรือใน Layers panel เพื่อขยายการเลือกไปยังช่วงที่ต่อเนื่องกัน การบันทึกจะไม่ถูกเสนอสำหรับช่วงที่มีบล็อกที่ซิงค์แล้วหรือตัวยึดตำแหน่ง AI ที่ว่างเปล่า

2. คลิกไอคอนบุ๊กมาร์กในแถบเครื่องมือของบล็อกและตั้งชื่อ

บล็อกที่บันทึกไว้จะปรากฏใต้ Saved blocks ที่ด้านล่างของแท็บ Blocks

• ลากบล็อกที่บันทึกไว้ไปยังพื้นที่ทำงาน หรือคลิกเพื่อเพิ่มไว้ที่ท้ายอีเมล
• คลิก × บนไทล์ของบล็อกที่บันทึกไว้เพื่อลบ

ทำให้สำเนาซิงค์กัน

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

การบันทึกช่วงของบล็อกก็ทำงานในลักษณะเดียวกัน แก้ไขบล็อกใดๆ ภายในนั้น จากนั้นใช้การเปลี่ยนแปลงเพื่ออัปเดตทุกสำเนาทุกที่ที่ใช้

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

• Edit synced block: ปลดล็อกสำเนานี้เพื่อให้คุณสามารถเปลี่ยนแปลงได้ แบนเนอร์จะปรากฏที่ด้านบน คลิก Apply to all เพื่อบันทึกการเปลี่ยนแปลงของคุณไปยังแหล่งข้อมูลและสำเนาอื่นๆ ทั้งหมด หรือ Cancel เพื่อยกเลิก คุณสามารถปลดล็อกบล็อกที่ซิงค์ได้ครั้งละหนึ่งบล็อกเท่านั้น
• Update from source: แทนที่สำเนานี้ด้วยเวอร์ชันล่าสุดจากแหล่งข้อมูล
• Detach from source: ยกเลิกการเชื่อมโยงสำเนานี้จากแหล่งข้อมูลเพื่อให้คุณสามารถแก้ไขได้ด้วยตนเอง

ในขณะที่บล็อกที่ซิงค์ถูกปลดล็อกเพื่อแก้ไข ส่วนที่เหลือของอีเมลจะถูกล็อก: คุณไม่สามารถเลือก, แก้ไข หรือลบสิ่งอื่นใดได้ และ Save จะถูกปิดใช้งานจนกว่าคุณจะเสร็จสิ้น คลิก Apply to all เพื่อบันทึกการเปลี่ยนแปลงของคุณทุกที่ หรือ Cancel เพื่อยกเลิกและปลดล็อกส่วนที่เหลือของอีเมลอีกครั้ง

หมายเหตุ

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

เพิ่มลิงก์

ใช้กล่องโต้ตอบ Insert/Edit Link เพื่อตั้งค่าว่าจะเกิดอะไรขึ้นเมื่อผู้รับคลิกปุ่มหรือข้อความที่เลือก เลือก Action type จากนั้นกรอกข้อมูลในช่องสำหรับการกระทำนั้น

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

เปิดลิงก์เมื่อผู้รับคลิก ป้อนที่อยู่ใน URL

ลิงก์จัดการการตั้งค่า

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

ลิงก์ยกเลิกการสมัครรับข่าวสาร

ให้ผู้รับสามารถเลือกไม่รับข่าวสารตามกฎระเบียบและความต้องการของตนเอง

เคล็ดลับ

คุณยังสามารถเพิ่มลิงก์ยกเลิกการสมัครรับข่าวสารในบล็อก HTML ได้:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

ตัวยึดตำแหน่ง %%PW_EMAIL_UNSUBSCRIBE%% จะถูกแทนที่ด้วย URL ยกเลิกการสมัครรับข่าวสารของ Pushwoosh เมื่ออีเมลถูกส่ง

จะเกิดอะไรขึ้นเมื่อผู้รับคลิกลิงก์ยกเลิกการสมัครรับข่าวสาร

หากศูนย์การตั้งค่าการสมัครรับข่าวสารเปิดใช้งาน

ผู้รับจะถูกยกเลิกการสมัครรับข่าวสารเฉพาะจากหมวดหมู่ที่กำหนดให้กับอีเมลนั้น (เช่น Newsletter) ชื่อหมวดหมู่จะถูกลบออกจากแท็ก Subscribed Email Categories ของพวกเขา

หน้าจอยืนยันจะปรากฏขึ้นพร้อมตัวเลือก Resubscribe และ Manage preferences เรียนรู้เพิ่มเติม

หากศูนย์การตั้งค่าการสมัครรับข่าวสารไม่ได้เปิดใช้งาน

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

สำคัญ

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

หากต้องการส่งข้อความถึงผู้รับที่มีส่วนร่วมต่อไป ให้สร้าง segment ที่กรองโดย Unsubscribed Emails = false เพื่อหลีกเลี่ยงการร้องเรียน อย่าส่งอีเมลถึงผู้รับที่ยกเลิกการสมัครรับข่าวสารแล้ว

การคลิกจะถูกนับในอัตราการยกเลิกการสมัครรับข่าวสารใน Message History

ลิงก์เวอร์ชันเว็บ

ให้ผู้รับสามารถเข้าถึงอีเมลเวอร์ชันเว็บได้ ซึ่งมีประโยชน์หากพวกเขามีปัญหาในการดูในกล่องจดหมาย

ไม่ติดตามสถิติ

เปิดลิงก์เมื่อผู้รับคลิก โดยไม่นับการคลิกนั้นในสถิติการคลิกของอีเมลของคุณ ป้อนที่อยู่ใน URL

ลิงก์ยืนยันแบบฟอร์มการสมัครรับข่าวสาร

แทรกลิงก์ยืนยันสำหรับการส่งแบบฟอร์มการสมัครรับข่าวสาร (เช่น เพื่อยืนยันการเลือกรับแบบ double opt-in) เรียนรู้เพิ่มเติมเกี่ยวกับ double opt-in