مرجع كتل محرر In-App

مرجع لكل كتلة يمكنك إضافتها على لوحة المحرر المدمج.

يخدم كل نوع من الكتل غرضًا مختلفًا في الرسالة:

• العنوان: العناوين الرئيسية والعناوين القصيرة
• النص: نص المحتوى والأوصاف الطويلة
• الزر: دعوة إلى إجراء قابلة للنقر
• الصورة: صور من متجر الوسائط، أو تحميل، أو URL
• الفيديو: صورة مصغرة لفيديو قابلة للنقر تفتح فيديو على YouTube أو Vimeo
• البطاقة: صورة مع عنوان ونص وزر في تخطيط واحد
• الفاصل: خط يفصل بين الأقسام
• الأعمدة: تخطيطات جنبًا إلى جنب (عمودان أو 3 أو 4 أعمدة متساوية، أو تقسيمات 33/67 و 67/33)
• المؤقت: عد تنازلي للعروض والمواعيد النهائية
• الباركود: رمز Code 128 أو EAN-13 أو EAN-8 أو UPC-A أو QR قابل للمسح الضوئي يتم إنشاؤه من قيمة تخصيص، مثل قسيمة
• القائمة: صف أو عمود من روابط التنقل أو جهات الاتصال
• الوسائط الاجتماعية: أيقونات ترتبط بملفاتك الشخصية على وسائل التواصل الاجتماعي
• HTML: كود HTML مخصص، مثل نموذج أو استبيان أو فيديو مضمن
• المنتجات: شبكة من بطاقات المنتجات من كتالوج المنتجات الخاص بك أو من سلة التسوق المتروكة للمستخدم

كيفية تكوين كتل المحرر

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

نصيحة

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

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

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

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

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

الصورة

تعرض كتلة Image صورة في قالب In-App.

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

• Add image / Replace image: انقر على Add image عندما تكون الكتلة فارغة، أو Replace image عندما تكون هناك صورة معينة بالفعل. يمكنك تحميل ملف أو اختيار واحد من متجر الوسائط الخاص بك.
• Image URL: الصق رابطًا مستضافًا للصورة.
• Alt text: صف الصورة لتسهيل الوصول.
• Prompt: موجه توليد الذكاء الاصطناعي لصورة أنشأتها باستخدام Generate with AI.
• Width (px) / Height (px): ثبت الصورة بحجم بكسل معين. اترك حقلًا فارغًا ليتم تحديد حجمه تلقائيًا. أسفل هذه الحقول، يظهر تلميح حجم الصورة الذي يتم عرضه والحجم الذي يجب تحميله: 2× الحجم المعروض، بحيث تظل الصورة حادة على شاشات الهواتف. إذا كان الملف الذي تم تحميله أصغر من الحجم المعروض على أي محور، فإن تحذيرًا يخبرك بأنه سيتم تكبيره وسيبدو منقطًا.
• Corner radius (px): قم بتدوير زوايا الصورة.
• Alignment: يسار، وسط، أو يمين.

في Link، قم بتعيين Action Type (على سبيل المثال Open Website أو URL or Deeplink) و URL الخاص به لفتح شيء ما عند النقر على الصورة، و Link target لفتحه في نفس علامة التبويب أو في علامة تبويب جديدة.

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

أحجام الصور الموصى بها

قم بتحميل صورة بحجم 2× الحجم الذي يظهره التلميح تحت Width (px) / Height (px) لتلك الكتلة. هذا هو الرقم الذي يجب التحقق منه، لأنه يعكس إعدادات Width/Height والقص الخاصة بك. عندما لا تكون قد قمت بتعيين كتلة بعد، استخدم عروض الفتحات الشائعة هذه كنقطة بداية:

مكان الصورة	يتم عرضها بحجم	قم بالتحميل على الأقل
صورة بعرض كامل في النافذة المنبثقة الافتراضية	عرض يصل إلى 600 بكسل	عرض 1200 بكسل
معاينة الهاتف	عرض 360-430 بكسل، حسب الجهاز	عرض يصل إلى 860 بكسل
معاينة الجهاز اللوحي/سطح المكتب	عرض 768 بكسل	عرض 1536 بكسل

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

ملاحظة

يغطي هذا الجدول كتل الصور في المحرر المدمج. رسائل In-App الأصلية (modal, fullscreen, stories, sheet, carousel, banner, video) ليس لديها حجم غلاف موصى به بعد.

الفيديو

تضيف كتلة Video فيديو من YouTube أو Vimeo إلى الرسالة كصورة مصغرة قابلة للنقر. تعرض الرسالة صورة ثابتة مع تراكب ▶. يؤدي النقر عليها إلى فتح الفيديو في تطبيق YouTube أو Vimeo أو المتصفح.

حدد الكتلة على اللوحة لفتح إعداداتها:

• Video URL: الصق رابط YouTube أو Vimeo. يقوم المحرر بجلب صورة مصغرة تلقائيًا.
• Alt text: صف الفيديو لتسهيل الوصول.
• Thumbnail URL: احتفظ بالصورة المصغرة التي تم جلبها تلقائيًا، أو انقر على Add thumbnail / Replace thumbnail لاختيار واحدة من متجر الوسائط، أو الصق رابطًا مستضافًا مباشرة.
• Play button overlay: قيد التشغيل افتراضيًا. قم بإيقاف تشغيله لإظهار الصورة المصغرة العادية بدون تراكب ▶.
• Width (px)، Corner radius (px)، و Alignment: تحكم في مظهر الصورة المصغرة ومكانها في التخطيط.

البطاقة

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

• Layout: اختر الجانب الذي توضع فيه الصورة بالنسبة للمحتوى، أو قم بتشغيل Wrap text around image.
• Image: أضف أو استبدل الصورة، قم بتعيين النص البديل، قم بتحرير Prompt توليد الذكاء الاصطناعي، أضف Padding، وقم بتعيين Corner radius (px).
• Size & fit: قم بتعيين Width، Height، Crop (Original أو نسبة ثابتة)، و Fit (Cover أو نقطة محورية) للصورة. تعتمد الحقول الدقيقة على Layout الذي اخترته.
• Link: اجعل البطاقة بأكملها تفتح URL عند النقر عليها.

قم بتحرير عنوان البطاقة ونصها وزرها بنفس الطريقة التي تحرر بها كتل العنوان والنص و الزر المستقلة.

الزر

Button هو دعوة إلى إجراء قابلة للنقر في رسالة In-App. استخدمه لفتح URL، أو تشغيل JavaScript مخصص، أو إغلاق الرسالة.

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

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

1. انقر على أيقونة الرابط في شريط الأدوات لفتح Insert/Edit Link.
2. اختر Action type: Open Website، URL or Deeplink، أو Custom Javascript.
3. املأ الحقول لهذا الإجراء (انظر أدناه).
4. انقر على Save.

Open Website

يفتح Open Website صفحة ويب عندما ينقر المستخدم على الزر. أدخل العنوان في URL، على سبيل المثال https://example.com.

URL or Deeplink

يفتح URL or Deeplink رابطًا أو رابطًا عميقًا عندما ينقر المستخدم على الزر. أدخل العنوان في URL، على سبيل المثال شاشة تطبيق: myapp://screen.

تشغيل JavaScript مخصص

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

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

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

• pushwoosh.closeInApp(): أغلق رسالة In-App. احذفها لإبقاء الرسالة مفتوحة بعد النقر.
• pushwoosh.sendTags({...}): احفظ القيم كـ علامات جهاز لحملات لاحقة.
• pushwoosh.postEvent(...): أرسل حدثًا مخصصًا، على سبيل المثال لبدء Customer Journey.
• pushwoosh.getTags(...): اقرأ العلامات الحالية. مفيد في HTML المخصص لتغيير ما تعرضه الرسالة.
• pushwoosh.getCustomData(): اقرأ البيانات المخصصة التي تم تمريرها من الإشعار الذي فتح هذا In-App.
• pushwoosh.registerForPushNotifications(): قم بتشغيل مربع حوار إذن الإشعارات الأصلي للمنصة، على سبيل المثال من In-App إذن مسبق.

مثال: دع المستخدمين يختارون اهتمامًا ويحفظونه لحملات لاحقة

1. أضف سؤالاً في كتلة Text أو Heading، على سبيل المثال: “ما هي الرياضة التي تهتم بها؟”
2. أضف Button واحدًا لكل خيار، على سبيل المثال: Yoga و Gym.

3. قم بتعيين Action type إلى Custom Javascript لكل زر.
4. بالنسبة لزر Yoga، الصق هذا في onClick:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. بالنسبة لزر Gym، الصق هذا في onClick:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

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

اعرف المزيد عن كيفية إنشاء رسائل In-App باستخدام JavaScript

الفاصل

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

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

HTML

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

أمثلة

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

ملاحظة

تقوم أمثلة النموذج والاستبيان بحفظ علامات الجهاز وإرسال الأحداث من خلال Pushwoosh. قم بإنشاء الأحداث المخصصة في حسابك قبل استخدامها في الحملات.

نموذج عميل محتمل

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

كود 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>

استبيان

يحفظ هذا الاستبيان وقت التمرين المحدد كعلامة، ويرسل حدث schedule_survey_completed، ويعرض رسالة شكر، ثم يغلق In-App.

كود 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; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

فيديو

يضمن هذا المثال فيديو YouTube في رسالة In-App.

كود HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

القائمة

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

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

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

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

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

الوسائط الاجتماعية

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

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

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

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

لإعداده:

1. في Countdown، قم بتعيين End date و End time، ثم اختر Timezone و Language لتسميات المؤقت.
2. قم بتشغيل Labels لإظهار تسميات “أيام / ساعات / دقائق / ثواني” تحت الأرقام، أو أوقف تشغيلها للأرقام فقط.
3. في Appearance، قم بتعيين Background، Digits color، Labels color، وحجم الخط للأرقام (الافتراضي 40 بكسل) والتسميات (الافتراضي 16 بكسل).
4. اضبط Spacing (الحشوة) حسب الحاجة.

الباركود

تعرض كتلة Barcode باركودًا أو رمز QR قابلًا للمسح الضوئي من قيمة تخصيص، وغالبًا ما تكون قسيمة.

لإعداده:

1. في Code، احتفظ بعلامة الجهاز {Coupon|String|}، أو انقر على Merge tag واختر علامة جهاز أخرى تخزن رمز كل مستلم. لا تقيّم رسائل In-App Liquid. يملأ SDK العلامة على الجهاز قبل عرض In-App. يختلف هذا عن كتلة Barcode في البريد الإلكتروني، التي تستخدم {{voucher}}.

2. اختر Symbology:
   • QR: رمز مربع ثنائي الأبعاد يمكن للهواتف مسحه ضوئيًا. يقبل أي نص، بما في ذلك الرموز الأبجدية الرقمية مثل WELCOME2025-A1
   • Code 128: باركود خطي لأي نص، بما في ذلك نفس الرموز الأبجدية الرقمية
   • EAN-13: الباركود الشائع للبيع بالتجزئة في أوروبا والعديد من المناطق الأخرى. أرقام فقط، 12-13 حرفًا
   • EAN-8: باركود أقصر للبيع بالتجزئة للتغليف الصغير. أرقام فقط، 7-8 أحرف
   • UPC-A: الباركود الشائع للبيع بالتجزئة في أمريكا الشمالية. أرقام فقط، 11-12 حرفًا
3. إذا اخترت QR، فقم بتعيين Error correction. يضيف هذا بيانات احتياطية حتى يظل الرمز قابلاً للمسح الضوئي عندما يكون جزء منه مغطى أو مهترئًا أو يصعب رؤيته. اختر L، M، Q، أو H (الافتراضي M). المستويات الأعلى تنجو من المزيد من الضرر ولكنها تجعل النمط أكثر كثافة، مما قد يكون من الصعب قراءته بأحجام صغيرة. تخط هذا الحقل للرموز الأخرى.
4. اختياريًا، قم بتشغيل Print the code in digits لإظهار القيمة تحت الرمز.

5. في Appearance، قم بتعيين Bars color أغمق من Background — لا تستطيع معظم الماسحات الضوئية قراءة الأشرطة الفاتحة على خلفية داكنة. قم بتعيين Width (px) و Height (px) إلى 600×200 على الأقل حتى يظل الرمز قابلاً للمسح الضوئي في نطاق كاميرا الهاتف النموذجي. اترك Quiet zone, modules على Auto للهامش الافتراضي.

ملاحظة

على اللوحة، تعرض الكتلة باركودًا نموذجيًا، وليس رمز المستلم الحقيقي. يتم ملء علامة جهاز مثل {Coupon|String|} فقط على الجهاز، لذا لا يمكن لـ Preview بناء الصورة الحقيقية أيضًا. تحقق من الباركود على جهاز حقيقي قبل النشر. استخدم EAN-13، EAN-8، أو UPC-A فقط لقيمة علامة تكون أرقامًا فقط، بالطول الذي يتوقعه كل منها. للرموز الأبجدية الرقمية مثل WELCOME2025-A1، استخدم Code 128 أو QR بدلاً من ذلك.

الأعمدة

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

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

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

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

المنتجات

تعرض كتلة Products شبكة من بطاقات المنتجات من قالب واحد مشترك. يمكن أن تتضمن كل بطاقة صورة وعنوانًا ووصفًا وسعرًا وزر شراء. يتكرر القالب لكل منتج.

في لوحة الإعدادات، تحت Source، اختر من أين تأتي المنتجات:

• Manual: أدخل المنتجات يدويًا، أو انقر على Pick from catalog… لتحديد عناصر محددة من كتالوج المنتجات الخاص بك عن طريق المعرف. يمكنك مزج كليهما في نفس الكتلة.
• Catalog rule: اسحب المنتجات تلقائيًا حسب الفئة وترتيب الفرز، ويتم حلها حديثًا من الكتالوج عند عرض الرسالة.
• Cart: اعرض العناصر من سلة التسوق المتروكة الحالية لكل مستخدم. كيفية إعداد حملة سلة التسوق المتروكة

ملاحظة

تحتاج Catalog rule و Cart إلى Content Templates في خطتك، و رمز وصول API (Settings → API Access). إذا لم يتحول محدد Source إلى أحدهما، أو لم تعرض الكتلة المنتجات، فاتصل بالدعم أو مدير حسابك، أو قم بإنشاء رمز وصول وأعد تحديد المصدر.

بمجرد اختيار المصدر، تتحكم هذه الإعدادات في مظهر الشبكة وبطاقاتها:

• Number of products (أو Max products shown لـ Cart): عدد البطاقات التي سيتم عرضها.
• Columns: 1 أو 2 أو 3 بطاقات في كل صف.
• Gap: المسافة بين البطاقات.
• Description limit: الحد الأقصى لعدد الأحرف الذي يتم اقتطاع نص الوصف إليه، بحيث تظل البطاقات بحجم ثابت.
• Card template: اختر تخطيطًا، ثم قم بتعيين Card background، Card corner radius، و Content padding لكل بطاقة.

حفظ وإعادة استخدام الكتل

احفظ كتلة لإعادة استخدامها في هذا القالب أو قوالب In-App أخرى بدلاً من إعادة بنائها في كل مرة.

1. حدد الكتلة على اللوحة.
2. انقر على أيقونة الإشارة المرجعية (Save block for reuse) في شريط أدوات الكتلة وأعطها اسمًا.

تظهر الكتل المحفوظة تحت Saved blocks في أسفل علامة التبويب Blocks.

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

الحفاظ على مزامنة النسخ

عندما تحفظ كتلة، قم بتشغيل Keep copies in sync لربط كل نسخة مدرجة بنفس المصدر. قم بتحرير المصدر مرة واحدة، ويتم تطبيق التغيير في كل مكان يتم فيه استخدام تلك الكتلة.

تكون النسخة المتزامنة مقفلة على اللوحة. لا يمكنك تحريرها مباشرة. حدد النسخة لفتح إعداداتها:

• Edit synced block: قم بإلغاء قفل هذه النسخة حتى تتمكن من تغييرها. يظهر شعار في الأعلى. انقر على Apply to all لحفظ تغييراتك على المصدر وكل نسخة أخرى، أو Cancel لتجاهلها. يمكنك إلغاء قفل كتلة متزامنة واحدة فقط في كل مرة.
• Update from source: استبدل هذه النسخة بأحدث إصدار من المصدر.
• Detach from source: قم بإلغاء ربط هذه النسخة من المصدر حتى تتمكن من تحريرها بمفردها.

ملاحظة

في كل مرة تفتح فيها قالب In-App، يتحقق Pushwoosh من نسخه المتزامنة ويحدث أيًا منها قديم. يظهر إشعار يوضح عدد النسخ التي تم تحديثها. إذا كان المصدر يحتوي على محتوى أحدث، فإن إعدادات النسخة تعرض تحذيرًا حتى تعيد فتح القالب أو تنقر على Update from source. إذا تم حذف المصدر، تحتفظ النسخة بآخر محتوى لها ويمكنك فقط Detach from source.