---
title: تخصيص الرحلة
description: اضبط الهوية البصرية للرحلة — الشعار، والألوان، والخلفية، وشكل الأزرار — مباشرة من بوابة IDCloud، مع معاينة فورية.
canonical: https://developer.unico.io/ar/dual-api/product-guide/portal-idcloud/settings/journey-customization
locale: ar
generated_by: markdown-export
---

تتيح لك ميزة **تخصيص الرحلة** تطبيق الهوية البصرية لعلامتك التجارية على رحلة التحقق من الهوية لدى
Unico — دون تذكرة دعم، ودون الاعتماد على فريق الدعم، مع ظهور النتيجة فورًا.

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

:::info
**لمن هذه الميزة:** العملاء الذين يستخدمون Web Journey مع نماذج التكامل iFrame أو Redirect
أو SDK.

**ما الذي يتغيّر للمستخدم النهائي:** الشاشة التي يراها خلال التحقق من الهوية تبدو الآن بهوية
علامتك التجارية.

**أين تجدها:** بوابة IDCloud ← الشريط الجانبي **الإعدادات** ← تبويب **التخصيص**.
:::

## قبل أن تبدأ

### صلاحية الوصول

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

### كيف يُطبَّق الضبط

| | |
| :- | :- |
| **النطاق** | يُطبَّق التخصيص لكل **فرع (branch)** ولكل **نموذج تكامل**. تعمل نماذج iFrame و Redirect/SDK بضبط مستقل — نشر أحدهما لا يؤثر على الآخر. |
| **متى يصبح ساري المفعول** | فورًا بعد النشر، بالنسبة للرحلات **التي تبدأ من تلك اللحظة فصاعدًا**. تحتفظ الرحلات الجارية بالفعل بالمظهر السابق. |
| **إذا لم تُخصِّص** | تُحمَّل الرحلة بالسمة الافتراضية لـ Unico. |
| **نسخة الرحلة** | تعتمد المعاينة على تصميم **Web Journey v3.0**. في النسخ الأخرى، قد لا تعكس المعاينة النتيجة بدقة — في هذه الحالة، تواصل مع Unico لتحديث نسختك. |

### ما يجب تجهيزه

- **الشعار** بصيغة PNG، ويُفضَّل أن يكون بخلفية شفافة، بارتفاع لا يتجاوز **60 بكسل** وحجم لا
  يتجاوز **100 كيلوبايت**.
- **الرموز السداسية العشرية (hex)** لألوان علامتك التجارية (مثل `#1B3FA0`).

### ما هو قابل للضبط في تكاملك

بالإضافة إلى نموذج التكامل، يعتمد ما يظهر على الشاشة على **نسخة Web Journey** لتكاملك. وهذا هو
السبب الأكثر شيوعًا لعبارة "لا أرى هذا الحقل":

| الميزة | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect |
| :- | :-: | :-: | :-: | :-: | :-: | :-: |
| **الشعار** | ✅ | غير متوفر | غير متوفر | ✅ | ✅ | ✅ |
| **لون الخلفية** | — | — | — | — | — | ✅ |
| **لون خلفية الزر** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **لون نص الزر** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **زاوية حواف الزر** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **لون المحتوى** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |

باختصار: **لون الخلفية قابل للضبط فقط في Web Journey v3.0 عبر Redirect**، وفي iFrame لا يوجد
الشعار إلا في Web Journey v1.0. تعمل الألوان وشكل الأزرار في كل التركيبات.

:::info
إذا كنت لا تعرف النسخة التي تستخدمها، تحقق من ذلك مع جهة اتصال الـ Onboarding الخاصة بك أو مع دعم
Unico.
:::

## خطوة بخطوة

### الخطوة 1 — افتح تبويب التخصيص

في بوابة IDCloud، اضغط على **أيقونة الترس (الإعدادات)** في الشريط الجانبي. تُفتح الشاشة مباشرة
على تبويب **التخصيص**.

تحتوي شاشة الإعدادات على ثلاثة تبويبات — **التخصيص**، و**Webhook**، و**رمز QR**. يغطي هذا الدليل
الأول منها.

![شاشة الإعدادات، مع تمييز أيقونة الترس في الشريط الجانبي](/img/product-guide/journey-customization/en/01-settings-tab.png)

*شاشة الإعدادات مع تحديد تبويب التخصيص.*

### الخطوة 2 — اختر نموذج التكامل

في العمود الأيسر، اختر **iFrame** أو **Redirect أو SDK** — تتغيّر حقول النموذج حسب النموذج
المختار.

ستتعرف على الشاشة من خلال ثلاث مناطق: **محدد النموذج** على اليسار، و**النموذج (form)** في الوسط،
و**المعاينة المباشرة** على اليمين، التي تستجيب لكل تغيير قبل النشر.

**إذا كنت تستخدم النموذجين، عليك ضبط كلٍّ منهما.** فهما ضبطان مستقلان — اضبط وانشر أحدهما، ثم كرر
الأمر للآخر.

![شاشة التخصيص الكاملة: محدد النموذج، والنموذج، والمعاينة](/img/product-guide/journey-customization/en/02-integration-model.png)

*محدد iFrame / Redirect أو SDK، والنموذج، والمعاينة.*

### الخطوة 3 — رفع الشعار

:::warning
متوفر في **Redirect أو SDK**. وفي iFrame، فقط في Web Journey v1.0.
:::

اضغط على **إضافة شعار** واختر الملف. المتطلبات: صيغة **PNG**، بارتفاع أقصى **60 بكسل**، وحجم أقصى
**100 كيلوبايت**.

**استخدم صيغة PNG بخلفية شفافة.** بهذه الطريقة يعمل الشعار فوق أي لون خلفية — أما PNG بخلفية
بيضاء يتحول إلى مستطيل واضح بمجرد تلوين الخلفية. كما يُفضَّل استخدام النسخة الأفقية من الشعار:
فالمساحة المتاحة عريضة وقصيرة.

![حقل إضافة شعار، مع متطلبات الصيغة والارتفاع والحجم](/img/product-guide/journey-customization/en/03-customization-form.png)

*حقل "إضافة شعار" مع متطلبات الصيغة والارتفاع والحجم.*

### الخطوة 4 — ضبط الألوان

توجد أربعة حقول ألوان، مجمّعة في النموذج تحت **الخلفية**، و**الأزرار**، و**المحتوى**:

| الحقل | مكان ظهوره في الرحلة | القيمة الافتراضية | التوفر |
| :- | :- | :- | :- |
| **لون الخلفية** | خلفية شاشة الرحلة | `#F2F2F7` | **Web Journey v3.0 عبر Redirect** فقط |
| **الأزرار ← لون الخلفية** | تعبئة زر الإجراء (مثل "التقاط صورة سيلفي") | — | جميع النسخ |
| **الأزرار ← لون النص** | النص داخل الزر | — | جميع النسخ |
| **لون المحتوى** | العناوين والوصف (مثل "التحقق من الهوية") | `#000000` | جميع النسخ |

لأي منها، يمكنك **كتابة القيمة السداسية العشرية (hex)** (مثل `#1B3FA0`) أو **الضغط على عيّنة
اللون** الموجودة يسار الحقل لفتح أداة اختيار الألوان المرئية. في حقلي الخلفية والمحتوى، وما دمت
تركهما فارغين، تستخدم الرحلة القيمة الافتراضية المعروضة كنص توضيحي (placeholder) داخل الحقل نفسه.

**يُطبَّق لون الخلفية كتدرّج، لا كلون واحد ثابت.** الدرجة التي تضبطها هي أعلى التدرّج، وتصبح
الرحلة أغمق تدريجيًا نحو أسفل الشاشة. تؤدي الدرجات القاتمة جدًا إلى قاعدة شبه سوداء — اختر درجة
متوسطة إلى فاتحة إذا كنت تريد نتيجة موحّدة.

**استخدم اللون الأساسي لعلامتك التجارية لخلفية الزر.** فهو العنصر الذي يحتاج المستخدم للعثور عليه
أولًا؛ وإذا لم يكن بارزًا، تفقد الرحلة معدل التحويل.

**اختر الألوان الأربعة كمجموعة واحدة، لا واحدًا تلو الآخر.** فهي تؤثر في بعضها: خلفية قاتمة مع
لون محتوى أسود تجعل الرحلة غير قابلة للقراءة، وزر فاتح على بطاقة بيضاء قد يختفي تمامًا. اضبط
الأربعة معًا، وبعد ذلك فقط تحقق من النتيجة في المعاينة (الخطوة 6).

![حقول لون الخلفية، وألوان الأزرار، ولون المحتوى، مع النتيجة في المعاينة](/img/product-guide/journey-customization/en/04-colors.png)

*حقول لون الخلفية، ولون خلفية/نص الزر، ولون المحتوى، مع النتيجة في المعاينة.*

### الخطوة 5 — ضبط الأزرار

ثلاثة حقول تتحكم في زر الإجراء في الرحلة (مثل "التقاط صورة سيلفي"):

| الحقل | ما يفعله |
| :- | :- |
| **لون الخلفية** | لون تعبئة الزر |
| **لون النص** | لون النص داخل الزر |
| **زاوية الحواف (Border radius)** | درجة تدوير الزوايا، بالبكسل |

قيم مرجعية لـ **زاوية الحواف**:

- 0 ← زر مستطيل، بزوايا حادة
- من 8 إلى 16 ← زوايا مدوّرة بشكل خفيف
- 24 أو أكثر ← شكل حبة (pill)، مدوّر بالكامل

القيم التي تتجاوز نصف ارتفاع الزر لا تُغيّر النتيجة بعد ذلك — فشكل الحبة هو الحد الأقصى.

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

![حقل زاوية الحواف، مع انعكاس الزر في المعاينة](/img/product-guide/journey-customization/en/05-button-border-radius.png)

*لون الخلفية، ولون النص، وزاوية الحواف، مع انعكاس الزر في المعاينة.*

### الخطوة 6 — تحقق من المعاينة، على الهاتف المحمول وسطح المكتب

تتحدّث المعاينة على اليمين مع كل تغيير. استخدم محدد **هاتف محمول / سطح مكتب** في الأعلى للتحقق من
كلا الشكلين.

إذا كتبت قيمة لون غير صالحة — اسم لون، أو رمز سداسي عشري غير مكتمل — يظهر **حد أحمر** حول الحقل
ولا تُطبَّق القيمة على المعاينة. صحّح ذلك قبل الاستمرار.

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

![محدد الهاتف المحمول / سطح المكتب في لوحة المعاينة](/img/product-guide/journey-customization/en/06-live-preview.png)

*محدد الهاتف المحمول / سطح المكتب وحقل لون به قيمة غير صالحة مُميَّزة.*

### الخطوة 7 — النشر

يصبح زر **النشر** مفعّلًا بمجرد وجود تغيير معلّق.

- **النشر** يحفظ الضبط ويطبّقه على الرحلة.
- **إلغاء** يتجاهل كل ما قمت بتعديله ويُعيد الحقول إلى آخر حالة منشورة.
- للـ **رجوع إلى الإعدادات الافتراضية لـ Unico**، أفرغ حقول الألوان (لإعادة ظهور النص التوضيحي)،
  وأزل الشعار، ثم انشر.

**لا يوجد سجل للنسخ (version history).** إذا نشرت ضبطًا خاطئًا، فالحل هو تعديل القيم والنشر
مجددًا — لا توجد طريقة بضغطة واحدة لاستعادة النسخة السابقة. لهذا يهم التحقق من المعاينة في الخطوة
السابقة. وما دمت لم تنشر بعد، فإن الإلغاء يحل المشكلة.

### الخطوة 8 — تسجيل النطاقات المسموح بها

:::warning
متوفر فقط في نموذج **iFrame**.
:::

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

1. اضغط على **تكوين النطاقات**، في الزاوية العلوية اليمنى.

   ![زر تكوين النطاقات، مُميَّز](/img/product-guide/journey-customization/en/07-configure-domains-button.png)

2. تعرض اللوحة الجانبية **النطاقات المسجَّلة**، كل منها مع إجراءات **تعديل** (قلم) و**حذف** (سلة
   مهملات).

   ![لوحة تكوين النطاقات مع قائمة النطاقات المسجَّلة](/img/product-guide/journey-customization/en/08-domains-list.png)

3. لإضافة نطاق، اضغط على **إنشاء نطاق**، وأدخل النطاق، ثم اضغط على **حفظ**.

   ![نموذج إنشاء نطاق](/img/product-guide/journey-customization/en/09-create-domain.png)

أدخل النطاق مع بروتوكوله (`https://yoursite.com`).

**هذه القائمة هي إعداد أمني، وتُحفَظ بشكل مستقل.** تُطبَّق عند الضغط على **حفظ** الخاص باللوحة
نفسها، لا عند الضغط على **نشر** في الشاشة الرئيسية. سجّل أيضًا نطاقات الاختبار وStaging الخاصة
بك، وأزل النطاقات التي لم تعد قيد الاستخدام — فهذه هي قائمة من يمكنه تضمين رحلتك.

## الأسئلة الشائعة

**هل تنطبق التغييرات على الرحلات الجارية بالفعل؟** لا. ينطبق الضبط المنشور على الرحلات التي تبدأ
بعد النشر.

**لماذا لا أرى حقلي الشعار والخلفية؟** هناك سببان محتملان. أولًا: قد يكون لديك **iFrame** محددًا
— وفي iFrame تكون الرحلة مضمّنة داخل صفحتك الخاصة، التي توفّر الخلفية والهوية بالفعل. ثانيًا: قد
لا تعرض **نسخة Web Journey** الخاصة بك هذا الحقل. لون الخلفية موجود فقط في Web Journey v3.0 عبر
Redirect، والشعار في iFrame موجود فقط في Web Journey v1.0. تحقق من الجدول في "قبل أن تبدأ".

**تم رفض شعاري عند الرفع. لماذا؟** تحقق من المتطلبات الثلاثة: صيغة **PNG**، وارتفاع لا يتجاوز
**60 بكسل**، وحجم لا يتجاوز **100 كيلوبايت**.

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

**المعاينة لا تطابق رحلتي الفعلية.** تعتمد المعاينة على تصميم **Web Journey v3.0**. إذا كان
تكاملك على نسخة أخرى، فقد تختلف النتيجة — تواصل مع Unico لتقييم إمكانية تحديث النسخة.

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

**من قام بتغيير التخصيص في حسابي؟** لا تعرض الشاشة هذا السجل. لمعرفة أي مستخدم قام بآخر تغيير
ومتى، تواصل مع دعم Unico.

## مرجع سريع

```text
بوابة IDCloud
 └─ الإعدادات (أيقونة الترس في الشريط الجانبي)
     └─ تبويب التخصيص
         ├─ iFrame ............... الأزرار (لون الخلفية، لون النص، زاوية الحواف)
         │                         المحتوى (لون المحتوى)
         │                         + تكوين النطاقات
         └─ Redirect أو SDK ...... الشعار (PNG، 60 بكسل، 100 كيلوبايت)
                                   الخلفية (لون، يُطبَّق كتدرّج)
                                   الأزرار (لون الخلفية، لون النص، زاوية الحواف)
                                   المحتوى (لون المحتوى)

المعاينة المباشرة · هاتف محمول / سطح مكتب · إلغاء · نشر
```