5 دقائق
البدء السريع
ادمج ودجت الحجز في موقعك في أقل من 5 دقائق.
1
الحصول على مفتاح API
ادخل إلى لوحة التحكم لإنشاء مفتاح API.
- سجل الدخول إلى لوحة تحكم SalonBookIt
- اذهب إلى الإعدادات → التكاملات
- في قسم مفاتيح API, انقر على إنشاء جديد
- انسخ مفتاح API الخاص بك (يبدأ بـ
hh_pub_أوhh_sec_)
حافظ على أمان مفتاح API
مفتاح API يحدد نشاطك التجاري. لا تشاركه علنياً ولا تضعه في المستودعات العامة.
2
إضافة الودجت إلى موقعك
انسخ الكود التالي في صفحة HTML الخاصة بك.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>حجز موعد</title>
</head>
<body>
<h1>احجز موعدك</h1>
<!-- حاوية الودجت -->
<div id="salonbookit-widget"></div>
<!-- سكريبت الودجت -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
<script>
SalonBookIt.init({
apiKey: 'مفتاح_API_هنا',
container: '#salonbookit-widget',
theme: 'light',
locale: 'es'
});
</script>
</body>
</html>استبدل مفتاح_API_هنا بمفتاح API الذي حصلت عليه في الخطوة 1.
3
تخصيص الودجت
اضبط الألوان والسلوك حسب علامتك التجارية.
JavaScript
SalonBookIt.init({
apiKey: 'hh_pub_live_abc123...',
container: '#salonbookit-widget',
// المظهر
theme: 'light', // 'light' | 'dark' | 'auto'
primaryColor: '#1a365d', // اللون الرئيسي لعلامتك التجارية
locale: 'es', // 'es' | 'en' | 'ar'
// وضع العرض
mode: 'inline', // 'inline' | 'modal' | 'button'
// اختيار مسبق للخدمة أو المهني
serviceId: null, // معرف الخدمة للاختيار المسبق
staffId: null, // معرف المحترف للاختيار المسبق
// Callbacks
onReady: function(business) {
console.log('الودجت جاهز:', business.nombre);
},
onBookingComplete: function(booking) {
console.log('تم إنشاء الحجز:', booking);
// هنا يمكنك إعادة التوجيه أو عرض التأكيد
},
onError: function(error) {
console.error('Error:', error.message);
}
});
4
اختبار التكامل
تحقق من أن كل شيء يعمل بشكل صحيح.
- افتح صفحتك في المتصفح
- يجب أن ترى الودجت مع خدماتك
- اختر خدمة ومهني وتاريخ ووقت
- أكمل حجز تجريبي
- تحقق من ظهوره في لوحة التحكم
تم!
لديك الآن ودجت الحجز يعمل على موقعك. راجع وثائق الإعدادات لمزيد من الخيارات.