كيفية تثبيت الدردشة الحية على تطبيق React Native؟

إذا كان لديك تطبيق React Native، يمكنك إضافة أداة الدردشة الحية Voxys Connect والتحدث مع زوارك في الوقت الحقيقي. يمكن القيام بذلك في 3 خطوات بسيطة باستخدام إضافة Voxys Connect.

الخطوة 1. إنشاء صندوق بريد لموقع الويب في Voxys Connect​

يرجى الرجوع إلى هذا الدليل للحصول على تعليمات مفصلة حول إعداد صندوق بريد لموقع الويب في Voxys Connect.

الخطوة 2. إضافة الإضافة إلى مشروعك​

أضف واحدة من الإضافات التالية إلى مشروعك.

yarn add @chatwoot/react-native-widget

أو

npm install --save @chatwoot/react-native-widget --save

تعتمد هذه المكتبة على react-native-webview و async-storage. يرجى اتباع التعليمات المقدمة في الوثائق.

تثبيت iOS​

إذا كنت تستخدم إصدارات React Native > 60.0، فالأمر بسيط نسبيًا.

cd ios && pod install

الخطوة 3. استخدمها بهذه الطريقة​

استبدل websiteToken و baseUrl بالقيم المناسبة.

import React, { useState } from 'react';
import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import ChatWootWidget from '@chatwoot/react-native-widget';

const App = () => {
  const [showWidget, toggleWidget] = useState(false);
  const user = {
    identifier: '[email protected]',
    name: 'جون صموئيل',
    avatar_url: '',
    email: '[email protected]',
    identifier_hash: '',
  };
  const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
  const websiteToken = 'WEBSITE_TOKEN';
  const baseUrl = 'CHATWOOT_INSTALLATION_URL';
  const locale = 'en';

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
          <Text style={styles.buttonText}>افتح الأداة</Text>
        </TouchableOpacity>
      </View>
      {
        showWidget&&
          <ChatWootWidget
            websiteToken={websiteToken}
            locale={locale}
            baseUrl={baseUrl}
            closeModal={() => toggleWidget(false)}
            isModalVisible={showWidget}
            user={user}
            customAttributes={customAttributes}
          />
      }

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    height: 48,
    marginTop: 32,
    paddingTop: 8,
    paddingBottom: 8,
    backgroundColor: '#1F93FF',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#fff',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    paddingLeft: 10,
    fontWeight: '600',
    fontSize: 16,
    paddingRight: 10,
  },
});

export default App;

وهكذا... لقد انتهيت. اطلع على المثال الكامل هنا.