الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

رد فعل-Whatsapp-Widget

WhatsApp Chat Widget لموقع الويب الخاص بك

ما هذا؟

هذا عنصر زر WhatsApp بسيط للغاية. نظرًا لتأثير Covid-19 في عام 2020 ، كان على معظم الشركات الصغيرة الانتقال إلى وجود عبر الإنترنت. أحد WEY لتحسين التواصل مع عملائك هو استخدام عنصر واجهة مستخدم كهذه.

يضيف زر يشبه العائمة إلى موقعك يدعو واجهة برمجة تطبيقات WhatsApp.

سيبدأ تلقائيًا دردشة WhatsApp إلى الرقم الذي تقوم بتكوينه والنص الذي يكتبه المستخدم.

جميع النصوص قابلة للتخصيص بالكامل ويمكنك أيضًا توفير رمز/شعار.

ثَبَّتَ 

npm install --save react-whatsapp-widget

الاستخدام 

 import React from 'react' ;
// This is the way to import an SVG file and then pass it as a props
import { ReactComponent as CompanyIcon } from './assets/crown.svg' ;

import { WhatsAppWidget } from 'react-whatsapp-widget' ;
import 'react-whatsapp-widget/dist/index.css' ;

const App = ( ) => {
    return (
        < WhatsAppWidget CompanyIcon = { CompanyIcon } phoneNumber = "XXXXXXXXXX" />
    ) ;
} ;

️ حيث يكون phoneNumber رقم هاتف كامل بالتنسيق الدولي. حذف أي أصفار أو قوسين أو شرطات عند إضافة رقم الهاتف بالتنسيق الدولي.

مثال: 541112222222 حيث 54 هو رمز الأرجنتين الداخلي.

التخصيص

خيار قيمة تقصير وصف
رقم التليفون string '' رقم Whatsapp Intenational الذي سيتلقى الرسالة.
شركة Component BiSupport أيقونة شركتك SVG
CompanyName string 'Support' اسم شركتك
RespontTimeText string 'Typically replies within a day'
رسالة string 'Hello! ? nnWhat can we do for you?' مع n يمكنك إنشاء خط كسر.
sendbuttontext string 'Send' رسالة نصية داخل زر الإرسال
المدخلات string 'Type a message' نص العنصر النائب لإدخال الرسالة
يفتح boolean false إذا كان ذلك صحيحًا ، فسيكون صندوق الدردشة مفتوحًا على أنه افتراضي

المساهمة

بعد استنساخ المستودع ، يجب عليك تشغيل الأوامر التالية في علامات تبويب طرفية مختلفة لبدء بيئة التطوير. 

 cd react-whatsapp-widget
npm install
npm start

 cd react-whatsapp-widget/example
npm install
npm start

يشاهد الأمر الأول SRC/ ويعيد ترجمةه في المجلد DIST/ المجلد عند إجراء تغييرات.

يقوم الأمر الثاني بتشغيل تطبيق المثال الذي يرتبط بالحزمة المحلية الخاصة بك.

طلبات السحب موضع ترحيب!

رخصة

MIT © Ann0nip

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل