# เครื่องมือแก้ไขโค้ด HTML

<YouTube id="DryThwJHYxk" params="start=258&end=355" playlabel="วิดีโอ Youtube: สร้างเนื้อหาอีเมลของคุณตั้งแต่ต้นด้วย HTML"/>

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

<Aside type="note">
ไม่มีทักษะการเขียนโค้ดใช่ไหม? ใช้เครื่องมือแก้ไขแบบ Drag & drop เพื่อสร้างเนื้อหาอีเมลได้อย่างง่ายดาย ไม่จำเป็นต้องมีทักษะการเขียนโค้ด [เรียนรู้เพิ่มเติม](/th/product/content/email-content/drag-and-drop-email-editor)
</Aside>

<Aside type="caution" title="สำคัญ">
ก่อนที่คุณจะเริ่มสร้างเนื้อหาอีเมล สิ่งสำคัญคือต้องตั้งค่าอีเมลของคุณอย่างถูกต้องภายในเครื่องมือแก้ไขอีเมลที่คุณเลือก ซึ่งรวมถึงการกำหนดค่าภาษา การระบุหัวเรื่อง การให้ข้อมูลผู้ส่ง และอื่นๆ [เรียนรู้วิธีการทำ](/th/product/content/email-content/drag-and-drop-email-editor/set-up-your-email-in-the-editor)
</Aside>


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

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

<video src="/emails-html-code-editor-1.webm" title="อินเทอร์เฟซเครื่องมือแก้ไขโค้ด HTML ที่แสดงตัวอย่างอีเมลแบบเรียลไทม์ขณะพิมพ์โค้ด" autoplay loop muted playsinline />

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

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

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

<img src="/emails-html-code-editor-2.webp" alt="อินเทอร์เฟซการแทรก custom tag ที่แสดงตัวเลือก Tag และค่าเริ่มต้น"/>

หากต้องการรวมอีโมจิในอีเมลของคุณ ให้คลิกไอคอน **Emoji** ที่ด้านล่างของเครื่องมือแก้ไข

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

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

หากต้องการใช้รูปภาพซ้ำจาก [Media store](/th/product/content/media-store/) ของคุณ ให้คัดลอก URL ของรูปภาพจากที่นั่นแล้ววางลงในแอตทริบิวต์ `src` ดู [คัดลอก URL ของรูปภาพ](/th/product/content/media-store/#copy-an-image-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)

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

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

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

```json
{
  "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 Tab** ของเครื่องมือแก้ไขแล้ว ให้รวมเข้ากับเนื้อหา HTML ของคุณโดยใช้ placeholders ตัว placeholders จะแทรกข้อความที่แปลแล้วลงในเนื้อหาของคุณแบบไดนามิกตามความต้องการทางภาษาของผู้ใช้ นี่คือวิธีการนำไปใช้ใน HTML ของคุณ

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

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

```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>
```

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

<video src="/emails-html-code-editor-3.webm" title="การสาธิต Localization ที่แสดงเนื้อหาอีเมลในภาษาต่างๆ" autoplay loop muted playsinline />

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

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

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

### ไวยากรณ์ (Syntax)

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

```
{% email_content "AAAAA-BBBBB" %}
```

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

<img src="/emails-html-code-editor-4.webp" alt="การแสดง ID เนื้อหาอีเมลที่แสดงชื่อเนื้อหาและตัวระบุที่ไม่ซ้ำกัน"/>

<Aside type="caution" title="สำคัญ">
* คุณสามารถแทรกเนื้อหาแบบเรียกซ้ำได้ ซึ่งหมายความว่าบล็อกเนื้อหาหนึ่งสามารถรวมอีกบล็อกหนึ่งได้ลึกสุด 3 ระดับ ตัวอย่างเช่น:
  * **เนื้อหา A** สามารถแทรก **เนื้อหา B** ได้
  * **เนื้อหา B** สามารถแทรก **เนื้อหา C** ได้
  * อย่างไรก็ตาม **เนื้อหา C** ไม่สามารถแทรกบล็อกอื่นได้อีก
* **การแทรกแบบวนซ้ำ** (เช่น เมื่อ **เนื้อหา A** แทรก **เนื้อหา B** และ **เนื้อหา B** พยายามแทรก **เนื้อหา A**) ไม่ได้รับอนุญาตและจะส่งผลให้เกิดข้อผิดพลาด
</Aside>  

**ตัวอย่าง**

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

* **เนื้อหาส่วนหัว** (ID: "AAAAA-BBBBB") พร้อมดีไซน์ส่วนหัวที่กำหนดไว้ล่วงหน้า
* **เนื้อหาจดหมายข่าว** ที่คุณต้องการรวมส่วนหัวเข้าไป

ในการแทรกส่วนหัวลงในจดหมายข่าว คุณจะใช้สิ่งต่อไปนี้:

```

{% email_content "AAAAA-BBBBB" %}
```

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


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

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

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

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

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

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

- เมื่อเปิดใช้งานศูนย์การตั้งค่าการสมัครรับข้อมูล ผู้รับจะถูกยกเลิกการสมัครเฉพาะจากหมวดหมู่ที่กำหนดให้กับอีเมลนั้น (เช่น *จดหมายข่าว*) หน้าจอยืนยันจะปรากฏขึ้นซึ่งพวกเขาสามารถ **สมัครรับข้อมูลอีกครั้ง** ในหมวดหมู่นั้นหรือ **จัดการการตั้งค่า** เพื่อปรับหมวดหมู่อีเมลทั้งหมด [เรียนรู้เพิ่มเติม](/th/product/messaging-channels/emails/email-preferences/#default-behavior-unsubscribe-from-a-category)

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

การคลิกจะถูกนับในอัตราการยกเลิกการสมัครสำหรับข้อความนั้นใน [Message History](/th/product/statistics-and-analytics/message-history)

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

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

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

<Aside type="note">
เพื่อให้คุณสามารถส่งอีเมลที่สำคัญไปยังลูกค้าของคุณได้ เราจะไม่ลบผู้ใช้ที่ยกเลิกการสมัครออกจากฐานผู้ใช้ของคุณ สำหรับผู้ใช้ที่เลือกไม่รับทั้งหมด (เช่น ผ่านลิงก์ยกเลิกการสมัครเริ่มต้นเมื่อไม่ได้เปิดใช้งานศูนย์การตั้งค่า หรือผ่านลิงก์ยกเลิกการสมัครจากทั้งหมด) แท็กเริ่มต้น [**Unsubscribed Emails**](/th/product/audience-data-and-segmentation/user-data-tags) จะถูกตั้งค่าเป็น 'true'

พิจารณาสร้าง [segment](/th/product/audience-data-and-segmentation/segmentation/) ของผู้ใช้ที่ไม่ได้ยกเลิกการสมัคร (ค่าแท็ก 'false') เพื่อส่งข้อความถึงพวกเขาต่อไป เพื่อหลีกเลี่ยงการร้องเรียน อย่าส่งอีเมลถึงผู้ใช้ที่ยกเลิกการสมัครแล้ว
</Aside>

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

เพิ่มลิงก์โดยตรงไปยัง [ศูนย์การตั้งค่า](/th/product/messaging-channels/emails/email-preferences/#optional-setup-full-preference-center) ที่ผู้ใช้สามารถจัดการหมวดหมู่ที่พวกเขาได้รับ:

```
<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>
```
[เรียนรู้ว่าศูนย์การตั้งค่าทำงานอย่างไร](/th/product/messaging-channels/emails/email-preferences/#how-to-let-users-unsubscribe-from-a-category-or-manage-preferences)

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

<img src="/emails-html-code-editor-6.webp" alt="ตัวอย่างส่วนท้ายอีเมลที่มีลิงก์ยกเลิกการสมัครทั้งสามประเภท: Unsubscribe, Manage preferences, Unsubscribe from all emails"/>

<Aside type="caution">
หากคุณใช้ลิงก์ยกเลิกการสมัครของคุณเองแทนตัวแปรของ Pushwoosh ผู้ใช้ที่เลือกไม่รับผ่านลิงก์ของคุณจะไม่ถูกรวมอยู่ในอัตราการยกเลิกการสมัครใน [Message History](/th/product/statistics-and-analytics/message-history) เฉพาะผู้ใช้ที่ติดตามลิงก์ของ Pushwoosh เท่านั้นที่จะถูกนับในสถิติสำหรับอีเมลนั้น
</Aside>

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

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

<img src="/emails-html-code-editor-5.webp" alt="กล่องโต้ตอบบันทึกเนื้อหาอีเมลที่แสดงช่องชื่อและป้ายกำกับ"/>

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

หากคุณยังไม่ได้ [ตั้งค่ารายละเอียดผู้ส่ง](/th/product/content/email-content/drag-and-drop-email-editor/set-up-your-email-in-the-editor) อย่าลืมทำด้วย จากนั้นคลิก **Save**

ตอนนี้เนื้อหาอีเมลของคุณพร้อมแล้ว สามารถใช้ในแคมเปญอีเมลได้ [เรียนรู้เพิ่มเติม](/th/product/messaging-channels/emails/sending-emails)

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

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

<Aside type="note">
หากยังไม่เสร็จสิ้น **KYC (Know Your Customer)** คุณยังสามารถส่งอีเมลทดสอบได้โดยการยืนยันที่อยู่อีเมลทดสอบ ในการทำเช่นนี้ ไปที่ส่วน [Test Devices](/th/developer/first-steps/test-your-integration/test-devices/) เพิ่มที่อยู่อีเมลที่คุณต้องการใช้สำหรับการทดสอบ และทำตามขั้นตอนการยืนยันให้เสร็จสิ้น
</Aside>

ในการส่งอีเมลทดสอบ ให้คลิก **Test email** ในเครื่องมือแก้ไขอีเมล

<img src="/shared-14.webp" alt="ปุ่ม Test email ในอินเทอร์เฟซเครื่องมือแก้ไขอีเมล"/>

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

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

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

<img src="/shared-50.webp" alt="ดรอปดาวน์การเลือกที่อยู่อีเมลทดสอบที่ตรวจสอบแล้ว"/>

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

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

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

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

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

<img src="/shared-34.webp" alt="กล่องโต้ตอบยืนยันการส่งอีเมลทดสอบพร้อมช่องข้อมูลตัวอย่าง"/>