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

إضافة قالب جديد

لإنشاء قالب رسالة داخل التطبيق، اذهب إلى المحتوى ← In-apps وانقر على إضافة قالب:

واجهة إنشاء قالب رسالة داخل التطبيق تظهر زر إضافة قالب

هنا، لديك طريقتان لإنشاء قالب:

تحميل ZIP — تحميل ملف ZIP يحتوي على رسالتك داخل التطبيق بصيغة HTML.
إنشاء قالب جديد — بناء قالب في المحرر المرئي. بعد إنشائه، يمكنك البدء من قالب مُعد مسبقًا أو قالب فارغ.

في هذا المقال، سنلقي نظرة على إنشاء قالب من الصفر. اتبع نفس الخطوات لتخصيص قالبك الحالي.

أدخل اسمًا للقالب، وحدد إنشاء قالب جديد، وانقر على إضافة قالب:

نموذج إنشاء قالب مع حقل الاسم وخيار إنشاء قالب جديد

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

إعدادات القالب العامة

قبل إضافة كتل المحتوى، قم بتهيئة القالب في علامة التبويب Popup:

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

نافذة إعدادات القالب العامة تظهر خيارات الموضع والأبعاد والتصميم وزر الإغلاق

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

رسالة داخل التطبيق بملء الشاشة

استخدم الرسائل بملء الشاشة لعمليات الإعداد الأولية، وجدران الدفع، والعروض الترويجية مثل جدران العروض.

في علامة التبويب Popup، اضبط العرض والارتفاع ليكون قريبًا من حجم شاشة الجهاز المستهدف بحيث تغطي الرسالة معظم الشاشة.

معاينة لمثال رسالة ترويجية بملء الشاشة داخل التطبيق لتطبيق لياقة بدنية مع صورة وزر دعوة لاتخاذ إجراء

توصيات الصور للرسائل بملء الشاشة داخل التطبيق (الاتجاه العمودي)

الصورة والنص	دقة عالية: 1200 × 1000 بكسل الحد الأدنى للحجم: 600 × 500 بكسل نسبة العرض إلى الارتفاع: 6:5
صورة فقط	دقة عالية: 1200 × 2000 بكسل الحد الأدنى للحجم: 600 × 1000 بكسل نسبة العرض إلى الارتفاع: 3:5

الصورة والنص

دقة عالية: 1200 × 1000 بكسل

الحد الأدنى للحجم: 600 × 500 بكسل

نسبة العرض إلى الارتفاع: 6:5

صورة فقط

دقة عالية: 1200 × 2000 بكسل

الحد الأدنى للحجم: 600 × 1000 بكسل

نسبة العرض إلى الارتفاع: 3:5

رسالة داخل التطبيق بجزء من الشاشة

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

في علامة التبويب Popup، اضبط عرضًا وارتفاعًا أصغر حتى لا تغطي النافذة المنبثقة الشاشة بأكملها.

معاينة لمثال رسالة منبثقة لطلب الاشتراك بجزء من الشاشة مع أيقونة ونص وزر سماح

إضافة محتوى

كتل المحتوى

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

إذا كنت ترغب في وضع أكثر من عنصر محتوى واحد في صف، أضف عنصر الأعمدة إلى القالب. حدد نوع الكتلة المطلوب وأضف المحتوى إلى كل عمود:

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

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

الاتجاه العمودي والأفقي

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

عمودي (علامة تبويب الجوال)

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

أفقي (علامة تبويب سطح المكتب)

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

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

الأعمدة في التخطيطات الأفقية

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

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

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

تكوين تخطيط أعمدة مختلط يظهر خيارات التكديس الرأسي والأفقي

عناصر المحتوى

العنوان

يمكنك تعديل معلمات الخط واللون ومحاذاة النص وارتفاع السطر والحشو للعناوين.

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

نص

النصوص قابلة للتخصيص بنفس طريقة العناوين (في المحرر، هذه الكتلة مسماة فقرة). يمكنك تغيير معلمات الخط واللون ومحاذاة النص وارتفاع السطر والحشو.

يمكنك أيضًا تحسين النص الخاص بك باستخدام خيار النص الذكي:

صورة

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

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

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

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

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

زر

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

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

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

فاصل

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

نموذج

تسمح لك النماذج بجمع رسائل البريد الإلكتروني للمستخدمين وأرقام هواتفهم وتفضيلاتهم وغيرها من المعلومات التي قد تكون مفيدة للاتصالات المستقبلية. يتم تكوين هذا العنصر كنموذج HTML قياسي: يتم إرسال البيانات في طلب GET أو POST إلى العنوان المحدد في حقل URL.

انقر على اسم الحقل لتهيئة معالمه:

نوع الحقل: نوع البيانات التي يجب إرسالها في الحقل؛
اسم الحقل: اسم المعلمة التي يتم تمرير البيانات من الحقل فيها؛
تسمية الحقل: النص المعروض فوق الحقل؛
نص العنصر النائب؛
مربع اختيار يشير إلى ما إذا كان الحقل مطلوبًا لإرسال النموذج.

تكوين معلمات حقل النموذج يظهر إعدادات نوع الحقل والاسم والتسمية والنص النائب

لإضافة حقل آخر، انقر على إضافة حقل جديد وحدد نوع البيانات:

واجهة إضافة حقل جديد لإنشاء حقول نموذج إضافية بأنواع بيانات مختلفة

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

HTML

تسمح لك كتلة HTML بإضافة كود HTML مخصص خاص بك إلى القالب.

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

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

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

مثال على قالب نموذج استطلاع مصمم مسبقًا في قسم القوالب الافتراضية

أيضًا، يمكنك تحسين رسائلك داخل التطبيق عن طريق تضمين مقاطع الفيديو لتجربة مستخدم أكثر جاذبية. إليك مثال على كيفية تضمين فيديو يوتيوب باستخدام 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>

قائمة

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

لإضافة عنصر قائمة، انقر على إضافة عنصر جديد:

واجهة عنصر القائمة تظهر خيار إضافة عنصر جديد لعناصر التنقل

أضف نص العنصر وحدد الإجراء الذي يجب تنفيذه عند النقر على العنصر:

تكوين عنصر القائمة يظهر إدخال النص وخيارات تحديد الإجراء

اختر نوع القائمة الأفقي أو الرأسي وأضف فاصلاً بين العناصر إذا لزم الأمر:

خيارات تخطيط القائمة تظهر أنواع القوائم الأفقية والرأسية مع إعدادات الفاصل

دوار الصور

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

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

لإعداد الدوار:

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

عداد تنازلي

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

كتلة المؤقت في محرر الرسائل داخل التطبيق مع وقت انتهاء العد التنازلي، والمنطقة الزمنية، واللغة، والتسميات، وخيارات التصميم

لإعداد المؤقت:

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

جدول

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

لإعداد الجدول:

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

تخصيص المحتوى

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

أولاً، تحتاج إلى إعداد Tags وتهيئة جمع البيانات من المستخدمين (على سبيل المثال، عبر نموذج ملاحظات). عند إنشاء رسائل داخل التطبيق، حدد كتلة المحتوى المطلوبة، انقر على دمج Tags، وحدد الـ Tag الذي تريد استخدامه:

قوالب متعددة اللغات

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

واجهة قالب متعدد اللغات تظهر خيارات تبديل اللغة وترجمة المحتوى

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

تخصيص مظهر وسلوك الرسائل داخل التطبيق (iOS و Android الأصلي)

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

لتهيئة إعدادات In-App:

انقر على الإعدادات في الجزء العلوي من الشاشة.

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

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

تعيين موضع الرسالة على الشاشة

اختر أين يجب أن تظهر الرسالة.

تشمل الخيارات: ملء الشاشة، الأعلى، الوسط، الأسفل

تحديد حركة الدخول

اختر كيف تظهر الرسالة على الشاشة. في الإعدادات، هذا هو خيار حركة العرض.

لأعلى
لأسفل
لليسار
لليمين
تلاشي: تتلاشى الرسالة لتظهر.
لا شيء: تظهر الرسالة على الفور، بدون حركة.
افتراضي: يستخدم الحركة المحددة في كود تطبيقك (افتراضي SDK).

تحديد حركة الخروج

اختر كيف تختفي الرسالة. في الإعدادات، هذا هو خيار حركة الإغلاق.

لأعلى
لأسفل
لليسار
لليمين
تلاشي: تتلاشى الرسالة لتختفي.
لا شيء: تختفي الرسالة على الفور، بدون حركة.
افتراضي: يستخدم الحركة المحددة في كود تطبيقك (افتراضي SDK).

تمكين السحب للإغلاق (اختياري)

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

تشمل الخيارات: اليسار، اليمين، الأعلى، الأسفل

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

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

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

انقر على حفظ لتطبيق التغييرات.

واجهة تأكيد حفظ القالب تظهر إنشاء القالب بنجاح

الآن يمكنك استخدام قالب رسالتك داخل التطبيق بإحدى الطرق التالية: