إنشاء رسائل 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 SDK 7.2.0+ أو Android SDK 6.11.0+.

أطر العمل متعددة المنصات

يتم شحن وحدة الـ in-app الأصلية بشكل مختلف حسب حزمة التكنولوجيا التي تستخدمها:

• يقوم Flutter بتضمين وحدة الـ in-app الأصلية تلقائيًا. لا حاجة لإعداد إضافي بخلاف إضافة Pushwoosh Flutter.
• لا تقوم React Native و Cordova و Capacitor و Unity و Expo بتضمين وحدة الـ in-app الأصلية. أضفها إلى مشروع Android/iOS الأساسي لتطبيقك بنفسك: pushwoosh-inapp-ui على Android، و PushwooshInApp على iOS. راجع دليل التكامل الخاص بإطار عملك لمعرفة كيفية إضافة الوحدات الأصلية إلى مشروعك.
• الويب غير مدعوم. يتم عرض رسائل In-App الأصلية من خلال Android و iOS SDKs، ولا يحتوي Web SDK على وحدة in-app أصلية.

إنشاء قالب in-app أصلي

1. اذهب إلى المحتوى ← رسائل In-App.
2. انقر على السهم بجانب إنشاء in-app واختر in-app أصلي. يفتح المحرر الأصلي مباشرة.
3. أدخل اسمًا للقالب.
4. في نوع العرض أعلى المحرر، اختر نوع العرض: modal، fullscreen، stories، sheet، carousel، banner، أو video. راجع تكوين نوع العرض لمعرفة ما يحتاجه كل نوع.

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

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

تنبيه

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

Modal

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

1. تحت المحتوى، أضف عنوانًا ورسالة، لكل منهما لون نص خاص به، بالإضافة إلى صورة اختيارية. انظر إضافة صورة.
2. تحت الإعدادات، قم بتعيين لون خلفية البطاقة. هذا يملأ البطاقة خلف النص والصورة.
3. قم بتشغيل زر الإغلاق إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من إغلاق الـ in-app دون النقر على زر.
4. قم بتشغيل تعتيم الخلفية لتغميق الشاشة خلف البطاقة والحفاظ على التركيز على رسالتك.
5. تحت الإجراءات، أضف زرًا واحدًا أو أكثر. انظر تكوين الأزرار.

Fullscreen

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

1. تحت المحتوى، أضف صورة غلاف، بالإضافة إلى عنوان ورسالة، لكل منهما لون نص خاص به. انظر إضافة صورة.
2. تحت الإعدادات، قم بتعيين لون الغلاف. يظهر أثناء تحميل صورة الغلاف، أو بمفرده إذا تركت حقل الصورة فارغًا.
3. قم بتشغيل زر الإغلاق إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من إغلاق الـ in-app دون النقر على زر.
4. تحت الإجراءات، أضف زرًا واحدًا أو أكثر. انظر تكوين الأزرار.

Stories

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

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

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

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

Sheet

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

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

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

Carousel

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

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

تنبيه

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

Banner

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

1. تحت المحتوى، أضف عنوانًا ورسالة، لكل منهما لون نص خاص به، بالإضافة إلى صورة صغيرة اختيارية. انظر إضافة صورة.
2. تحت الإعدادات، قم بتعيين الموضع إلى top أو bottom لتثبيت اللافتة عند حافة الشاشة التي تريدها.
3. قم بتعيين إغلاق تلقائي، ثانية لإغلاق اللافتة تلقائيًا بعد هذا العدد من الثواني. اتركه فارغًا لإبقاء اللافتة حتى يغلقها المستخدم.
4. قم بتعيين لون الخلفية للشريط.
5. قم بتشغيل زر الإغلاق إذا كنت تريد عنصر تحكم ✕ على اللافتة.
6. تحت الإجراءات، قم بتعيين الإجراء إلى close أو url. لا تحتوي اللافتات على أزرار منفصلة. النقر في أي مكان على اللافتة ينفذ هذا الإجراء. انظر تكوين الأزرار لسلوك close و url.

تنبيه

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

Video

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

ملاحظة

يحتاج الفيديو إلى iOS SDK 7.2.0+ أو Android SDK 6.11.0+. على إصدار أقدم من Android SDK، لن يتم عرض قالب يستخدم نوع العرض هذا. انظر دعم المنصات لمزيد من التفاصيل.

1. تحت المحتوى، قم بتعيين رابط الفيديو (مطلوب) إلى رابط HTTPS مطلق لملف .m3u8 أو .mp4. اختياريًا، أضف صورة ملصق تظهر قبل بدء التشغيل، وصورة احتياطية تظهر إذا تعذر تشغيل الفيديو.
2. أضف عنوانًا ورسالة، لكل منهما لون نص خاص به.
3. تحت الإعدادات، قم بتشغيل تكرار لإعادة تشغيل الفيديو بعد انتهائه.
4. قم بتشغيل كتم الصوت لبدء التشغيل مع إيقاف الصوت.
5. قم بتشغيل زر الإغلاق إذا كنت تريد عنصر تحكم ✕ حتى يتمكن المستخدمون من إغلاق الـ in-app دون انتظار انتهاء الفيديو.
6. تحت الإجراءات، أضف زرًا واحدًا أو أكثر. انظر تكوين الأزرار.

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

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

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

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

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

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

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

نصيحة

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

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

ملاحظة

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

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

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

• نص الزر ولونه.
• الخلفية، لون الحدود، ونصف قطر الحدود.
• الإجراء: اختر ما يحدث عندما ينقر المستخدم على الزر:
  • close: يغلق الـ in-app.
  • url: يفتح الرابط الذي تدخله في الحقل الذي يظهر. استخدم عنوان ويب (على سبيل المثال، https://example.com) أو رابطًا عميقًا في تطبيقك (على سبيل المثال، myapp://product/123).

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

تنبيه

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

إضافة صورة

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

إضافة باركود

بجوار اختر من مخزن الوسائط، انقر على إنشاء باركود لفتح درج يولد كود Code 128 أو EAN-13 أو EAN-8 أو UPC-A أو QR code قابل للمسح ويكتب الرابط الناتج في الحقل:

• الكود. القيمة المراد تشفيرها: إما كود ثابت، مثل SAVE20، أو device tag، مثل {Coupon|String|} أو {LoyaltyCardNumber|String|}، بحيث يرى كل مستلم الكود الخاص به. يتم ملء device tag بالقيمة الحقيقية للمستلم مباشرة على جهازه، قبل ظهور الـ in-app مباشرة. الافتراضي هو {Coupon|String|}.

• الترميز. اختر تنسيق الباركود: Code 128 و EAN-13 و EAN-8 و UPC-A هي باركودات تجزئة قياسية تقرأها الماسحات الضوئية المحمولة، و QR هو كود مربع يمكن لأي كاميرا هاتف مسحه ضوئيًا.
• تصحيح الأخطاء. يظهر فقط بعد تعيين الترميز إلى QR. يمكن أن تتعرض أكواد QR في العالم الحقيقي للخدش أو التشويش أو التغطية الجزئية بشعار، وتصحيح الأخطاء هو معلومات إضافية مدمجة في الكود بحيث لا يزال يمسح ضوئيًا على الرغم من هذا الضرر. اختر مقدار الضرر الذي يمكن أن يتحمله: L أو M أو Q أو H، من الأقل إلى الأكثر قوة. المستويات الأعلى تتحمل المزيد من الضرر ولكنها تنتج كودًا أكثر كثافة وازدحامًا. الافتراضي هو M.

• طباعة الكود بالأرقام. عرض القيمة تحت الكود.

عندما يكون الكود هو device tag، تستبدل المعاينة قيمة عينة، حيث لا يمكنها حل tag مستلم حقيقي. الكود الثابت، مثل SAVE20، يتم معاينته تمامًا كما تم إدخاله.

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

إضافة ترجمات

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

ملاحظة

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

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

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

ملاحظة

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

حفظ القالب

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

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

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

يظهر قالب in-app الأصلي في منتقي القوالب مع قوالب in-app الأخرى الخاصة بك.

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

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

ملاحظة

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