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

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

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

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

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

إضافة محتوى

التخطيط

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

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

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

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

إنشاء رسائل داخل التطبيق بالوضع الرأسي والأفقي

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

رسائل داخل التطبيق بالوضع الرأسي

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

رسائل داخل التطبيق بالوضع الأفقي

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

إضافة أعمدة إلى رسائل داخل التطبيق بالوضع الأفقي

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

بعد تصميم رسائلك داخل التطبيق بالوضع الأفقي مع الأعمدة، انتقل إلى علامة تبويب الجوال. مرر لأسفل إلى قسم التصميم المتجاوب (RESPONSIVE DESIGN)، الموجود في أسفل لوحة الإعدادات، وقم بتمكين خيار عدم التكديس على الجوال (Do Not Stack on Mobile).

ملاحظة

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

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

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

العنوان

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

ملاحظة

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

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

النص

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

ملاحظة

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

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

الصورة

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

بدلاً من ذلك، يمكنك تحديد رابط الصورة (Image URL) بدلاً من تحميل ملف.

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

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

ملاحظة

إذا كنت ترغب في فتح صفحة في تطبيقك المحمول عند النقر على الصورة، حدد خيار فتح موقع ويب وأدخل رابطًا عميقًا (deep link).

الزر

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

ملاحظة

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

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

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

ملاحظة

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

الفاصل

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

النموذج

ملاحظة

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

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

انقر على اسم الحقل لتكوين معلماته:

• نوع الحقل (Field Type): نوع البيانات التي يجب إرسالها في الحقل؛
• اسم الحقل (Field Name): اسم المعلمة التي يتم تمرير البيانات من الحقل فيها؛
• تسمية الحقل (Field Label): نص معروض فوق الحقل؛
• نص نائب (Placeholder Text)؛
• مربع اختيار يشير إلى ما إذا كان الحقل مطلوبًا لإرسال النموذج.

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

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

HTML

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

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

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

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

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

لإضافة عنصر قائمة، انقر على إضافة عنصر جديد (Add New Item):

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

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

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

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

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

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

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

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

ملاحظة

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

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

في علامة التبويب النافذة المنبثقة (Popup)، يمكنك تكوين إعدادات القالب العامة:

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

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

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

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

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

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

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

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

تشمل الخيارات: ملء الشاشة (Fullscreen)، أعلى (Top)، وسط (Center)، أسفل (Bottom)

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

اختر كيفية ظهور الرسالة على الشاشة.

تشمل الخيارات: لأعلى (Up)، لأسفل (Down)، لليسار (Left)، لليمين (Right)

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

اختر كيفية اختفاء الرسالة.

تشمل الخيارات: لأعلى (Up)، لأسفل (Down)، لليسار (Left)، لليمين (Right)

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

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

تشمل الخيارات: لليسار (Left)، لليمين (Right)، لأعلى (Up)، لأسفل (Down)

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

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

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

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

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