# إنشاء محتوى البريد الإلكتروني باستخدام محرر كود HTML

<YouTube id="DryThwJHYxk" params="start=258&end=355" playlabel="فيديو يوتيوب: أنشئ محتوى بريدك الإلكتروني من الصفر باستخدام HTML"/>

إذا كنت متقنًا للغة HTML وتفضل كتابة الكود الخاص بك، يمكنك إنشاء رسائل بريد إلكتروني باستخدام محرر كود HTML من Pushwoosh.

<Aside type="note">
ليس لديك مهارات في البرمجة؟ استخدم محرر السحب والإفلات لإنشاء محتوى البريد الإلكتروني بسهولة. لا يتطلب أي مهارات برمجية. [اعرف المزيد](/ar/product/content/email-content/drag-and-drop-email-editor)
</Aside>

<Aside type="caution" title="Important">
قبل البدء في إنشاء محتوى البريد الإلكتروني، من الضروري إعداد بريدك الإلكتروني بشكل صحيح داخل محرر البريد الإلكتروني الذي تختاره. يتضمن ذلك تكوين اللغات، وتحديد سطر الموضوع، وتوفير معلومات المرسل، والمزيد. [تعلم كيفية القيام بذلك](/ar/product/content/email-content/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** الموجود في اللوحة السفلية.

لإضافة لمسة شخصية إلى رسائل البريد الإلكتروني الخاصة بك، استخدم العلامات المخصصة. للقيام بذلك:

1. انقر على أيقونة **Tag** الموجودة في أسفل المحرر.
2. حدد العلامة (Tag) المطلوبة، والمعدّل الخاص بها، وقدم قيمة افتراضية إذا لزم الأمر.
3. انقر على **Insert** لتضمين العلامة المخصصة في محتوى بريدك الإلكتروني.

<img src="/emails-html-code-editor-2.webp" alt="واجهة إدراج علامة مخصصة تعرض خيارات تحديد العلامة والقيمة الافتراضية"/>

لتضمين رمز تعبيري في بريدك الإلكتروني، انقر على أيقونة **Emoji** الموجودة في أسفل المحرر.

### إضافة الصور

لإضافة صورة إلى بريدك الإلكتروني، قم بتضمين علامة `<img>` في HTML الخاص بك وقم بتعيين السمة `src` إلى عنوان URL للصورة.

لإعادة استخدام صورة من [متجر الوسائط](/ar/product/content/media-store/) الخاص بك، انسخ عنوان URL الخاص بها من هناك والصقه في السمة `src`. راجع [نسخ عنوان URL للصورة](/ar/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 الذي نسخته من متجر الوسائط.

## استخدام الترجمة (Localization)

تمكنك الترجمة (Localization) من تقديم تجارب مخصصة للمستخدمين بلغات مختلفة.

في محرر كود HTML، يمكنك استخدام الترجمة عن طريق تحديد لغة افتراضية وإضافة خيارات لغات متعددة. على سبيل المثال، يمكنك تعيين رسالة افتراضية باللغة الإنجليزية ثم تضمين ترجمات بالألمانية والإسبانية. هذا يضمن أن محتوى بريدك الإلكتروني يتكيف مع تفضيلات لغة كل مستخدم.

فيما يلي مثال على كيفية هيكلة بيانات الترجمة الخاصة بك. يستخدم هذا المثال اللغة الإنجليزية كلغة افتراضية وترجمات ألمانية وإسبانية.

```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 Tab)** في المحرر، قم بدمجها في محتوى HTML الخاص بك باستخدام العناصر النائبة (placeholders). تقوم العناصر النائبة بإدراج النص المترجم ديناميكيًا في المحتوى الخاص بك، بناءً على تفضيلات لغة المستخدم. إليك كيفية تنفيذ ذلك في HTML الخاص بك

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

خذ هذا السيناريو بعين الاعتبار: أنت تعلن عن خصم لفترة محدودة على خلطات القهوة. باستخدام هيكل الترجمة المذكور أعلاه، يمكنك توصيل رسالتك الترويجية بفعالية للمستخدمين الذين يتحدثون لغات مختلفة. قد يبدو كود 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="عرض توضيحي للترجمة يظهر محتوى البريد الإلكتروني بلغات مختلفة" autoplay loop muted playsinline />

## إدراج ودمج كتل محتوى البريد الإلكتروني

يسمح لك Pushwoosh بدمج محتوى البريد الإلكتروني عن طريق إدراج قطعة من محتوى البريد الإلكتروني في أخرى. هذا يسهل إعادة استخدام عناصر مثل الترويسات (headers) والتذييلات (footers) أو كتل محتوى محددة عبر رسائل بريد إلكتروني مختلفة.

على سبيل المثال، إذا كان لديك **محتوى البريد الإلكتروني أ** (ترويسة) و**محتوى البريد الإلكتروني ب** (نشرة إخبارية)، يمكنك إدراج **محتوى البريد الإلكتروني أ** في **محتوى البريد الإلكتروني ب** دون نسخ المحتوى يدويًا في كل مرة.

### الصيغة (Syntax)

لإدراج قطعة من المحتوى في أخرى، استخدم الصيغة التالية:

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

حيث "AAAAA-BBBBB" هو معرف (ID) محتوى البريد الإلكتروني الذي تريد إدراجه. يمكنك العثور على المعرف أسفل اسم المحتوى في قائمة محتوى البريد الإلكتروني الخاصة بك.

<img src="/emails-html-code-editor-4.webp" alt="عرض معرف محتوى البريد الإلكتروني يظهر اسم المحتوى والمعرف الفريد"/>

<Aside type="caution" title="Important">
* يمكنك إدراج المحتوى بشكل متكرر (recursively)، مما يعني أن كتلة محتوى واحدة يمكن أن تتضمن أخرى، حتى عمق أقصى يبلغ 3 مستويات. على سبيل المثال:
  * **المحتوى أ** يمكنه إدراج **المحتوى ب**.
  * **المحتوى ب** يمكنه إدراج **المحتوى ج**.
  * ومع ذلك، لا يمكن لـ **المحتوى ج** إدراج كتلة أخرى.
* **الإدراجات الدورية** (على سبيل المثال، حيث يقوم **المحتوى أ** بإدراج **المحتوى ب** ويحاول **المحتوى ب** إدراج **المحتوى أ**) غير مسموح بها وستؤدي إلى خطأ.
</Aside>  

**مثال**

لنفترض أن لديك قطعتين من المحتوى:

* **محتوى الترويسة** (المعرف: "AAAAA-BBBBB") بتصميم ترويسة محدد مسبقًا.
* **محتوى النشرة الإخبارية**، حيث تريد تضمين الترويسة.

لإدراج الترويسة في النشرة الإخبارية، ستستخدم ما يلي:

```

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

هذا يسمح لك بإعادة استخدام ترويسة محددة مسبقًا بسهولة في حملات بريد إلكتروني متعددة. إنه يوفر الوقت ويضمن الاتساق عبر رسائل البريد الإلكتروني الخاصة بك.


## إضافة رابط إلغاء الاشتراك

قم بتضمين رابط إلغاء الاشتراك في بريدك الإلكتروني حتى يتمكن المستلمون من إلغاء الاشتراك بما يتماشى مع اللوائح وتفضيلاتهم. يوفر Pushwoosh ثلاثة متغيرات يمكنك استخدامها في HTML الخاص بك.

### رابط إلغاء الاشتراك 

أضف هذا الرابط حتى يتمكن المستخدمون من إلغاء الاشتراك من الرسالة التي تلقوها:

```
<a href=%%PW_EMAIL_UNSUBSCRIBE%%> إلغاء الاشتراك </a>
```

يتم استبدال المتغير بعنوان URL لإلغاء الاشتراك الخاص بـ Pushwoosh عند إرسال البريد الإلكتروني.

- عند تمكين مركز تفضيلات الاشتراك، يتم إلغاء اشتراك المستلمين فقط من الفئة المخصصة لهذا البريد الإلكتروني (على سبيل المثال، *النشرة الإخبارية*). تظهر شاشة تأكيد حيث يمكنهم **إعادة الاشتراك** في تلك الفئة أو **إدارة التفضيلات** لضبط جميع فئات البريد الإلكتروني. [اعرف المزيد](/ar/product/messaging-channels/emails/email-preferences/#default-behavior-unsubscribe-from-a-category)

- عند عدم تمكين مركز تفضيلات الاشتراك، يقوم المستلمون بإلغاء الاشتراك من جميع رسائل البريد الإلكتروني التسويقية.

يتم احتساب النقرات في معدل إلغاء الاشتراك لتلك الرسالة في [سجل الرسائل (Message History)](/ar/product/statistics-and-analytics/message-history).

### إلغاء الاشتراك من جميع الفئات 

أضف رابطًا يلغي اشتراك المستخدم من جميع فئات البريد الإلكتروني مرة واحدة:

```
<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> إلغاء الاشتراك من جميع رسائل البريد الإلكتروني </a>
```

<Aside type="note">
للسماح لك بتسليم رسائل البريد الإلكتروني المهمة لعملائك، نحن لا نحذف المستخدمين الذين ألغوا اشتراكهم من قاعدة المستخدمين الخاصة بك. بالنسبة للمستخدمين الذين ألغوا الاشتراك بالكامل (على سبيل المثال، عبر رابط إلغاء الاشتراك الافتراضي عند عدم تمكين مركز التفضيلات، أو عبر رابط إلغاء الاشتراك من الكل)، يتم تعيين [علامة **Unsubscribed Emails** الافتراضية](/ar/product/audience-data-and-segmentation/user-data-tags) إلى 'true'. 

فكر في إنشاء [شريحة (segment)](/ar/product/audience-data-and-segmentation/segmentation/) من المستخدمين الذين لم يلغوا اشتراكهم (قيمة العلامة 'false') لمواصلة مراسلتهم. لتجنب الشكاوى، لا ترسل بريدًا إلكترونيًا للمستخدمين الذين ألغوا اشتراكهم.
</Aside>

### رابط مركز التفضيلات 

أضف رابطًا مباشرًا إلى [مركز التفضيلات](/ar/product/messaging-channels/emails/email-preferences/#optional-setup-full-preference-center) حيث يدير المستخدمون الفئات التي يتلقونها:

```
<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> إدارة التفضيلات </a>
```
[تعرف على كيفية عمل مركز التفضيلات](/ar/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="مثال على تذييل بريد إلكتروني مع روابط إلغاء الاشتراك الثلاثة: إلغاء الاشتراك، إدارة التفضيلات، إلغاء الاشتراك من جميع رسائل البريد الإلكتروني"/>

<Aside type="caution">
إذا كنت تستخدم رابط إلغاء الاشتراك الخاص بك بدلاً من متغيرات Pushwoosh، فلن يتم تضمين المستخدمين الذين يلغون الاشتراك عبر الرابط الخاص بك في معدل إلغاء الاشتراك في [سجل الرسائل (Message History)](/ar/product/statistics-and-analytics/message-history). يتم احتساب المستخدمين الذين اتبعوا رابط Pushwoosh فقط في إحصائيات ذلك البريد الإلكتروني.
</Aside>

## حفظ محتوى البريد الإلكتروني

بعد الانتهاء من إنشاء بريدك الإلكتروني، انقر على زر **Save** الموجود في الجزء العلوي من المحرر.

<img src="/emails-html-code-editor-5.webp" alt="مربع حوار حفظ محتوى البريد الإلكتروني يظهر حقلي الاسم والتصنيف"/>

في النافذة الجديدة التي تظهر، أعطِ بريدك الإلكتروني اسمًا واضحًا، والذي يمكن أن يكون هو نفسه سطر الموضوع. أيضًا، أنشئ تصنيفًا لمساعدتك في العثور عليه بسهولة في قائمة رسائل البريد الإلكتروني الخاصة بك.

إذا لم تكن قد [قمت بإعداد تفاصيل المرسل](/ar/product/content/email-content/set-up-your-email-in-the-editor) بعد، فتأكد من القيام بذلك أيضًا. ثم، انقر على **Save.**

الآن بعد أن أصبح محتوى بريدك الإلكتروني جاهزًا، يمكن استخدامه في حملات البريد الإلكتروني. [اعرف المزيد](/ar/product/messaging-channels/emails/sending-emails)

## إرسال بريد إلكتروني تجريبي

قبل إرسال حملة البريد الإلكتروني الخاصة بك، يمكنك إرسال بريد إلكتروني تجريبي لمعاينة كيفية ظهور المحتوى في صناديق البريد الوارد للمستلمين. يتيح لك هذا مراجعة التخطيط والمحتوى وأي عناصر مخصصة لضمان الدقة قبل إنهاء الحملة. إذا لزم الأمر، قم بتعديل المحتوى بناءً على نتائج الاختبار.

<Aside type="note">
إذا لم يتم إكمال **KYC (اعرف عميلك)**، فلا يزال بإمكانك إرسال رسائل بريد إلكتروني تجريبية عن طريق التحقق من عنوان بريد إلكتروني تجريبي. للقيام بذلك، انتقل إلى قسم [أجهزة الاختبار (Test Devices)](/ar/developer/first-steps/test-your-integration/test-devices/)، وأضف عنوان البريد الإلكتروني الذي تريد استخدامه للاختبار، وأكمل عملية التحقق.
</Aside>

لإرسال بريد إلكتروني تجريبي، انقر على **Test email** في محرر البريد الإلكتروني.

<img src="/shared-14.webp" alt="زر البريد الإلكتروني التجريبي في واجهة محرر البريد الإلكتروني"/>

 في النافذة التي تفتح:

1. في حقل **Email address**، أدخل عنوان البريد الإلكتروني الذي تريد تلقي البريد الإلكتروني التجريبي عليه.

إذا لم يتم إكمال KYC، فستحتاج إلى تحديد عنوان بريد إلكتروني تم التحقق منه من قائمة عناوين الاختبار بدلاً من إدخال بريد إلكتروني.

<img src="/shared-50.webp" alt="قائمة منسدلة لاختيار عنوان بريد إلكتروني تجريبي تم التحقق منه"/>

2. إذا كان بريدك الإلكتروني يحتوي على محتوى ديناميكي (عناصر نائبة للبيانات المخصصة)، فأضف قيمًا نموذجية لأغراض الاختبار.

على سبيل المثال:

* **العمر (عدد صحيح)**: أدخل رقمًا لتمثيل العنصر النائب للعمر (على سبيل المثال، `21`).
* **الاسم الأول (نص)**: أدخل اسمًا أولًا نموذجيًا (على سبيل المثال، `David`).

ستحل هذه القيم محل بيانات المستلم الفعلية في البريد الإلكتروني التجريبي، مما يسمح لك بالتحقق من كيفية ظهور المحتوى الديناميكي.

3. بمجرد ملء التفاصيل اللازمة، انقر على **Send test email** لإرسال الرسالة التجريبية إلى عنوان البريد الإلكتروني المقدم.

<img src="/shared-34.webp" alt="مربع حوار تأكيد إرسال بريد إلكتروني تجريبي مع حقول بيانات نموذجية"/>