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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظة

للتطبيقات الأصلية على iOS و Android، افتح الإعدادات ← إعدادات الرسائل داخل التطبيق، واضبط موضع الرسالة على ملء الشاشة.

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

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

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

ملاحظة

للتطبيقات الأصلية على iOS و Android، افتح الإعدادات ← إعدادات الرسائل داخل التطبيق، واختر وسط، أعلى، أو أسفل لموضع الرسالة.

نصيحة

لأتمتة النوافذ المنبثقة للموافقة على إذن الإشعارات واستعادة إلغاء الاشتراك في Customer Journey، راجع إنشاء نوافذ منبثقة للموافقة وإلغاء الاشتراك.

إضافة محتوى

كتل المحتوى

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

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

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

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

الاتجاه الرأسي والأفقي

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

الرأسي (علامة تبويب الجوال)

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

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

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

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

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

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

ملاحظة

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

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

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

العنوان

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

ملاحظة

إذا كنت ترغب في تخصيص العنوان لكل مستخدم، أضف Tags إليه.

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

النص

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

ملاحظة

إذا كنت ترغب في تخصيص النص لكل مستخدم، أضف Tags إليه.

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

الصورة

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

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

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

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

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

ملاحظة

إذا كنت ترغب في فتح صفحة في تطبيقك المحمول عند النقر على الصورة، اختر خيار URL or Deeplink وأدخل رابطًا عميقًا.

الزر

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

ملاحظة

إذا كنت ترغب في تخصيص نص الزر لكل مستخدم، أضف Tags إليه.

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

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

ملاحظة

إذا كنت ترغب في فتح صفحة في تطبيقك المحمول عند النقر على الزر، اختر خيار URL or Deeplink وأدخل رابطًا عميقًا.

الفاصل

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

النموذج

ملاحظة

لتهيئة هذا العنصر، ستحتاج إلى مساعدة من مطور.

تسمح لك النماذج بجمع رسائل البريد الإلكتروني للمستخدمين وأرقام هواتفهم وتفضيلاتهم وغيرها من المعلومات التي قد تكون مفيدة للاتصالات المستقبلية. يتم تكوين هذا العنصر كنموذج 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. في قسم الصور، استخدم علامات التبويب الصورة 1، الصورة 2، الصورة 3، إلخ. لتحديد شريحة. انقر على + لإضافة شريحة أخرى أو أيقونة الحذف لإزالة الشريحة النشطة.

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

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

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

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

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

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

1. مع تحديد كتلة المؤقت، قم بالتبديل بين الجوال وسطح المكتب في الجزء العلوي من اللوحة لتكوين كل عرض.

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

3. قم بتشغيل التسميات لإظهار الأيام، الساعات، الدقائق، والثواني تحت الأرقام، أو قم بإيقافها لعرض أرقام العد التنازلي فقط.

4. في قسم التصميم، اضبط الخلفية، لون الأرقام، ولون التسميات. اختر خط الأرقام، حجم خط الأرقام، خط التسميات، وحجم خط التسميات.

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

الجدول

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

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

1. مع تحديد كتلة الجدول، قم بالتبديل بين الجوال وسطح المكتب في الجزء العلوي من اللوحة لتكوين كل عرض.

2. في قسم التخطيط، اضبط الأعمدة والصفوف باستخدام أزرار + و -.

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

4. انقر على خلية في المعاينة لإدخال نص الرأس أو الجسم.

5. في الرأس والمحتوى، خصص الخطوط والألوان ومحاذاة النص لخلايا الرأس والجسم.

6. قم بتكوين الروابط، عام، والتصميم المتجاوب حسب الحاجة.

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

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

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

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

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

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

ملاحظة

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

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

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

لتكوين إعدادات الرسائل داخل التطبيق:

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

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

ضبط موضع الرسالة على الشاشة

اختر مكان ظهور الرسالة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• عرض رسالة داخل التطبيق كجزء من رحلة العميل؛
• إرسال إشعار فوري يفتح رسالة داخل التطبيق عند النقر عليه؛
• عرض رسالة واحدة داخل التطبيق لمستخدميك.