انتقل إلى المحتوى

بنية قوالب In-App الأصلية

يتم عرض رسائل In-App الأصلية مباشرة بواسطة SDK. لا يتم استخدام WebView. بدلاً من صفحة index.html، يحمل مورد ZIP ملف native-config.json الذي يصف الرسالة كبيانات منظمة (نوع التخطيط، النصوص، الألوان، الصور، الأزرار). يقرأ SDK هذا الملف ويرسم العرض الأصلي المطابق، مما يوفر رسومًا متحركة أكثر سلاسة وأداء أفضل من صفحة ويب مضمنة.

يوثق هذا الدليل مخطط native-config.json: الحقول والأنواع والأمثلة لكل نوع عرض. للتنسيق الكلاسيكي القائم على HTML، راجع بنية قوالب الوسائط الغنية.

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

Anchor link to

تتطلب رسائل In-App الأصلية:

  • iOS: SDK 7.2.0 أو أحدث (7.2.1+ للبانر، الكاروسيل، والورقة)
  • Android: SDK 6.10.0 أو أحدث (6.10.1+ للبانر، الكاروسيل، والورقة)

ليس كل نوع عرض متاحًا على كلا المنصتين بعد. تحقق من دعم المنصات قبل الاعتماد على تنسيق معين.

دعم المنصات

Anchor link to
نوع العرض
iOS
Android
modal✅ 7.2.0+✅ 6.10.0+
fullscreen✅ 7.2.0+✅ 6.10.0+
stories✅ 7.2.0+✅ 6.10.0+
banner✅ 7.2.1+✅ 6.10.1+
carousel✅ 7.2.1+✅ 6.10.1+
sheet✅ 7.2.1+✅ 6.10.1+
videoغير متوفر بعد
pipغير متوفر بعد
scratchcardغير متوفر بعد
spinwheelغير متوفر بعد

بنية القالب

Anchor link to

قالب In-App الأصلي هو أرشيف ZIP، تمامًا مثل قالب الوسائط الغنية العادي، باستثناء أن الجذر يحتوي على ملف native-config.json بدلاً من index.html:

<template>.zip
├── native-config.json ← مطلوب، التخطيط والمحتوى
├── pushwoosh.json ← اختياري، الترجمة (انظر أدناه)

يجب أن تكون الصور ومقاطع الفيديو المشار إليها من native-config.json (image, poster, fallback, url في pip/video) عناوين URL مطلقة ببروتوكول HTTPS. يقوم SDK بتحميلها عبر الشبكة. لا يقرأ الملفات المحلية من الأرشيف.

التكوين نفسه هو كائن JSON واحد:

{ "displayType": "<type>", "<type>": { /* كتلة المحتوى لهذا النوع */ } }

يختار displayType أحد التنسيقات العشرة أدناه. يحتوي الكائن الموجود تحت المفتاح المطابق على محتوى هذا التنسيق. يعتبر التكوين الذي يحتوي على displayType غير معروف، أو كتلة محتوى مفقودة، أو قائمة مطلوبة فارغة (items لـ carousel/stories، segments لـ spinwheel) غير صالح. يتخطى SDK عرضه بدلاً من عرض تخطيط معطوب.

إعدادات التسليم (تواريخ البدء/الانتهاء وتحديد تكرار العرض) ليست جزءًا من native-config.json. يتم تكوينها بنفس طريقة أي رسالة In-App أخرى، في خطوة إعدادات العرض الخاصة بالحملة.

يحتاج تحديد تكرار العرض بالإضافة إلى ذلك إلى موافقة صريحة من جانب SDK ليصبح ساري المفعول على رسائل In-App الأصلية. راجع تكامل SDK.

الألوان

Anchor link to

كل قيمة لون هي سلسلة CSS ست عشرية: #RGB، #RGBA، #RRGGBB، أو #RRGGBBAA. علامة # مطلوبة في جميع الأشكال الأربعة.

الكتل البنائية المشتركة

Anchor link to

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

الحقلالنوعمطلوبالوصف
textstringنعممحتوى النص
colorstringنعملون النص
{ "text": "Spin for a garage perk", "color": "#FFFFFFFF" }
الحقلالنوعمطلوبالوصف
colorstringنعملون الإطار
radiusnumberنعمنصف قطر الزاوية، بالنقاط
{ "color": "#0E72E5FF", "radius": 12 }

صورة اختيارية فوق لون خلفية. تستخدم بواسطة fullscreen و scratchcard.

الحقلالنوعمطلوبالوصف
imagestringلاعنوان URL لصورة الغلاف
backgroundstringنعملون الخلفية المعروض تحت (أو بدلاً من) الصورة
{ "image": "https://example.com/cover.jpg", "background": "#1A1A1EFF" }

اتحاد مميز على type:

المتغيرالحقولالوصف
{ "type": "close" }لا شيءيغلق رسالة In-App
{ "type": "url", "url": string }url مطلوبيفتح عنوان URL أو رابطًا عميقًا
{ "type": "url", "url": "pushwoosh://sale" }
الحقلالنوعمطلوبالوصف
textTextنعمتسمية الزر
backgroundstringنعملون تعبئة الزر
borderBorderنعمإطار الزر
actionActionنعمالإجراء الذي يتم تنفيذه عند النقر

يستخدم spinButton (spinwheel) و revealButton (scratchcard) نفس الشكل بدون action. سلوكهما (تدوير العجلة، كشف البطاقة) مدمج.

{
"text": { "text": "Book a test drive", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://sale" }
}

لوحة الجائزة التي يعرضها scratchcard و spinwheel. تحتوي المكافأة الصالحة على title أو code.

الحقلالنوعمطلوبالوصف
titleTextلاعنوان المكافأة
messageTextلاوصف المكافأة
codestringلارمز ترويجي، يتم عرضه مع زر نسخ
buttonButtonلازر تأكيد مع إجراء خاص به
{
"title": { "text": "20% off detailing", "color": "#111111FF" },
"message": { "text": "Valid for any full-detail booking this month.", "color": "#555555FF" },
"code": "APEX20",
"button": {
"text": { "text": "Book detailing", "color": "#FFFFFFFF" },
"background": "#B3227CFF",
"border": { "color": "#B3227CFF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://detailing" }
}
}

أنواع العرض

Anchor link to

شريط مدمج مثبت في الحافة العلوية أو السفلية من الشاشة.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
positiontop | bottomنعمحافة الشاشة
backgroundstringنعملون خلفية الشريط
imagestringلاصورة مصغرة على اليسار
titleTextلاعنوان من سطر واحد، يتم اقتطاعه بنقاط حذف
messageTextلانص أساسي، يصل إلى سطرين
actionActionنعميتم تنفيذه عند النقر على الشريط نفسه
autoDismissnumberلاإغلاق تلقائي بعد هذا العدد من الثواني. اتركه فارغًا لإبقائه حتى يتم إغلاقه
{
"displayType": "banner",
"banner": {
"showClose": true,
"position": "bottom",
"background": "#4B5057FF",
"image": "https://example.com/thumb.jpg",
"title": { "text": "Alpine A110 just dropped", "color": "#FFFFFFFF" },
"message": { "text": "The featherweight icon — tap to see the build", "color": "#FFFFFFFF" },
"action": { "type": "url", "url": "pushwoosh://product/x6f" },
"autoDismiss": 6
}
}

مجموعة من البطاقات بملء الشاشة قابلة للتمرير مع نقاط مؤشر للصفحة.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
itemsItem[]نعمالبطاقات (1 على الأقل)

عنصر الكاروسيل:

الحقلالنوعمطلوبالوصف
titleTextلاعنوان البطاقة
messageTextلاعنوان فرعي للبطاقة
imagestringلاصورة البطاقة
actionActionلايتم تنفيذه عند النقر على البطاقة
{
"displayType": "carousel",
"carousel": {
"showClose": true,
"items": [
{
"image": "https://example.com/card-1.jpg",
"title": { "text": "AMG GT R", "color": "#FFFFFFFF" },
"message": { "text": "585 hp biturbo V8 — just landed", "color": "#FFFFFFFF" },
"action": { "type": "url", "url": "pushwoosh://product/n6fx" }
},
{
"image": "https://example.com/card-2.jpg",
"title": { "text": "Alpine A110", "color": "#FFFFFFFF" },
"message": { "text": "Featherweight icon — limited allocation", "color": "#FFFFFFFF" },
"action": { "type": "url", "url": "pushwoosh://product/x6f" }
}
]
}
}

fullscreen

Anchor link to

صورة غلاف من الحافة إلى الحافة مع نص وأزرار في الأعلى.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
coverCoverنعمصورة الخلفية واللون
titleTextلاالعنوان
messageTextلاالنص الأساسي
buttonsButton[]نعمالأزرار في الأسفل (يمكن أن تكون فارغة)
{
"displayType": "fullscreen",
"fullscreen": {
"showClose": true,
"cover": { "image": "https://example.com/hero.jpg", "background": "#1A1A1EFF" },
"title": { "text": "Pure Maranello", "color": "#FFFFFFFF" },
"message": { "text": "The prancing horse, reimagined.", "color": "#EBEBEBFF" },
"buttons": [
{
"text": { "text": "Reserve now", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 8 },
"action": { "type": "url", "url": "pushwoosh://sale" }
},
{
"text": { "text": "Not now", "color": "#FFFFFFFF" },
"background": "#00000000",
"border": { "color": "#FFFFFF99", "radius": 8 },
"action": { "type": "close" }
}
]
}
}

بطاقة في المنتصف.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
dimBackgroundbooleanنعمتعتيم الشاشة خلف البطاقة
backgroundstringنعملون خلفية البطاقة
imagestringلاصورة الغلاف
titleTextلاالعنوان
messageTextلاالنص الأساسي
buttonsButton[]نعمالأزرار أسفل النص (يمكن أن تكون فارغة)
{
"displayType": "modal",
"modal": {
"showClose": true,
"dimBackground": true,
"background": "#FFFFFFFF",
"image": "https://example.com/cover.jpg",
"title": { "text": "The GT R has landed", "color": "#4B5057FF" },
"message": { "text": "585 hp — now in the showroom.", "color": "#4B5057FF" },
"buttons": [
{
"text": { "text": "Book a test drive", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://sale" }
},
{
"text": { "text": "Not now", "color": "#4B5057FF" },
"background": "#FFFFFFFF",
"border": { "color": "#4B5057FF", "radius": 12 },
"action": { "type": "close" }
}
]
}
}

نافذة فيديو عائمة “صورة داخل صورة” مثبتة في زاوية الشاشة.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
positionbottom-right | bottom-left | top-right | top-leftنعمزاوية الشاشة
loopbooleanنعمتكرار التشغيل
mutedbooleanنعمالبدء بكتم الصوت
urlstringنعمعنوان URL للفيديو
posterstringلاملصق يظهر قبل بدء التشغيل
fallbackstringلاصورة تظهر إذا فشل تشغيل الفيديو
widthnumberنعمعرض النافذة كنسبة مئوية من عرض الشاشة، محصورة بين 15-70
aspectRationumberنعمنسبة ارتفاع النافذة إلى عرضها
borderRadiusnumberلانصف قطر زاوية النافذة، بالنقاط
actionActionلايتم تنفيذه عند النقر على النافذة نفسها

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

{
"displayType": "pip",
"pip": {
"showClose": true,
"position": "bottom-right",
"loop": true,
"muted": true,
"url": "https://example.com/teaser.mp4",
"poster": "https://example.com/poster.jpg",
"width": 40,
"aspectRatio": 0.5625,
"action": { "type": "url", "url": "pushwoosh://product/x6f" }
}
}

scratchcard

Anchor link to

بطاقة مع مكافأة مخفية تحت طبقة رقائق قابلة للخدش.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
backgroundstring | string[]نعملون خلفية البطاقة، أو نقاط التدرج
revealThresholdnumberنعمجزء من الرقاقة يجب خدشه (0-1) قبل كشف المكافأة
coverCoverنعمطبقة الرقاقة. بدون image، يظهر تلميح “اخدش هنا” على لون الخلفية
revealButtonButton (no action)لازر “كشف فوري”
titleTextلاالعنوان
messageTextلاالنص الأساسي
rewardRewardنعمالجائزة المخفية تحت الرقاقة
{
"displayType": "scratchcard",
"scratchcard": {
"showClose": true,
"background": ["#3A1C71FF", "#B3227CFF", "#E0503AFF"],
"revealThreshold": 0.55,
"cover": { "background": "#C9CDD6FF" },
"revealButton": {
"text": { "text": "Reveal without scratching", "color": "#3A1C71FF" },
"background": "#F2DFF5FF",
"border": { "color": "#F2DFF5FF", "radius": 10 }
},
"title": { "text": "Your loyalty reward", "color": "#FFFFFFFF" },
"message": { "text": "Scratch the foil to reveal this week's garage perk.", "color": "#F2DFF5FF" },
"reward": {
"title": { "text": "20% off detailing", "color": "#111111FF" },
"message": { "text": "Valid for any full-detail booking this month.", "color": "#555555FF" },
"code": "APEX20",
"button": {
"text": { "text": "Book detailing", "color": "#FFFFFFFF" },
"background": "#B3227CFF",
"border": { "color": "#B3227CFF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://detailing" }
}
}
}
}

بطاقة مثبتة في الحافة السفلية، مع مقبض سحب.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
dimBackgroundbooleanنعمتعتيم الشاشة خلف الورقة
backgroundstringنعملون خلفية الورقة
imagestringلاصورة الغلاف
titleTextلاالعنوان
messageTextلاالنص الأساسي
buttonsButton[]نعمالأزرار أسفل النص (يمكن أن تكون فارغة)
{
"displayType": "sheet",
"sheet": {
"showClose": true,
"dimBackground": true,
"background": "#FFFFFFFF",
"image": "https://example.com/cover.jpg",
"title": { "text": "Your quote is ready", "color": "#000000FF" },
"message": { "text": "Guaranteed buyout for your A110: $68,500.", "color": "#000000FF" },
"buttons": [
{
"text": { "text": "Get guaranteed quote", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://sale" }
}
]
}
}

عجلة حظ مع شرائح مرجحة وزر محور مركزي.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
backgroundstring | string[]نعملون خلفية البطاقة، أو نقاط التدرج
winIndexnumberنعمفهرس (يبدأ من 0) للشريحة الفائزة
spinButtonButton (no action)نعمزر المحور المركزي
titleTextلاالعنوان
messageTextلاالنص الأساسي
rewardRewardنعممكافأة الدورة الفائزة (احتياطية للشرائح التي لا تملك مكافأة خاصة بها)
loseTitleTextلاعنوان يظهر عند الخسارة
segmentsSegment[]نعمشرائح العجلة (يتوقع SDK 2-12)

Segment:

الحقلالنوعمطلوبالوصف
messageTextنعمتسمية الشريحة
colorstringلالون الشريحة. اتركه فارغًا لاستخدام لوحة ألوان احتياطية تطبق حول العجلة
weightnumberنعمحجم الشريحة النسبي
rewardRewardلامكافأة خاصة بالشريحة
{
"displayType": "spinwheel",
"spinwheel": {
"showClose": true,
"background": ["#1B1B46FF", "#5B2B8FFF", "#B0338AFF"],
"winIndex": 1,
"spinButton": {
"text": { "text": "SPIN", "color": "#1B1B46FF" },
"background": "#F2C94CFF",
"border": { "color": "#D9A02BFF", "radius": 36 }
},
"title": { "text": "Spin for a garage perk", "color": "#FFFFFFFF" },
"message": { "text": "One spin — every slice wins this week.", "color": "#E3D9F2FF" },
"reward": {
"title": { "text": "You won a garage perk!", "color": "#FFFFFFFF" },
"code": "APEXPERK",
"button": {
"text": { "text": "Claim", "color": "#FFFFFFFF" },
"background": "#5B2B8FFF",
"border": { "color": "#5B2B8FFF", "radius": 12 },
"action": { "type": "close" }
}
},
"segments": [
{ "message": { "text": "5% off", "color": "#FFFFFFFF" }, "color": "#5856D6FF", "weight": 1 },
{
"message": { "text": "20% off", "color": "#FFFFFFFF" },
"color": "#30B0C7FF",
"weight": 1,
"reward": {
"title": { "text": "20% off your next service", "color": "#FFFFFFFF" },
"code": "SPIN20",
"button": {
"text": { "text": "Claim service deal", "color": "#FFFFFFFF" },
"background": "#30B0C7FF",
"border": { "color": "#30B0C7FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://service" }
}
}
},
{ "message": { "text": "Free wash", "color": "#FFFFFFFF" }, "color": "#FF2D55FF", "weight": 1 }
]
}
}

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

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
loopbooleanنعمإعادة التشغيل من الشريحة الأولى بعد الأخيرة
itemsItem[]نعمالشرائح (1 على الأقل)

عنصر القصص:

الحقلالنوعمطلوبالوصف
titleTextلاالعنوان
messageTextلاالعنوان الفرعي
imagestringلاصورة خلفية الشريحة
buttonsButton[]نعمأزرار الدعوة لاتخاذ إجراء في الأسفل (يمكن أن تكون فارغة)
durationnumberنعممدة الشريحة، بالثواني
{
"displayType": "stories",
"stories": {
"showClose": true,
"loop": false,
"items": [
{
"image": "https://example.com/slide-1.jpg",
"title": { "text": "AMG GT R", "color": "#FFFFFFFF" },
"message": { "text": "The Green Hell special", "color": "#FFFFFFFF" },
"buttons": [
{
"text": { "text": "Configure yours", "color": "#FFFFFFFF" },
"background": "#0F0F0FFF",
"border": { "color": "#0F0F0FFF", "radius": 26 },
"action": { "type": "url", "url": "pushwoosh://product/n6fx" }
}
],
"duration": 4
},
{
"image": "https://example.com/slide-2.jpg",
"title": { "text": "Alpine A110", "color": "#FFFFFFFF" },
"message": { "text": "The featherweight legend, reborn", "color": "#FFFFFFFF" },
"buttons": [],
"duration": 4
}
]
}
}

فيديو بملء الشاشة مع نص وأزرار في الأعلى.

الحقلالنوعمطلوبالوصف
showClosebooleanنعمإظهار زر إغلاق (✕)
loopbooleanنعمتكرار التشغيل
mutedbooleanنعمالبدء بكتم الصوت
urlstringنعمعنوان URL للفيديو (HLS أو MP4)
posterstringلاملصق يظهر قبل بدء التشغيل
fallbackstringلاصورة تظهر إذا فشل تشغيل الفيديو
titleTextلاالعنوان
messageTextلاالنص الأساسي
buttonsButton[]نعمأزرار الدعوة لاتخاذ إجراء في الأسفل (يمكن أن تكون فارغة)
{
"displayType": "video",
"video": {
"showClose": true,
"loop": true,
"muted": true,
"url": "https://example.com/reveal.mp4",
"poster": "https://example.com/poster.jpg",
"title": { "text": "The reveal", "color": "#FFFFFFFF" },
"message": { "text": "Watch it move before anyone else.", "color": "#EBEBEBFF" },
"buttons": [
{
"text": { "text": "Shop the lineup", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 14 },
"action": { "type": "url", "url": "pushwoosh://sale" }
}
]
}
}

الترجمة

Anchor link to

تعيد رسائل In-App الأصلية استخدام نفس آلية الترجمة تمامًا مثل وسائط HTML الغنية: يمكن أن تحمل قيم السلاسل النصية في native-config.json عناصر نائبة {{key|type|default}}، وتوجد الترجمات في ملف pushwoosh.json بجانبه، بنفس التنسيق الموضح في إضافة pushwoosh.json. يمكن أن يظهر العنصر النائب في أي حقل سلسلة نصية، على أي عمق (عنوان، تسمية زر، عنوان URL لصورة، عنوان URL لإجراء).

المحتوى الديناميكي

Anchor link to

تقبل حقول النص — title، message، text للزر، reward.title/reward.message، وmessage للعنصر/الشريحة — أيضًا المحتوى الديناميكي وبنية Liquid: نفس الاختصار {Tag|modifier|default} وعلامات Liquid {% %}/{{ }} المستخدمة في محتوى الإشعارات والبريد الإلكتروني. يقوم Pushwoosh بحل هذه لكل مستلم قبل إرسال الرسالة، بنفس الطريقة التي يفعلها مع الإشعارات والبريد الإلكتروني.

عند إنشاء قالب في محرر In-App الأصلي في لوحة التحكم، يتم عرض الرموز المدرجة كرقائق في المعاينة المباشرة، ويتم حظر الحفظ إذا لم يتم تحليل Liquid في حقل نصي.

تكامل SDK

Anchor link to

بمجرد إضافة وحدة SDK لرسائل In-App الأصلية إلى تطبيقك، يتم عرض الرسائل تلقائيًا. لا يلزم وجود كود إضافي لإظهار الرسائل التي يتم تشغيلها بواسطة إشعار، أو Customer Journey، أو postEvent، أو صندوق الوارد.

يعرض SDK أيضًا واجهة برمجة تطبيقات صغيرة للتحكم اليدوي:

  • iOS: Pushwoosh.inApp (وحدة PushwooshInApp)
  • Android: PushwooshInAppUi (وحدة pushwoosh-inapp-ui)
القدرةiOSAndroid
عرض تكوين مباشرة (للاختبار/الاستخدام اليدوي)Pushwoosh.inApp.present(config)PushwooshInAppUi.present(configJson)
مراقبة دورة الحياة والنقراتdelegate (PWInAppMessageDelegate)delegate (InAppMessageDelegate)
التحقق مما إذا كان هناك شيء على الشاشةisPresentingisPresenting
إغلاق كل ما هو معروض حاليًاdismiss()dismiss()
إيقاف / استئناف العرضisPausedisPaused
فرض تحديد maxDisplays / cooldownsetFrequencyCapEnabled(_:)setFrequencyCapEnabled(...)

استدعاءات المندوب (جميعها تنفذ على الخيط الرئيسي): shouldDisplay (أرجع false لقمع رسالة واحدة قبل ظهورها، على سبيل المثال على شاشة الدفع)، willPresent، didPresent، didClose، و clickedAction (تنفذ عندما ينقر المستخدم على إجراء url، قبل فتح عنوان URL).

يقوم iOS بالإضافة إلى ذلك بالإبلاغ عن rewardRevealed و rewardClaimed لقوالب scratchcard و spinwheel الممتعة.

// iOS
Pushwoosh.inApp.delegate = self
Pushwoosh.inApp.setFrequencyCapEnabled(true)
// Android
PushwooshInAppUi.delegate = this
PushwooshInAppUi.setFrequencyCapEnabled(true)