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

الهوية البصرية والوسائط

المسار: /dashboard/settings (علامة تبويب Branding) · الصلاحية: وحدة الإعدادات (Settings module)

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

Branding Settings Branding Settings

يظهر شعارك في رأس لوحة التحكم (Header) وفي أداة الدردشة اختياريًا.

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

نصائح:

  • استخدم تنسيق PNG شفافًا لضمان محاذاة نظيفة على كل من الخلفيات الفاتحة والداكنة.
  • قم بالرفع بحجم يعادل ضعف حجم العرض المطلوب لضمان دقة عالية على شاشات Retina.
  • تجنب الشعارات الطويلة جدًا — التنسيقات العريضة/الأفقية تعمل بشكل أفضل في رأس الصفحة.

أيقونة الموقع (Favicon)

تظهر أيقونة الموقع في علامات تبويب المتصفح والإشارات المرجعية.

المتطلب التفاصيل
الحد الأدنى للحجم 16x16 بكسل
المعالجة يتم قصها لتصبح مربعة، وتغيير حجمها إلى 48x48 كحد أقصى
التنسيق الموصى به PNG أو SVG

نصائح:

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

الألوان

الإعداد ما الذي يتحكم به مثال
اللون الأساسي لون الثيم الرئيسي — رأس الأداة، الأزرار، الحالات النشطة، وإبرازات الشريط الجانبي #3b82f6 (أزرق)، #10b981 (أخضر)
اللون الثانوي لون التمييز — حالات الحوم (Hover)، الروابط، والأزرار الثانوية #6366f1 (نيلي)، #f59e0b (كهرماني)

أدخل رموز الألوان (Hex codes) مباشرة أو استخدم أداة اختيار الألوان المدمجة. تظهر معاينة التغييرات فورًا في لوحة التحكم.

نصائح للألوان

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

الخطوط (Typography)

اختر من بين عائلات الخطوط المميزة. محدد الخطوط يدعم اللغات المختلفة — حيث يعرض تلقائيًا الخطوط التي تدعم مجموعات أحرف اللغات المفعلة لديك.

اللغة أمثلة على الخطوط
الإنجليزية / اللاتينية Inter, Poppins, Open Sans, Roboto, Montserrat
العبرية Heebo, Assistant, Rubik, Open Sans Hebrew
العربية Cairo, Tajawal, IBM Plex Arabic
CJK Noto Sans CJK (يتم اختياره تلقائيًا)

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

الصور الرمزية للأداة (Widget avatars)

الصورة الرمزية (Avatar) هي صورة الملف الشخصي التي يراها المستخدمون داخل أداة الدردشة. وهي تحدد طابع المحادثة — ودود، احترافي، أو يعكس العلامة التجارية.

الخيار التفاصيل الأفضل لـ
المعرض اختر من مجموعة مختارة من الصور المصممة مسبقًا مع بطاقات معاينة كبيرة الإعداد السريع، المظهر الاحترافي
الرفع ارفع صورتك الخاصة — يتم قصها وتحسينها تلقائيًا إلى 100x100 PNG تميمة العلامة التجارية، صورة الفريق، أيقونة مخصصة
رابط URL لصق رابط خارجي لصورة الصور الرمزية الديناميكية من CDN (ملاحظة: تعتمد على توفر المضيف الخارجي)

نصائح للصور الرمزية

  • استخدم وجهًا ودودًا أو أيقونة — الصور الرمزية التي تحتوي على وجه (بشري أو مرسوم) تزيد من التفاعل بنسبة 15-25%.
  • طابق علامتك التجارية — إذا كان لديك تميمة (Mascot) أو رمز شعار، استخدمه لتعريف فوري بالعلامة التجارية.
  • تجنب الصور المليئة بالنصوص — بحجم 100x100 بكسل، يصبح النص غير قابل للقراءة.

تنسيقات CSS المخصصة

للتخصيص المتقدم، قم بإضافة CSS مخصص يتجاوز الأنماط الافتراضية للوحة التحكم. هذا مفيد لـ:

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

مثال: نمط زر مخصص

.btn-primary {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

استخدمه بحذر

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

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

س: لماذا يبدو شعاري مشوشًا؟

  • ارفع صورة مصدر أكبر (على الأقل ضعف حجم العرض المطلوب) ودع النظام يقوم بتصغيرها. الصورة بعرض 700 بكسل ستبدو حادة جداً عند عرضها بحجم 350 بكسل.

س: هل يمكنني استخدام رابط URL بدلاً من الرفع؟

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

س: هل تؤثر تغييرات الهوية البصرية على الأداة فورًا؟

  • نعم. تغييرات الهوية البصرية (الألوان، الشعار، الصورة الرمزية) تدخل حيز التنفيذ فورًا للجلسات الجديدة للأداة. الجلسات المفتوحة حاليًا قد تحتاج إلى تحديث الصفحة لرؤية التحديثات.

س: هل تخصيص الهوية لكل بوت أم شامل؟

  • تخصيص الهوية يتم لكل بوت على حدة. يمكن أن يكون لكل بوت في إعداد البوتات المتعددة ألوانه وشعاره وصورته الرمزية الخاصة.