المطوّرون
SDK لـ React Native
اعرض مساعدك داخل تطبيق React Native أو Expo الخاص بك.
هذه الصفحة للمطوّرين الذين يبنون تطبيق الجوال الخاص بهم. للرد على العملاء من هاتفك، استخدم تطبيق Chatzora للجوال. راجع ردّ على العملاء بنفسك.
تعرض الحزمة @chatzora/react-native-sdk صفحة الدردشة المستضافة داخل عرض react-native-webview. وتعمل على iOS وAndroid.
التثبيت
npm install @chatzora/react-native-sdk react-native-webviewمع Expo، ثبّت WebView بمُثبّت Expo ليتوافق الإصدار مع SDK لديك:
npx expo install react-native-webviewالاستخدام
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { ChatzoraWidget } from '@chatzora/react-native-sdk';
export default function ChatScreen() {
return (
<SafeAreaView style={styles.container}>
<ChatzoraWidget
agentId="YOUR_ASSISTANT_ID"
apiBase="https://chatzora.com"
themeColor="#10b981"
dataTitle="Support"
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
});يمكنك نسخ هذا الكود مع معرّف مساعدك مُدخلًا من القنوات ← SDK للجوال.
الخصائص (Props)
| الخاصية | النوع | مطلوبة | الوصف |
|---|---|---|---|
agentId | string | نعم | معرّف مساعدك. |
visitorId | string | لا | معرّف ثابت للمستخدم، مثل معرّف عميلك. إذا تركته فارغًا تنشئ صفحة الدردشة واحدًا. |
themeColor | string | لا | يتجاوز لون السمة المحفوظ في لوحة التحكم، مثل #10b981. |
dataTitle | string | لا | يتجاوز عنوان الدردشة المحفوظ في لوحة التحكم. |
apiBase | string | لا | عنوان Chatzora. الافتراضي https://chatzora.com. |
style | ViewStyle | لا | نمط عرض الحاوية. |
onClose | () => void | لا | يُستدعى عندما يضغط المستخدم على زر الإغلاق في الدردشة. |
onMessageReceived | (event: WebViewMessageEvent) => void | لا | يتلقى الرسائل الأخرى التي ترسلها صفحة الدردشة، مثل رسائل الدردشة الجديدة. تُتجاهل الرسائل القادمة من مصادر أخرى. |
يجب أن يكون مساعدك مفعّلًا لتعمل الدردشة. تظهر المحادثات القادمة من SDK في المحادثات وتُحتسب ضمن رسائلك الشهرية.