تخيل هذا: شخص يستخدم أحد منتجاتك يواجه مشكلة. هناك بعض القنوات التي يمكنهم استخدامها للإبلاغ عن المشكلة ومحاولة حلها.
من بينهم ، يمكنهم اختيار البريد الإلكتروني أو المكالمة. لكن قنوات الاتصال هذه لا تضمن ردودًا سريعة ، ناهيك عن الاستجابة في الوقت الفعلي. لكن الدردشة الحية والتفاعلية مع أحد متخصصي دعم العملاء يمكن أن تثبت أنها لا تقدر بثمن.
أثبتت ميزة الدردشة الحية أنها أداة اتصال مفيدة للغاية. هذا لأنه يمكّنك من التفاعل بشكل أفضل مع المستخدمين ، وتحسين تجربة المستخدم ، واستكشاف المشكلات وإصلاحها بسرعة وفي الوقت الفعلي.
ما هي الدردشة الحية ولماذا هي مهمة؟
عادةً ما يتم تضمين ميزة الدردشة المباشرة كأداة على جانب صفحة الويب ، أو نافذة منبثقة تظهر بعد تحميل الموقع. يوفر اتصالًا في الوقت الفعلي بين المستخدمين وممثلي خدمة العملاء أو فرق الدعم ، مباشرة داخل التطبيق.
يمكن لمستخدمي ميزة الدردشة المباشرة طرح أسئلة ملحة حول المنتج أو الاستفسار عن المناطق التي لا يفهمونها أو الإبلاغ عن مشكلة وطلب الحلول. وفي الوقت نفسه ، يمكن لفرق دعم العملاء تقديم ملاحظات مفصلة في الوقت الفعلي ومخصصة للمستخدم.
فوائد دمج ميزة الدردشة الحية
يمكن أن يؤدي دمج ميزة الدردشة الحية إلى تحقيق العديد من الفوائد:
- تحسين جهود خدمة العملاء. المنتج الرائع يكون جيدًا مثل استخدامه فقط. يساعد دمج ميزة الدردشة الحية على تحسين تجربة المستخدم بشكل كبير من خلال توفير طريقة سهلة للحصول على المساعدة والإجابات بسرعة. في النهاية ، سيساعدك هذا على تقديم خدمات أفضل تسهل استخدام منتجك.
- زيادة مشاركة العملاء. تتيح الدردشة الحية للمستخدمين التفاعل مع تطبيقك في الوقت الفعلي ، مما يجعلهم يشعرون بالتقدير. هذا يدفعهم إلى الانخراط أكثر والاشتراك واختبار المزيد من الميزات.
- توليد المزيد من العملاء المحتملين وزيادة المبيعات. توفر قناة الاتصال هذه وسيلة للتفاعل مع المستخدمين بشكل شخصي. يمكنك استغلال هذه الفرصة لجذب العملاء المحتملين وتحويلهم إلى عملاء. يمكنك أيضًا تقديم توصيات المنتج وبيعها على عبوات محددة من منتجك.
- مصدر بيانات المستخدم. في الاقتصاد الرقمي ، يمكن أن يضعك الوصول إلى بيانات دقيقة حول المستخدمين في صدارة المنافسة بشكل كبير. عندما يخبرك المستخدمون عن الأخطاء أو مشكلات المنتج الأخرى ، فإن هذه التعليقات تكون ذات قيمة عالية. يمكنك معرفة المزيد حول كيفية تفاعلهم مع خدمتك واستخدامها لتحسين منتجك.
ما هو Chatwoot؟
Chatwoot عبارة عن نظام أساسي لخدمة العملاء مفتوح المصدر يوفر طريقة مخصصة للتفاعل مع المستخدمين. يوفر أيضًا نظامًا أساسيًا مبسطًا لك للرد على استفسارات المستخدمين وتقديم التعليقات عبر قنوات متعددة في الوقت الفعلي.
يمكنك استخدام أدوات الأتمتة والتحليلات وإعداد التقارير لتحليل تفاعل المستخدم وإدارة عمليات خدمة العملاء بسهولة وفعالية.
باستخدام هذا الدليل ، يمكنك دمج Chatwoot مع تطبيقك واختبار ميزة الدردشة المباشرة مع عميل React ولوحة معلومات دعم العملاء.
إعداد مشروع Chatwoot
يوفر Chatwoot مكونًا إضافيًا للدردشة الحية قابل للتخصيص يمكنك دمجه بسهولة في تطبيقك. يمكنك تخصيصه قدر الإمكان ليناسب احتياجات خدمة العملاء الخاصة بك.
بمجرد تضمين رمز المكون الإضافي في تطبيقك ، يمكن للمستخدم التواصل مع فرق دعم العملاء ، ويمكنهم إدارة هذه المحادثات من لوحة معلومات وكيل Chatwoot.
- رئيس لأكثر من موقع Chatwoot، قم بالتسجيل للحصول على حساب ، وانتقل إلى لوحة تحكم المستخدم.
- لإدارة محادثات المستخدمين ، تحتاج أولاً إلى إعداد صندوق بريد وتخصيصه بناءً على ما تطلبه. اضغط على بريد وارد جديد زر للبدء.
- الآن ، حدد القناة التي تريد دمج Chatwoot فيها. لهذا الدليل ، حدد موقع إلكتروني نظرًا لأنك تدمجها في تطبيق React.
- بعد ذلك ، املأ تفاصيل موقع الويب الخاص بك. بالنسبة للتنمية المحلية ، يمكنك اختبار الميزة باستخدام عنوان URL لمجال مضيف محلي ، ومع ذلك ، بمجرد النشر في الإنتاج ، تذكر تحديث المجال بعنوان URL المباشر.
- أخيرًا ، أضف وكيل / وكلاء لإدارة المحادثات في صندوق الوارد هذا. يمكن أن يكون هذا عضوًا في فريق دعم العملاء الخاص بك.
لقد نجحت في إعداد الدردشة المباشرة لـ Chatwoot مع تعيين موقع الويب الخاص بك كقناة اتصال. سيقوم Chatwoot بإنشاء الرمز الذي تحتاج إلى تضمينه في تطبيقك لإضافة أداة ميزة الدردشة المباشرة. هذا الرمز مرن للغاية حيث يمكنك دمجه بسهولة في عميل ويب تم إنشاؤه باستخدام أي من أطر الواجهة الأمامية لجافا سكريبت.
إذا كنت ترغب في تخصيص الإعداد ، فانقر فوق ملف المزيد من الإعدادات زر.
رد فعل إعداد المشروع
قم بإنشاء تطبيق React والمكوِّن الإضافي للدردشة المباشرة الخاص بـ Chatwoot لاختبار الميزة. أنشئ تطبيق React وأنشئ ملف ENV في الدليل الجذر لمجلد مشروعك للاحتفاظ برمز موقع الويب الخاص بك.
REACT_APP_WEBSITE_TOKEN = رمز مميزبعد ذلك ، في src الدليل ، قم بإنشاء مجلد جديد وقم بتسمية مكوناته. في هذا المجلد ، قم بإنشاء ملف جديد: Livechat.js.
أضف الكود التالي إلى هذا الملف:
يستورد رد فعل ، {useEffect} من'تتفاعل'وظيفةدردشة مباشرة () {
useEffect (() => {
نافذة او شباك.chatwootSettings = {
إخفاء الرسالة خطأ شنيع,
موضع: "يمين",
المكان: "ar",
يكتب: "معيار"
};
(وظيفة(د ، ت) {
فار BASE_URL = " https://app.chatwoot.com";
فار g = d.createElement (t)، s = d.getElementsByTagName (t) [0];
g.src = BASE_URL + "/packs/js/sdk.js";
ز المرجع = حقيقي;
g.async = حقيقي;
س.عقدة الأم.insertBefore(ز, س);g.onload = وظيفة() {
نافذة او شباك.chatwootSDK.يجري({
الموقع الإلكتروني: عملية.env.REACT_APP_WEBSITE_TOKEN,
baseUrl: BASE_URL
})
}
})(وثيقة, "النصي");
}, []);يعودباطل;
};
يصدّرتقصير دردشة مباشرة؛
يدمج هذا الرمز ميزة الدردشة المباشرة في Chatwoot في تطبيق React الخاص بك. يقوم الخطاف useEffect بتشغيل الكود داخل رد الاتصال مرة واحدة عند تحميل المكون. أولاً ، يقوم بتهيئة إعدادات Chatwoot للميزة. ثم يقوم بتشغيل وظيفة البرنامج المساعد ، التي يوفرها Chatwoot ، والتي تقوم بإعداد أداة الدردشة المباشرة على الصفحة.
يقوم بتمرير websiteToken كمعامل لوظيفة chatwootSDK.run التي تربط التطبيق بحساب Chatwoot الخاص بك. أخيرًا ، ترجع وظيفة الدردشة المباشرة فارغة لأنك لست مطالبًا بتقديم أي عناصر HTML.
اختبر ميزة الدردشة الحية
- قم باستيراد هذا المكون في ملف app.js ملف وتدوير خادم التطوير لتحديث التغييرات التي تم إجراؤها. يجب أن ترى أداة الدردشة المباشرة على React قيد التشغيل على المتصفح.
- لاختبار ميزة الدردشة الحية ، انقر فوق عنصر واجهة المستخدم لفتح جدار دردشة المحادثة واكتب رسالة.
- الآن ، توجه إلى لوحة تحكم مستخدم Chatwoot وانتقل إلى صندوق الوارد الخاص بك ، يجب أن ترى رسالة جديدة. بشكل افتراضي ، سينشئ Chatwoot بعض الرسائل ويستجيب تلقائيًا فورًا بعد أن يرسل المستخدم رسالة ، مثل تلك التي تراها أدناه. اكتب ردًا على الرسالة وانقر فوق إرسال. ارجع إلى جدار دردشة التطبيق المصغّر لعرض الرد.
لقد نجحت في دمج ميزة الدردشة الحية في تطبيقك باستخدام عدد قليل جدًا من أسطر التعليمات البرمجية.
هل تستحق ميزة الدردشة الحية كل هذا العناء؟
تعد ميزة الدردشة الحية طريقة رائعة لتقديم خدمة العملاء وزيادة رضا العملاء وتحسين تجربة المستخدم.
يوفر قناة اتصال مع إمكانية زيادة المشاركة وتقليل وقت الاستجابة وتخصيص دعم العملاء. في النهاية ، يجب أن يساعدك على تحسين عمليات خدمة العملاء بجهد ضئيل.
