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

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

أضف قالبًا جديدًا

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

هنا، لديك ثلاثة خيارات:

1. تحميل ملف ZIP مع رسالتك داخل التطبيق بصيغة HTML.
2. اختيار وتخصيص أحد القوالب الجاهزة.
3. بناء قالبك الخاص من الصفر.

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

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

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

أضف محتوى

التخطيط

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

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

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

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

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

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

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

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

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

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

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

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

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

ملاحظة

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

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

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

العنوان

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

ملاحظة

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

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

النص

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

ملاحظة

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

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

الصورة

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

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

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

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

ملاحظة

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

الزر

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

ملاحظة

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

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

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

القائمة

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

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

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

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

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

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

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

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

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

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

ملاحظة

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

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

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

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

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

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

لتكوين إعدادات In-App:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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