تكوين الويدجت

جميع الخيارات المتاحة لتخصيص سلوك ومظهر الويدجت.

التكوين الأساسي

JavaScript

SalonBookIt.init({
    // مطلوب
    apiKey: 'hh_pub_live_abc123...',

    // الحاوية (محدد CSS أو عنصر DOM)
    container: '#salonbookit-widget',

    // الخيارات المرئية
    theme: 'light',
    primaryColor: '#1a365d',
    locale: 'es',

    // وضع العرض
    mode: 'inline'
});

مرجع الخيارات

الخيارات المطلوبة

apiKey string مطلوب

مفتاح API الخاص بك في SalonBookIt. يُحصل عليه من لوحة التحكم في التكوين → التكاملات.

apiKey: 'hh_pub_live_abc123def456...'

الحاوية

container string | HTMLElement الافتراضي: '#salonbookit-widget'

محدد CSS أو مرجع لعنصر DOM حيث سيتم عرض الويدجت.

container: '#mi-contenedor'
// أو
container: document.getElementById('mi-contenedor')

المظهر

theme 'light' | 'dark' | 'auto' الافتراضي: 'light'

المظهر المرئي للويدجت.

'light' - خلفية فاتحة، نص داكن
'dark' - خلفية داكنة، نص فاتح
'auto' - يكتشف تفضيل النظام

primaryColor string الافتراضي: '#1a365d'

اللون الرئيسي للأزرار والعناصر البارزة. يقبل أي لون CSS صالح.

primaryColor: '#e63946'  // HEX
primaryColor: 'rgb(230, 57, 70)'  // RGB
primaryColor: 'hsl(355, 78%, 56%)'  // HSL

locale 'es' | 'en' | 'ar' الافتراضي: 'es'

لغة واجهة الويدجت.

'es' - الإسبانية
'en' - الإنجليزية
'ar' - العربية (يشمل RTL)

borderRadius string الافتراضي: '12px'

نصف قطر الحدود للحاوية الرئيسية والعناصر الداخلية.

fontFamily string الافتراضي: 'inherit'

عائلة الخط. افتراضياً يرث خط الصفحة.

وضع العرض

mode 'inline' | 'modal' | 'button' الافتراضي: 'inline'

كيف يُعرض الويدجت:

'inline' - مباشرة في الحاوية
'modal' - في نافذة منبثقة مركزية
'button' - فقط زر يفتح النافذة المنبثقة

buttonText string الافتراضي: 'حجز موعد'

نص الزر عندما mode يكون 'button' أو 'modal'.

buttonStyle 'solid' | 'outline' | 'text' الافتراضي: 'solid'

النمط المرئي للزر.

الاختيار المسبق

serviceId number | null الافتراضي: null

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

staffId number | null الافتراضي: null

معرف المحترف للاختيار المسبق. يتطلب أن serviceId يكون محدداً أيضاً.

date string | null الافتراضي: null

التاريخ للاختيار المسبق بتنسيق YYYY-MM-DD.

السلوك

showPrices boolean الافتراضي: true

عرض أو إخفاء أسعار الخدمات.

showDuration boolean الافتراضي: true

عرض أو إخفاء مدة الخدمات.

allowMultipleServices boolean الافتراضي: true

السماح باختيار خدمات متعددة في حجز واحد.

requirePhone boolean الافتراضي: true

طلب الهاتف لإكمال الحجز.

showNotes boolean الافتراضي: true

عرض حقل الملاحظات الإضافية في النموذج.

المدفوعات

enablePayments boolean الافتراضي: true

تفعيل المدفوعات عبر الإنترنت. يتطلب تكوين Stripe في لوحة التحكم.

paymentRequired 'always' | 'optional' | 'never' الافتراضي: 'optional'

متى يُطلب الدفع عبر الإنترنت:

'always' - دائماً يتطلب الدفع
'optional' - العميل يختار الدفع عبر الإنترنت أو محلياً
'never' - حجز فقط، بدون دفع عبر الإنترنت

مثال كامل

JavaScript

SalonBookIt.init({
    // المصادقة
    apiKey: 'hh_pub_live_abc123def456...',

    // الحاوية
    container: '#booking-widget',

    // المظهر
    theme: 'light',
    primaryColor: '#e63946',
    locale: 'es',
    borderRadius: '8px',
    fontFamily: 'Inter, sans-serif',

    // الوضع
    mode: 'inline',
    buttonText: 'احجز الآن',

    // الاختيار المسبق
    serviceId: 15,
    staffId: null,
    date: null,

    // السلوك
    showPrices: true,
    showDuration: true,
    allowMultipleServices: true,
    requirePhone: true,
    showNotes: true,

    // المدفوعات
    enablePayments: true,
    paymentRequired: 'optional',

    // Callbacks (انظر قسم الأحداث)
    onReady: (business) => {
        console.log('الودجت جاهز:', business);
    },
    onStepChange: (step, data) => {
        console.log('الخطوة:', step, data);
    },
    onBookingComplete: (booking) => {
        console.log('تم إنشاء الحجز:', booking);
        window.location.href = '/gracias?reserva=' + booking.id;
    },
    onPaymentComplete: (payment) => {
        console.log('تم الدفع:', payment);
    },
    onError: (error) => {
        console.error('Error:', error);
    }
});

تخصيص CSS

يكشف الويدجت عن متغيرات CSS للتخصيص المتقدم:

CSS

.sbk-widget {
    /* الألوان */
    --sbk-primary: #1a365d;
    --sbk-primary-hover: #2c5282;
    --sbk-background: #ffffff;
    --sbk-surface: #f7fafc;
    --sbk-text: #1a202c;
    --sbk-text-secondary: #718096;
    --sbk-border: #e2e8f0;
    --sbk-success: #38a169;
    --sbk-error: #e53e3e;

    /* التباعد */
    --sbk-spacing-xs: 4px;
    --sbk-spacing-sm: 8px;
    --sbk-spacing-md: 16px;
    --sbk-spacing-lg: 24px;
    --sbk-spacing-xl: 32px;

    /* الطباعة */
    --sbk-font-family: inherit;
    --sbk-font-size-sm: 0.875rem;
    --sbk-font-size-base: 1rem;
    --sbk-font-size-lg: 1.125rem;
    --sbk-font-size-xl: 1.25rem;

    /* الحدود */
    --sbk-radius-sm: 6px;
    --sbk-radius-md: 8px;
    --sbk-radius-lg: 12px;

    /* الظلال */
    --sbk-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --sbk-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}

مثال على التخصيص:

CSS

/* ملف الأنماط الخاص بك */
#salonbookit-widget .sbk-widget {
    --sbk-primary: #8b5cf6;
    --sbk-radius-lg: 20px;
    --sbk-font-family: 'Poppins', sans-serif;
}