انتقل إلى المحتوى

إنشاء رسائل داخل التطبيق في المحرر المدمج

أنشئ قالب رسالة داخل التطبيق في محرر Pushwoosh المدمج دون كتابة أي كود. ستحصل على تصميم قابل لإعادة الاستخدام مع كتل محتوى وصور وأزرار ونصوص مخصصة يمكنك عرضها في Customer Journey، أو كرسالة داخل التطبيق لمرة واحدة، أو من إشعار فوري.

إنشاء قالب جديد داخل التطبيق

Anchor link to

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

  1. اذهب إلى المحتوىالرسائل داخل التطبيق.
  2. انقر على إضافة قالب.
صفحة المحتوى والرسائل داخل التطبيق مع زر إضافة قالب في أعلى يمين قائمة القوالب
  1. أدخل اسمًا للقالب.
  2. اختر كيفية إنشاء القالب:
    • تحميل ZIP: حمّل ملف ZIP يحتوي على رسالتك داخل التطبيق بصيغة HTML.
    • إنشاء قالب جديد: أنشئ قالبًا في المحرر المدمج.
  3. حدد إنشاء قالب جديد.
  4. انقر على إضافة قالب.
نموذج قالب جديد مع حقل الاسم، وخيار تحميل ZIP، وخيار إنشاء قالب جديد محدد

استكشاف تصميم المحرر

Anchor link to

يحتوي المحرر المدمج على أربع مناطق. لكل منها وظيفة واضحة.

الشريط العلوي

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

الشريط العلوي لمحرر الرسائل داخل التطبيق مع اسم القالب، التراجع، الإعادة، إعدادات الرسالة داخل التطبيق، وحفظ

لوحة العمل (Canvas)

استخدم لوحة العمل لرؤية الرسالة كما سيراها المستخدمون ولتحرير النصوص والصور والأزرار مباشرة على التصميم. يعرض القالب الفارغ ابدأ بكتلة. فوق لوحة العمل، يوجد مفتاح تبديل بين الهاتف/الجهاز اللوحي لتغيير عرض المعاينة — لا يغير هذا تصميمك، بل فقط عرض الشاشة التي تقوم بمعاينتها عليها.

لوحة عمل فارغة في محرر الرسائل داخل التطبيق مع مطالبة ابدأ بكتلة في المنتصف

الطبقات (Layers)

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

لوحة الطبقات تسرد البطاقة، الصورة، العنوان، النص، المؤقت، الأزرار، والتذييل في شجرة

اللوحة اليمنى

استخدم الكتل في اللوحة اليمنى لإضافة محتوى إلى الرسالة، والإعدادات عندما تريد تطبيق أنماط على القالب بأكمله مرة واحدة. انظر تكوين أنماط على مستوى القالب.

علامة تبويب الكتل في اللوحة اليمنى مع العنوان، النص، الزر، الصورة، وكتل محتوى أخرى

ابدأ في بناء القالب

Anchor link to

بعد إنشاء قالب، يفتح المحرر بلوحة عمل فارغة وعلامة تبويب الكتل على اليمين.

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

إضافة كتل المحتوى

Anchor link to

كتل المحتوى هي قطع البناء لقالب الرسالة داخل التطبيق في المحرر المدمج. يمكنك دمج العناوين والنصوص والصور والأزرار والكتل الأخرى في تصميم واحد.

افتح علامة تبويب الكتل واسحب كتلة إلى لوحة العمل، أو انقر على كتلة لإضافتها. الكتل المتاحة:

  • عنوان: العناوين الرئيسية والعناوين القصيرة في الرسالة
  • نص: النص الأساسي والأوصاف الطويلة
  • زر: دعوة لاتخاذ إجراء قابلة للنقر
  • صورة: صور من متجر الوسائط، أو تحميل، أو من رابط URL
  • فاصل: خط يفصل الأقسام بصريًا
  • عمودان: عمودان متساويان جنبًا إلى جنب
  • 3 أعمدة: ثلاثة أعمدة متساوية جنبًا إلى جنب
  • 4 أعمدة: أربعة أعمدة متساوية جنبًا إلى جنب
  • 33 / 67: عمودان حيث يأخذ العمود الأيسر حوالي 33% من العرض والأيمن حوالي 67%
  • 67 / 33: عمودان حيث يأخذ العمود الأيسر حوالي 67% من العرض والأيمن حوالي 33%
  • مؤقت: عد تنازلي للعروض والمواعيد النهائية
  • قائمة: صف أو عمود من الروابط، مثل التنقل أو جهات الاتصال
  • وسائل التواصل الاجتماعي: أيقونات ترتبط بملفاتك الشخصية على وسائل التواصل الاجتماعي
  • HTML: كود HTML مخصص، مثل نموذج أو فيديو مضمن

العنوان والنص

Anchor link to

تحتوي كتل العنوان والنص على النسخة التي يقرأها المستخدمون في الرسالة داخل التطبيق. حرر النص على لوحة العمل ونسقه باستخدام شريط الأدوات.

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

كتلة عنوان محددة على لوحة العمل مع شريط أدوات تنسيق النص الذي يعرض خيارات النمط والتنسيق

Merge Tags هي عناصر نائبة تُدرج قيمة Tag من ملف تعريف المستخدم في الرسالة، بحيث يرى كل مشترك نسخة مخصصة. لإضافة واحد، حدد النص، انقر على Merge Tags في شريط الأدوات، واختر Tag من حسابك. اعرف المزيد عن الرسائل المخصصة داخل التطبيق

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

  • إضافة صورة / استبدال صورة: انقر على إضافة صورة عندما تكون الكتلة فارغة، أو استبدال صورة عندما تكون هناك صورة معينة بالفعل. يمكنك تحميل ملف أو اختيار واحد من متجر الوسائط الخاص بك.
  • رابط الصورة: الصق رابطًا مستضافًا للصورة.
  • نص بديل: صف الصورة لتسهيل الوصول.
  • رابط URL: افتح موقع ويب عند النقر على الصورة.
  • وجهة الرابط: افتح الرابط في نفس علامة التبويب أو في علامة تبويب جديدة.
  • ملف: بعد إضافة صورة، يعرض مسار الملف المستخدم.

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

كتلة صورة فارغة على لوحة العمل مع إعدادات الصورة التي تعرض إضافة صورة، رابط الصورة، نص بديل، رابط URL، والتباعد

الزر هو دعوة لاتخاذ إجراء قابلة للنقر في الرسالة داخل التطبيق. استخدمه لفتح رابط URL، تشغيل JavaScript مخصص، أو إغلاق الرسالة.

انقر على كتلة زر لتحرير تسميتها على لوحة العمل. استخدم شريط الأدوات لتغيير حجم الخط، لون النص، غامق، مائل، تسطير، والمحاذاة.

لتعيين ما يحدث عند نقر المستخدم على الزر:

  1. انقر على أيقونة الرابط في شريط الأدوات لفتح إدراج/تحرير رابط.
  2. اختر نوع الإجراء.
  3. املأ الحقول الخاصة بهذا الإجراء (انظر أدناه).
  4. انقر على حفظ.

فتح موقع ويب

Anchor link to

فتح موقع ويب يفتح رابطًا عند نقر المستخدم على الزر. أدخل العنوان في URL. ما يمكنك إدخاله:

  • موقع ويب: https://example.com
  • رابط تطبيق يفتح شاشة داخل تطبيقك: myapp://promo
  • إغلاق الرسالة داخل التطبيق بدون JavaScript: pushwoosh://close
مربع حوار إدراج/تحرير رابط لزر مع نوع الإجراء فتح موقع ويب وحقل URL

تشغيل JavaScript مخصص

Anchor link to

JavaScript مخصص يقوم بتشغيل كود عند نقر المستخدم على الزر. أدخل الكود في حقل onClick.

استخدمه عندما يجب أن يقوم النقر بشيء ما في Pushwoosh، وليس فقط فتح رابط. لا يزال الشخص في التطبيق يرى زرًا عاديًا. لا يرون علامات أو أحداث. أنت تقرر ما يحدث بعد ذلك على الشاشة: اترك الرسالة مفتوحة، أو أغلقها في نفس onClick.

مربع حوار إدراج/تحرير رابط لزر مع نوع الإجراء JavaScript مخصص و onClick مضبوط على closeInApp

الطرق المتاحة في onClick

  • pushwoosh.closeInApp(): إغلاق الرسالة داخل التطبيق. احذفه لإبقاء الرسالة مفتوحة بعد النقر.
  • pushwoosh.sendTags({...}): حفظ القيم كـ علامات جهاز لحملات لاحقة.
  • pushwoosh.postEvent(...): إرسال حدث مخصص، على سبيل المثال لبدء Customer Journey.
  • pushwoosh.getTags(...): قراءة العلامات الحالية. مفيد في HTML المخصص لتغيير ما تعرضه الرسالة.
  • pushwoosh.getCustomData(): قراءة البيانات المخصصة التي تم تمريرها من الإشعار الفوري الذي فتح هذه الرسالة داخل التطبيق.
مثال: دع المستخدمين يختارون اهتمامًا ويحفظونه لحملات لاحقة
Anchor link to
  1. أضف سؤالًا في كتلة نص أو عنوان، على سبيل المثال: “أي رياضة تهتم بها؟”
  2. أضف زرًا واحدًا لكل خيار، على سبيل المثال: يوجا وجيم.
قالب رسالة داخل التطبيق مع أزرار يوجا وجيم و JavaScript مخصص onClick لزر اليوجا
  1. اضبط نوع الإجراء على JavaScript مخصص لكل زر.
  2. بالنسبة لزر يوجا، الصق هذا في onClick:
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
  1. بالنسبة لزر جيم، الصق هذا في onClick:
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

عندما ينقر المستخدم على يوجا، يكتب Pushwoosh علامة interest على جهازه ويغلق الرسالة داخل التطبيق. يمكنك بعد ذلك استهداف هذا المستخدم في شريحة أو Customer Journey.

الفاصل هو خط أفقي بين كتل المحتوى. استخدمه لفصل الأقسام بصريًا في القالب.

قم بتكوين نمط الخط (صلب، متقطع، منقط)، اللون، السماكة، والعرض في لوحة الإعدادات.

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

أمثلة
Anchor link to

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

يقوم هذا النموذج بكتابة الاسم والبريد الإلكتروني كعلامات، ويرسل حدث promo_requested، ويعرض رسالة شكر، ثم يغلق الرسالة داخل التطبيق.

نموذج عملاء محتملين 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; }
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: #FF6B35;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>
<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>
<div id="form">
<input type="text" id="name" placeholder="Your name" />
<input type="email" id="email" placeholder="Your email" />
<button onclick="submit()">Send me the code</button>
</div>
<div class="thanks" id="thanks">
🎉 Done! Check your inbox for the promo code.
</div>
<script>
function submit() {
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
if (!name || !email) return;
pushwoosh.sendTags({ name: name, email: email });
pushwoosh.postEvent("promo_requested", { email: email });
document.getElementById('form').style.display = 'none';
document.getElementById('thanks').style.display = 'block';
setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>
</body>
</html>

قائمة

Anchor link to

تضع كتلة القائمة عدة عناصر قابلة للنقر في صف أو عمود. استخدمها لشريط تنقل أو قائمة بجهات اتصال الشركة.

لكل عنصر في القائمة، اضبط:

  • التسمية: النص الذي يراه المستخدمون
  • URL: أين يفتح العنصر
  • الوجهة: نفس علامة التبويب أو علامة تبويب جديدة

في إعدادات الكتلة، يمكنك أيضًا ضبط:

  • الاتجاه: أفقي أو عمودي
  • المحاذاة: يسار، وسط، أو يمين
  • الفاصل: فاصل اختياري بين العناصر
  • الخط، الحجم، الوزن، تباعد الأحرف، وألوان الرابط/النص

وسائل التواصل الاجتماعي

Anchor link to

تعرض كتلة وسائل التواصل الاجتماعي صفًا من أيقونات وسائل التواصل الاجتماعي التي ترتبط بملفاتك الشخصية. استخدمها لإرسال المستخدمين إلى Facebook، Instagram، X، ومنصات أخرى من الرسالة داخل التطبيق.

أضف إدخالات المنصات، ثم اضبط المحاذاة، حجم الأيقونة، والمسافة بين الأيقونات.

إعدادات كتلة وسائل التواصل الاجتماعي مع روابط TikTok، Instagram، و Facebook بالإضافة إلى المحاذاة، حجم الأيقونة، والمسافة

مؤقت العد التنازلي

Anchor link to

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

لإعداده:

  1. في العد التنازلي، اضبط تاريخ الانتهاء ووقت الانتهاء، ثم اختر المنطقة الزمنية واللغة لتسميات المؤقت.
  2. قم بتشغيل التسميات لإظهار تعليقات “أيام / ساعات / دقائق / ثواني” تحت الأرقام، أو أوقفها للأرقام فقط.
  3. في المظهر، اضبط الخلفية، لون الأرقام، لون التسميات، وحجم الخط للأرقام (الافتراضي 40 بكسل) والتسميات (الافتراضي 16 بكسل).
  4. اضبط التباعد (الحشو) حسب الحاجة.
إعدادات كتلة المؤقت مع تاريخ ووقت انتهاء العد التنازلي، التسميات، المظهر، وخيارات التباعد

أعمدة

Anchor link to

تقسم الأعمدة لوحة العمل إلى أقسام جنبًا إلى جنب حتى تتمكن من وضع المحتوى بجانب بعضه البعض في صف واحد.

اسحب إحدى هذه الكتل إلى لوحة العمل:

  • عمودان: عمودان متساويان
  • 3 أعمدة: ثلاثة أعمدة متساوية
  • 4 أعمدة: أربعة أعمدة متساوية
  • 33 / 67: العمود الأيسر بعرض حوالي 33%، والأيمن حوالي 67%
  • 67 / 33: العمود الأيسر بعرض حوالي 67%، والأيمن حوالي 33%

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

تكوين أنماط على مستوى القالب

Anchor link to

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

افتح علامة تبويب الإعدادات في اللوحة اليمنى.

علامة تبويب الإعدادات مع أقسام المستند، النافذة المنبثقة، والأنماط الافتراضية للكتل والأعمدة

الأقسام المتاحة:

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

تنطبق الإعدادات الافتراضية في أي مكان لا تتجاوزها فيه كتلة فردية.

توطين القالب

Anchor link to

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

يظهر المحتوى الذي لم تترجمه بعد للغة الحالية باهتًا. ابدأ في الكتابة لإنشاء الترجمة. تستمر اللغة الافتراضية في الظهور حتى تفعل ذلك.

تكوين كيفية ظهور الرسالة داخل التطبيق على الجهاز

Anchor link to

تتحكم إعدادات الرسالة داخل التطبيق في كيفية ظهور الرسالة وسلوكها على الجهاز: الموضع، الرسوم المتحركة، إيماءات السحب، وزر الإغلاق. تنطبق هذه الإعدادات فقط على iOS و Android Native.

انقر على إعدادات الرسالة داخل التطبيق في الشريط العلوي:

  • الموضع على الشاشة: ملء الشاشة، أعلى، وسط، أو أسفل.
  • رسوم العرض المتحركة / رسوم الإغلاق المتحركة: لا شيء، تلاشي، يسار، يمين، أعلى، أو أسفل، أو افتراضي لاستخدام الإعداد الافتراضي لـ SDK في تطبيقك.
  • مدة الرسوم المتحركة (مللي ثانية): من 100 إلى 3000 مللي ثانية. اتركها فارغة لاستخدام التوقيت الافتراضي لـ SDK.
  • السحب للإغلاق: قم بتمكين أي مجموعة من اليسار، اليمين، الأعلى، والأسفل.
  • إظهار زر الإغلاق: قم بتشغيل أو إيقاف عنصر التحكم في الإغلاق. عند التشغيل، اضبط الموضع (أعلى اليمين، أعلى اليسار، أسفل اليمين، أسفل اليسار)، الخلفية (لون، أو شفاف)، ولون الأيقونة. على عكس الإعدادات الأخرى في هذه النافذة، يتم عرض مظهر زر الإغلاق في الرسالة نفسها ويظهر على كل منصة، وليس فقط iOS و Android Native.
نافذة إعدادات الرسالة داخل التطبيق مع خيارات الموضع، الرسوم المتحركة، السحب للإغلاق، وزر الإغلاق

انقر على تطبيق لحفظ اختياراتك، أو إلغاء لتجاهلها.

حفظ القالب

Anchor link to

انقر على حفظ في الشريط العلوي لحفظ تغييراتك. استخدم تراجع/إعادة في الشريط العلوي للتنقل بين تعديلاتك.

استخدام القالب المحفوظ

Anchor link to

بعد حفظ قالب رسالة داخل التطبيق، يمكنك عرضه للمستخدمين في Customer Journey، كرسالة داخل التطبيق لمرة واحدة، أو عندما ينقر المستخدم على إشعار فوري.