إنشاء رسائل In-App أصلية

تستخدم رسائل In-App الأصلية تخطيطات جاهزة يعرضها Pushwoosh SDK مباشرة على الجهاز، بدلاً من صفحة HTML التي يتم تحميلها في رسالة In-App مخصصة. هذا يجعلها تُحمَّل بشكل أسرع وتتحرك بسلاسة أكبر، ولا تحتاج إلى مهارات في التصميم أو التطوير لإنشاء واحدة.

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

المتطلبات الأساسية

تحتاج إلى مساعدة المطورين

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

قبل إنشاء قالب رسالة In-App أصلية، تأكد من:

• أن Pushwoosh SDK مدمج في تطبيقك حتى تتمكن رسائل In-App من الظهور. اعرف المزيد
• أن تطبيقك يعمل بإصدار iOS SDK 7.2.0+ أو Android SDK 6.10.0+ لأنواع modal و fullscreen و stories. وتحتاج أنواع Sheet و carousel و banner إلى إصدار iOS SDK 7.2.1+ أو Android SDK 6.10.1+. أما نوع Video فهو متاح لنظام iOS فقط في الوقت الحالي.

إنشاء قالب رسالة In-App أصلية

1. اذهب إلى المحتوى ← الرسائل داخل التطبيق.
2. انقر على إنشاء رسالة In-App.
3. أدخل اسمًا للقالب.
4. اختر إنشاء وسائط غنية أصلية.
5. في نوع العرض (DISPLAY TYPE)، اختر نوع العرض: modal، fullscreen، stories، sheet، carousel، banner، أو video.
6. انقر على إنشاء رسالة In-App.

يُفتح المحرر مع معاينة مباشرة على الهاتف المحمول على اليمين وحقول القالب على اليسار، مجمعة في المحتوى (Content)، الإعدادات (Config)، والإجراءات (Actions). ما تراه في كل مجموعة يعتمد على نوع العرض الذي اخترته.

تكوين نوع العرض

تنبيه

تتيح لك القائمة المنسدلة نوع العرض (Display type) في أعلى المحرر تبديل الأنواع في أي وقت، لكن التبديل يعيد تعيين جميع حقول المحتوى (Content) والإعدادات (Config) والإجراءات (Actions) أدناه إلى قيمها الافتراضية للنوع الجديد. املأ المحتوى فقط بعد أن تستقر على نوع معين.

Modal

بطاقة في المنتصف، يمكن عرضها اختياريًا فوق خلفية معتمة.

1. تحت المحتوى (Content)، أضف عنوانًا ورسالة، لكل منهما لون نص خاص به، بالإضافة إلى صورة اختيارية. انظر إضافة صورة.
2. تحت الإعدادات (Config)، قم بتعيين لون خلفية البطاقة. هذا يملأ البطاقة خلف النص والصورة.
3. قم بتشغيل زر الإغلاق (Close button) إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من إغلاق الرسالة دون النقر على زر.
4. قم بتشغيل تعتيم الخلفية (Dim background) لتعتيم الشاشة خلف البطاقة والحفاظ على التركيز على رسالتك.
5. تحت الإجراءات (Actions)، أضف زرًا واحدًا أو أكثر. انظر تكوين الأزرار.

Fullscreen

صورة غلاف تمتد من الحافة إلى الحافة مع نص وأزرار في الأعلى. املأ هذه الحقول في اللوحة اليسرى:

1. تحت المحتوى (Content)، أضف صورة غلاف، بالإضافة إلى عنوان ورسالة، لكل منهما لون نص خاص به. انظر إضافة صورة.
2. تحت الإعدادات (Config)، قم بتعيين لون الغلاف. يظهر أثناء تحميل صورة الغلاف، أو بمفرده إذا تركت حقل الصورة فارغًا.
3. قم بتشغيل زر الإغلاق (Close button) إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من إغلاق الرسالة دون النقر على زر.
4. تحت الإجراءات (Actions)، أضف زرًا واحدًا أو أكثر. انظر تكوين الأزرار.

Stories

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

1. املأ حقول الصورة (Image) والعنوان (Title) والرسالة (Message) للشريحة الأولى (لكل منها لون نص خاص به). انظر إضافة صورة.
2. قم بتعيين الثواني (Seconds) للمدة التي تظل فيها الشريحة على الشاشة قبل الانتقال. القيمة الافتراضية هي 5. أدخل قيمة من 1 إلى 30. القيم خارج هذا النطاق تمنع الحفظ (Save) مع ظهور خطأ تحقق.
3. اختياريًا، انقر على إضافة (Add) داخل الشريحة لمنحها زر CTA خاص بها. انظر تكوين الأزرار.

4. انقر على إضافة (Add) أسفل الشريحة الأخيرة لإضافة شريحة أخرى، ثم كرر الخطوات من 1 إلى 3 لها.
5. تحت الإعدادات (Config)، قم بتشغيل التكرار (Loop) إذا كنت تريد أن تبدأ القصة مرة أخرى من الشريحة الأولى بعد انتهاء الأخيرة.
6. قم بتشغيل زر الإغلاق (Close button) إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من الخروج قبل تشغيل جميع الشرائح.

مثال على شكل القصة النهائية للمستخدم

Sheet

لوحة سفلية تنزلق لأعلى من الحافة السفلية للشاشة. مقبض في الأعلى يتيح للمستخدمين سحبها لأسفل لإغلاقها.

املأ هذه الحقول في اللوحة اليسرى:

1. تحت المحتوى (Content)، أضف عنوانًا ورسالة، لكل منهما لون نص خاص به، بالإضافة إلى صورة اختيارية. انظر إضافة صورة.
2. تحت الإعدادات (Config)، قم بتعيين لون خلفية اللوحة. هذا يملأ اللوحة خلف النص والصورة.
3. قم بتشغيل زر الإغلاق (Close button) إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من إغلاق اللوحة دون النقر على زر.
4. تحت الإجراءات (Actions)، أضف زرًا واحدًا أو أكثر. انظر تكوين الأزرار.

Carousel

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

1. املأ حقول الصورة (Image) والعنوان (Title) والرسالة (Message) للبطاقة الأولى (لكل منها لون نص خاص به). انظر إضافة صورة.
2. قم بتعيين الإجراء (Action) للبطاقة. اختر close لإغلاق الرسالة عندما ينقر المستخدم على البطاقة، أو url لفتح رابط (نفس خيارات تكوين الأزرار).
3. انقر على إضافة (Add) أسفل البطاقة الأخيرة لإضافة بطاقة أخرى، ثم كرر الخطوتين 1-2 لها.
4. قم بتشغيل زر الإغلاق (Close button) إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من مغادرة الـ carousel دون النقر على بطاقة.

تنبيه

إذا قمت بإيقاف تشغيل زر الإغلاق (Close button) وقمت بتعيين الإجراء (Action) لكل بطاقة على url، فلن يكون لدى المستخدم أي عنصر تحكم على الشاشة لإغلاق الـ carousel. سيؤدي النقر دائمًا إلى فتح رابط بدلاً من إغلاقه.

Banner

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

1. تحت المحتوى (Content)، أضف عنوانًا ورسالة، لكل منهما لون نص خاص به، بالإضافة إلى صورة صغيرة اختيارية. انظر إضافة صورة.
2. تحت الإعدادات (Config)، قم بتعيين الموضع (Position) إلى top أو bottom لتثبيت الشريط عند حافة الشاشة التي تريدها.
3. قم بتعيين الإغلاق التلقائي، ثانية (Auto-dismiss, sec) لإغلاق الشريط تلقائيًا بعد هذا العدد من الثواني. اتركه فارغًا للحفاظ على الشريط حتى يغلقه المستخدم.
4. قم بتعيين لون خلفية الشريط.
5. قم بتشغيل زر الإغلاق (Close button) إذا كنت تريد عنصر تحكم ✕ على الشريط.
6. تحت الإجراءات (Actions)، قم بتعيين الإجراء (Action) إلى close أو url. لا تحتوي الأشرطة على أزرار منفصلة. النقر في أي مكان على الشريط ينفذ هذا الإجراء. انظر تكوين الأزرار لسلوك close و url.

تنبيه

إذا قمت بإيقاف تشغيل زر الإغلاق (Close button)، وقمت بتعيين الإجراء (Action) إلى url، وتركت الإغلاق التلقائي (Auto-dismiss) فارغًا، فسيبقى الشريط على الشاشة دون أي طريقة لإغلاقه. سيؤدي النقر دائمًا إلى فتح الرابط بدلاً من إغلاقه.

Video

مشغل بملء الشاشة لرابط بث HLS (.m3u8) أو ملف .mp4 مباشر، مع عنوان ورسالة وأزرار اختيارية في الأعلى.

ملاحظة

الفيديو متاح على نظام iOS فقط في الوقت الحالي. على نظام Android، لن يتم عرض قالب يستخدم نوع العرض هذا. انظر دعم المنصات لمزيد من التفاصيل.

1. تحت المحتوى (Content)، قم بتعيين عنوان URL للفيديو (Video URL) (مطلوب) إلى رابط HTTPS مطلق لملف .m3u8 أو .mp4. اختياريًا، أضف صورة ملصق (Poster) تظهر قبل بدء التشغيل، وصورة احتياطية (Fallback image) تظهر إذا تعذر تشغيل الفيديو.
2. أضف عنوانًا ورسالة، لكل منهما لون نص خاص به.
3. تحت الإعدادات (Config)، قم بتشغيل التكرار (Loop) لإعادة تشغيل الفيديو بعد انتهائه.
4. قم بتشغيل صامت (Muted) لبدء التشغيل مع إيقاف الصوت.
5. قم بتشغيل زر الإغلاق (Close button) إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من إغلاق الرسالة دون انتظار انتهاء الفيديو.
6. تحت الإجراءات (Actions)، أضف زرًا واحدًا أو أكثر. انظر تكوين الأزرار.

تكوين حقول النص

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

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

إضافة محتوى ديناميكي

يدعم كل حقل نصي التخصيص باستخدام Tags و User ID.

1. انقر على تخصيص (Personalization) بجوار شريط أدوات الحقل.
2. تحت Tag، اختر tag أو User ID.
3. اختر معدل تنسيق (على سبيل المثال، CapitalizeFirst أو regular).
4. اختياريًا، أدخل قيمة Tag افتراضية (Default Tag Value).
5. انقر على إدراج (Insert).

يظهر الـ tag المدرج كشريحة في الحقل. يمكنك تغيير الـ tag والمعدل والقيمة الافتراضية قبل النقر على إدراج (Insert). يستخدم التخصيص نفس الـ tags والمعدلات والقيم الافتراضية مثل المحتوى الديناميكي.

نصيحة

للمنطق الشرطي (على سبيل المثال، عرض هذا النص فقط إذا كان الـ tag يساوي قيمة معينة)، اكتب صيغة Liquid مباشرة في الحقل.

عندما تنقر على حفظ (Save)، يتحقق Pushwoosh من المحتوى الديناميكي و Liquid في كل حقل نصي. إذا لم يتم تحليل حقل ما (على سبيل المثال، tag {% if %} غير مغلق)، يتم حظر الحفظ (Save) وتظهر رسالة منبثقة “المحتوى الديناميكي يحتوي على أخطاء” تشير إلى الحقل المعطوب واللغة. قم بإصلاحه هناك، ثم انقر على حفظ (Save) مرة أخرى.

ملاحظة

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

تكوين الأزرار

تستخدم أنواع modal و fullscreen وكل شريحة stories و sheet و video نفس حقول الأزرار:

• نص الزر (Button text) ولونه.
• الخلفية (Background)، لون الحدود (Border color)، ونصف قطر الحدود (Border radius).
• الإجراء (Action): اختر ما يحدث عندما ينقر المستخدم على الزر:
  • close: يغلق الرسالة.
  • url: يفتح الرابط الذي تدخله في الحقل الذي يظهر. استخدم عنوان ويب (على سبيل المثال، https://example.com) أو رابط عميق في تطبيقك (على سبيل المثال، myapp://product/123).

انقر على إضافة (Add) لإضافة زر آخر، أو على × على الزر لإزالته.

تنبيه

إذا قمت بإيقاف تشغيل زر الإغلاق (Close button) ولم تضف أي زر أيضًا، فلن يكون لدى المستخدم أي عنصر تحكم على الشاشة لإغلاق الرسالة.

إضافة صورة

يعمل كل حقل صورة (صورة، صورة غلاف، وصورة كل بطاقة أو شريحة) بنفس الطريقة. الصق عنوان URL لصورة مستضافة مباشرة في الحقل، أو انقر على اختر من Media store بجانبه لفتح Media store واختيار صورة قمت بتحميلها بالفعل. اختيار صورة من Media store يستبدل أي عنوان URL موجود حاليًا في الحقل.

إضافة الترجمات

بشكل افتراضي، تحتوي رسالة In-App الأصلية على لغة واحدة. لإضافة المزيد:

ملاحظة

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

1. انقر على + بجوار محدد اللغة في الشريط العلوي.
2. حدد اللغات لإضافتها وانقر على تطبيق (Apply).

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

ملاحظة

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

حفظ القالب

انقر على حفظ (Save) في أعلى اليمين لتثبيت تغييراتك.

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

استخدامه في حملة

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

يمكنك استخدامه لـ:

• إرسال رسالة In-App فورية
• إضافة خطوة رسالة In-App إلى Customer Journey
• فتح رسالة In-App عندما ينقر المستخدم على إشعار push

ملاحظة

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