ข้ามไปยังเนื้อหา
เอกสารสำหรับนักพัฒนาการสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

สร้างเนื้อหาอีเมลด้วย HTML code editor

วิดีโอ Youtube: สร้างเนื้อหาอีเมลของคุณตั้งแต่ต้นด้วย HTML

หากคุณมีความเชี่ยวชาญใน HTML และต้องการเขียนโค้ดของคุณเอง คุณสามารถสร้างอีเมลโดยใช้ Pushwoosh HTML code editor

สร้างเนื้อหาอีเมล

Anchor link to

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

หรือคุณสามารถอัปโหลดไฟล์ HTML โดยคลิกที่ Upload HTML File ที่อยู่ด้านล่าง

หากต้องการเพิ่มความเป็นส่วนตัวให้กับอีเมลของคุณ ให้ใช้ custom tags โดยทำดังนี้:

  1. คลิกที่ไอคอน Tag ที่อยู่ด้านล่างของ editor
  2. เลือก Tag ที่ต้องการ และ modifier ของมัน และระบุค่าเริ่มต้นหากจำเป็น
  3. คลิก Insert เพื่อรวม custom tag เข้าไปในเนื้อหาอีเมลของคุณ
อินเทอร์เฟซการแทรก custom tag แสดงการเลือก tag และตัวเลือกค่าเริ่มต้น

หากต้องการใส่อีโมจิในอีเมลของคุณ ให้คลิกไอคอน Emoji ที่อยู่ด้านล่างของ editor

เพิ่มรูปภาพ

Anchor link to

หากต้องการเพิ่มรูปภาพในอีเมลของคุณ ให้ใส่แท็ก <img> ใน HTML ของคุณและตั้งค่าแอตทริบิวต์ src เป็น URL ของรูปภาพ

หากต้องการใช้รูปภาพซ้ำจาก Media store ของคุณ ให้คัดลอก URL จากที่นั่นแล้ววางลงในแอตทริบิวต์ src ดูขั้นตอนได้ที่ คัดลอก URL ของรูปภาพ

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

แทนที่ YOUR-MEDIA-STORE-URL ด้วย URL ที่คุณคัดลอกมาจาก Media store

ใช้ localization

Anchor link to

Localization ช่วยให้คุณสามารถมอบประสบการณ์ที่เป็นส่วนตัวให้กับผู้ใช้ในภาษาต่างๆ

ใน HTML code editor คุณสามารถใช้ localization โดยการกำหนดภาษาเริ่มต้นและเพิ่มตัวเลือกภาษาหลายภาษา ตัวอย่างเช่น คุณสามารถตั้งค่าข้อความเริ่มต้นเป็นภาษาอังกฤษแล้วเพิ่มคำแปลเป็นภาษาเยอรมันและสเปน วิธีนี้จะช่วยให้เนื้อหาอีเมลของคุณปรับให้เข้ากับความต้องการทางภาษาของผู้ใช้แต่ละคน

ด้านล่างนี้คือตัวอย่างของวิธีการจัดโครงสร้างข้อมูล localization ของคุณ ตัวอย่างนี้ใช้ภาษาอังกฤษเป็นภาษาเริ่มต้นและมีคำแปลเป็นภาษาเยอรมันและสเปน

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

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

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>


  </div>
</body>
</html>

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

แทรกและรวมบล็อกเนื้อหาอีเมล

Anchor link to

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

ตัวอย่างเช่น หากคุณมี เนื้อหาอีเมล A (header) และ เนื้อหาอีเมล B (จดหมายข่าว) คุณสามารถแทรก เนื้อหาอีเมล A ลงใน เนื้อหาอีเมล B ได้โดยไม่ต้องคัดลอกเนื้อหาด้วยตนเองทุกครั้ง

ไวยากรณ์

Anchor link to

ในการแทรกเนื้อหาชิ้นหนึ่งเข้าไปในอีกชิ้นหนึ่ง ให้ใช้ไวยากรณ์ต่อไปนี้:

{% email_content "AAAAA-BBBBB" %}

โดยที่ “AAAAA-BBBBB” คือ ID ของเนื้อหาอีเมลที่คุณต้องการแทรก คุณสามารถหา ID ได้ที่ใต้ชื่อเนื้อหาในรายการเนื้อหาอีเมลของคุณ

การแสดง ID เนื้อหาอีเมล แสดงชื่อเนื้อหาและตัวระบุที่ไม่ซ้ำกัน

ตัวอย่าง

สมมติว่าคุณมีเนื้อหาสองชิ้น:

  • เนื้อหา Header (ID: “AAAAA-BBBBB”) ที่มีการออกแบบ header ที่กำหนดไว้ล่วงหน้า
  • เนื้อหาจดหมายข่าว ที่คุณต้องการรวม header เข้าไปด้วย

ในการแทรก header ลงในจดหมายข่าว คุณจะใช้ดังนี้:

{% email_content "AAAAA-BBBBB" %}

วิธีนี้ช่วยให้คุณสามารถนำ header ที่กำหนดไว้ล่วงหน้ากลับมาใช้ซ้ำในแคมเปญอีเมลต่างๆ ได้อย่างง่ายดาย ซึ่งช่วยประหยัดเวลาและรับประกันความสอดคล้องกันในอีเมลของคุณ

เพิ่มลิงก์ยกเลิกการสมัคร

Anchor link to

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

ลิงก์ยกเลิกการสมัคร

Anchor link to

เพิ่มลิงก์นี้เพื่อให้ผู้ใช้สามารถเลือกไม่รับข้อความที่พวกเขาได้รับ:

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

ตัวแปรจะถูกแทนที่ด้วย URL ยกเลิกการสมัครของ Pushwoosh เมื่อคุณส่งอีเมล

  • เมื่อเปิดใช้งานศูนย์การตั้งค่าการสมัครรับข้อมูล ผู้รับจะถูกยกเลิกการสมัครเฉพาะจากหมวดหมู่ที่กำหนดให้กับอีเมลนั้น (เช่น จดหมายข่าว) หน้าจอยืนยันจะปรากฏขึ้นซึ่งพวกเขาสามารถ สมัครรับข้อมูลอีกครั้ง ในหมวดหมู่นั้นหรือ จัดการการตั้งค่า เพื่อปรับหมวดหมู่อีเมลทั้งหมด เรียนรู้เพิ่มเติม

  • เมื่อไม่ได้เปิดใช้งานศูนย์การตั้งค่าการสมัครรับข้อมูล ผู้รับจะยกเลิกการสมัครจากอีเมลการตลาดทั้งหมด

การคลิกจะถูกนับในอัตราการยกเลิกการสมัครสำหรับข้อความนั้นใน ประวัติข้อความ

ยกเลิกการสมัครจากทุกหมวดหมู่

Anchor link to

เพิ่มลิงก์ที่ยกเลิกการสมัครของผู้ใช้จากทุกหมวดหมู่อีเมลในครั้งเดียว:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>

ลิงก์ศูนย์การตั้งค่า

Anchor link to

เพิ่มลิงก์โดยตรงไปยัง ศูนย์การตั้งค่า ที่ผู้ใช้สามารถจัดการหมวดหมู่ที่พวกเขาได้รับ:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>

เรียนรู้ว่าศูนย์การตั้งค่าทำงานอย่างไร

ภาพหน้าจอด้านล่างแสดงส่วนท้ายของอีเมลที่ใช้ลิงก์ทั้งสามประเภท

ตัวอย่างส่วนท้ายของอีเมลที่มีลิงก์ยกเลิกการสมัครทั้งสามประเภท: ยกเลิกการสมัคร, จัดการการตั้งค่า, ยกเลิกการสมัครจากอีเมลทั้งหมด

บันทึกเนื้อหาอีเมล

Anchor link to

หลังจากที่คุณสร้างอีเมลเสร็จแล้ว ให้คลิกที่ปุ่ม Save ที่อยู่ด้านบนของ editor

กล่องโต้ตอบบันทึกเนื้อหาอีเมล แสดงช่องชื่อและป้ายกำกับ

ในหน้าต่างใหม่ที่ปรากฏขึ้น ให้ตั้งชื่ออีเมลของคุณให้ชัดเจน ซึ่งอาจเป็นชื่อเดียวกับหัวเรื่องของคุณก็ได้ นอกจากนี้ ให้สร้างป้ายกำกับเพื่อช่วยให้คุณค้นหาอีเมลในรายการของคุณได้ง่ายขึ้น

หากคุณยังไม่ได้ ตั้งค่ารายละเอียดผู้ส่ง อย่าลืมทำด้วย จากนั้นคลิก Save

ตอนนี้เนื้อหาอีเมลของคุณพร้อมแล้ว สามารถนำไปใช้ในแคมเปญอีเมลได้ เรียนรู้เพิ่มเติม

ส่งอีเมลทดสอบ

Anchor link to

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

ในการส่งอีเมลทดสอบ ให้คลิก Test email ใน email editor

ปุ่ม Test email ในอินเทอร์เฟซ email editor

ในหน้าต่างที่เปิดขึ้น:

  1. ในช่อง Email address ให้ป้อนที่อยู่อีเมลที่คุณต้องการรับอีเมลทดสอบ

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

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

ตัวอย่างเช่น:

  • Age (integer): ป้อนตัวเลขเพื่อแทนที่ placeholder อายุ (เช่น 21)
  • FirstName (string): ป้อนชื่อตัวอย่าง (เช่น David)

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

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