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

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

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

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

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

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

نصيحة

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

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

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

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

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

الصورة

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

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

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

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

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

الفيديو

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

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

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

البطاقة

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

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

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

الزر

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

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

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

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

فتح موقع ويب

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

URL أو Deeplink

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

تشغيل JavaScript مخصص

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

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

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

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

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

1. أضف سؤالاً في كتلة نص أو عنوان، على سبيل المثال: “ما هي الرياضة التي تهتم بها؟”
2. أضف زرًا واحدًا لكل خيار، على سبيل المثال: يوجا و جيم.

3. قم بتعيين نوع الإجراء إلى JavaScript مخصص لكل زر.
4. بالنسبة لزر اليوجا، الصق هذا في onClick:

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

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

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

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

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

الفاصل

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

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

HTML

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

أمثلة

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

ملاحظة

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

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

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

كود HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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>احصل على خصم 20%</h2>
<p>اترك اسمك وبريدك الإلكتروني. سنرسل لك الرمز الترويجي على الفور.</p>

<div id="form">
  <input type="text" id="name" placeholder="اسمك" />
  <input type="email" id="email" placeholder="بريدك الإلكتروني" />
  <button onclick="submit()">أرسل لي الرمز</button>
</div>

<div class="thanks" id="thanks">
  🎉 تم! تحقق من بريدك الوارد للحصول على الرمز الترويجي.
</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="ar" dir="rtl">
<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>متى تفضل أن تتمرن؟</h2>
<p>ساعدنا في جدولة أفضل الحصص لك</p>

<button class="option" onclick="pick('morning')">☀️ صباحًا (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ ظهرًا (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 مساءً (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 عطلات نهاية الأسبوع فقط</button>

<div class="thanks" id="thanks">فهمنا! سنرسل لك أفضل جدول 💪</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>

فيديو

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

كود HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال فيديو داخل التطبيق</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>مثال فيديو داخل التطبيق</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>

القائمة

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

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

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

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

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

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

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

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

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

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

لإعداده:

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

الأعمدة

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

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

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

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

المنتجات

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

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

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

ملاحظة

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظة

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