انتقل إلى المحتوى
وثائق المطورالدعم طلب عرض توضيحي تسجيل الدخول
Pushwoosh.com

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

فيديو يوتيوب: أنشئ محتوى بريدك الإلكتروني من الصفر باستخدام HTML

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

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

Anchor link to

لبدء إنشاء محتوى البريد الإلكتروني، الصق كود HTML الخاص بك في علامة التبويب HTML. يوفر المحرر معاينات فورية للبريد الإلكتروني أثناء عملك عليه.

بدلاً من ذلك، يمكنك تحميل ملف HTML بالنقر على Upload HTML File الموجود في اللوحة السفلية.

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

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

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

إضافة الصور

Anchor link to

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

لإعادة استخدام صورة من متجر الوسائط الخاص بك، انسخ عنوان 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 الذي نسخته من متجر الوسائط.

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

Anchor link to

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

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

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

{
  "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 الخاص بك للترويج كما يلي:

<!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) أو كتل محتوى محددة عبر رسائل بريد إلكتروني مختلفة.

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

الصيغة (Syntax)

Anchor link to

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

{% email_content "AAAAA-BBBBB" %}

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

عرض معرف محتوى البريد الإلكتروني يظهر اسم المحتوى والمعرف الفريد

مثال

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

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

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

{% email_content "AAAAA-BBBBB" %}

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

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

Anchor link to

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

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

Anchor link to

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

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

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

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

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

يتم احتساب النقرات في معدل إلغاء الاشتراك لتلك الرسالة في سجل الرسائل (Message History).

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

Anchor link to

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

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

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

Anchor link to

أضف رابطًا مباشرًا إلى مركز التفضيلات حيث يدير المستخدمون الفئات التي يتلقونها:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> إدارة التفضيلات </a>

تعرف على كيفية عمل مركز التفضيلات

تُظهر لقطة الشاشة أدناه تذييلاً يستخدم جميع أنواع الروابط الثلاثة.

مثال على تذييل بريد إلكتروني مع روابط إلغاء الاشتراك الثلاثة: إلغاء الاشتراك، إدارة التفضيلات، إلغاء الاشتراك من جميع رسائل البريد الإلكتروني

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

Anchor link to

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

مربع حوار حفظ محتوى البريد الإلكتروني يظهر حقلي الاسم والتصنيف

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

إذا لم تكن قد قمت بإعداد تفاصيل المرسل بعد، فتأكد من القيام بذلك أيضًا. ثم، انقر على Save.

الآن بعد أن أصبح محتوى بريدك الإلكتروني جاهزًا، يمكن استخدامه في حملات البريد الإلكتروني. اعرف المزيد

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

Anchor link to

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

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

زر البريد الإلكتروني التجريبي في واجهة محرر البريد الإلكتروني

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

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

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

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

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

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

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

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