الدردشة المباشرة للموقع

كيفية تثبيت الدردشة المباشرة على موقع دكوسورس؟

تتكامل Chatwoot بسلاسة مع Docusaurus عبر الحزمة @chatwoot/docusaurus-plugin. تساعدك هذه الإضافة على تثبيت أداة المحادثة المباشرة من Chatwoot بسهولة على موقع يعمل بـ Docusaurus. لتثبيت الإضافة، اتبع الخطوات السريعة الموضحة أدناه. الخطوة 1. أضف الإضافة إلى مشروعك. yarn add @chatwoot/docusaurus-plugin أو npm install @chatwoot/docusaurus-plugin --save الخطوة 2. قم بتكوين الإضافة في docusaurus.config.js // docusaurus.config.js module.exports = { plugins: ["@chatwoot/docusaurus-plugin"], themeConfig: { chatwoot: { websiteToken: "رمز صندوق الوارد لموقعك", baseURL: "https://app.chatwoot.com", // اختياري enableInDevelopment: false, // اختياري chatwootSettings: { hideMessageBubble: false, position: "left", // يمكن أن تكون left أو right locale: "ar", // اللغة التي سيتم تعيينها useBrowserLanguage: false, // تعيين لغة الأداة من متصفح المستخدم darkMode: "auto", // [light, auto] type: "expanded_bubble", launcherTitle: "تحدث معنا", } } } };

كيفية تثبيت الدردشة المباشرة على تطبيق Next.js؟

إذا كان لديك تطبيق Next.js، يمكنك إضافة ويدجت الدردشة الحية Chatwoot والتحدث مع زوارك في الوقت الفعلي. لدمج Chatwoot مع تطبيق Next.js الخاص بك، تحتاج إلى مكون يقوم بتحميل سكربت Chatwoot. يمكنك القيام بذلك في خطوتين سريعتين. سنوضح ذلك من خلال المثال أدناه. يوضح هذا المثال مكون React يقوم بتحميل سكربت Chatwoot بشكل غير متزامن. الخطوة 1. انسخ وأنشئ! انسخ الكود التالي وأنشئ ملفًا في مجلد components باسم ChatwootWidget.js. import React from 'react'; class ChatwootWidget extends React.Component { componentDidMount () { // Add Chatwoot Settings window.chatwootSettings = { hideMessageBubble: false, position: 'right', // This can be left or right locale: 'en', // Language to be set type: 'standard', // [standard, expanded_bubble] }; // Paste the script from inbox settings except the <script> tag (function(d,t) { var BASE_URL="<your-installation-url>"; var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js"; s.parentNode.insertBefore(g,s); g.async=!0; g.onload=function(){ window.chatwootSDK.run({ websiteToken: '<your-website-token>', baseUrl: BASE_URL }) } })(document,"script"); } render () { return null; } } export default ChatwootWidget الخطوة 2. الاستيراد​ قم باستيراد المكون في صفحاتك أو في مكون التخطيط، كما هو موضح أدناه. import React, { Fragment } from 'react' // ... import ChatwootWidget from '../components/ChatwootWidget' const Page = () => ( <Fragment> <ChatwootWidget /> <Component {...}> </Fragment> ) export default Page ستتمكن الآن من رؤية ويدجت Chatwoot على الصفحة.

كيفية تثبيت الدردشة المباشرة على موقع Gatsby؟

إذا كان لديك موقع إلكتروني تم إنشاؤه باستخدام Gatsby، يمكنك إضافة أداة الدردشة المباشرة Chatwoot والتحدث مع زوارك في الوقت الفعلي. يمكن القيام بذلك في 3 خطوات بسيطة باستخدام إضافة Chatwoot الخاصة بـ Gatsby. الخطوة 1. أضف إضافة Gatsby إلى مشروعك​ أضف gatsby-plugin-chatwoot إلى مشروع Gatsby الخاص بك. npm install --save gatsby-plugin-chatwoot إذا كنت تستخدم yarn، استخدم الأمر التالي: yarn add gatsby-plugin-chatwoot الخطوة 2. أضف الإضافة إلى ملف إعدادات Gatsby الخاص بك​ // In your gatsby-config.js plugins: [ { resolve: `gatsby-plugin-chatwoot`, options: { baseUrl: "BASE_URL", // Required websiteToken: "WEBSITE_TOKEN", // Required includeInDevelopment: false, // Optional chatwootSettings: {}, // Optional }, }, ]; يمكنك الحصول على رمز موقعك الإلكتروني وعنوان base URL من إعدادات صندوق الوارد في حساب Chatwoot الخاص بك. إذا كنت بحاجة إلى إنشاء قناة موقع إلكتروني جديدة، اتبع الخطوات الموضحة هنا. الخطوة 3. ابدأ تشغيل الخادم الخاص بك​ ستتمكن الآن من رؤية أداة Chatwoot على الصفحة.

كيف يمكن تفعيل التحقق من الهوية في Chatwoot؟

تساعد عملية التحقق من الهوية في ضمان أن المحادثات بين عملائك ووكلاء الدعم تظل خاصة. كما تساعد أيضًا في منع انتحال الهوية. يمكن تفعيل التحقق من الهوية عن طريق توليد HMAC. يختلف المفتاح المستخدم لتوليد HMAC لكل ويدجت ويب ويمكن نسخه من: صناديق الوارد -> الإعدادات -> التهيئة -> التحقق من الهوية -> انسخ الرمز المميز المعروض هناك. يمكنك توليد HMAC بلغات برمجة مختلفة كما هو موضح أدناه. توليد HMAC PHP <?php $key = '<webwidget-hmac-token>'; $message = '<identifier>'; $identifier_hash = hash_hmac('sha256', $message, $key); ?> جافاسكريبت (Node.js) const crypto = require('crypto'); const key = '<webwidget-hmac-token>'; const message = '<identifier>'; const hash = crypto.createHmac('sha256', key).update(message).digest('hex'); روبي require 'openssl' require 'base64' key = '<webwidget-hmac-token>' message = '<identifier>' OpenSSL::HMAC.hexdigest('sha256', key, message) إليكسير key = '<webwidget-hmac-token>' message = '<identifier>' signature = :crypto.hmac(:sha256, key, message) Base.encode16(signature, case: :lower) Golang package main import ( "crypto/hmac" "crypto/sha256" "encoding/base64" "encoding/hex" ) func main() { secret := []byte("<webwidget-hmac-token>") message := []byte("<identifier>") hash := hmac.New(sha256.New, secret) hash.Write(message) hex.EncodeToString(hash.Sum(nil)) } بايثون import hashlib import hmac import base64 secret = bytes('<webwidget-hmac-token>', 'utf-8') message = bytes('<identifier>', 'utf-8') hash = hmac.new(secret, message, hashlib.sha256) hash.hexdigest()

كيفية تثبيت الدردشة الحية على موقع ويب مبني باستخدام Webflow؟

إذا تم إنشاء موقعك باستخدام Webflow وترغب في التحدث مع زوار موقعك على Webflow في الوقت الفعلي، يمكنك إضافة أداة الدردشة المباشرة Chatwoot إلى موقعك. اتبع الخطوات الموضحة أدناه. الخطوة 1. إنشاء صندوق بريد لموقع الويب في Chatwoot يرجى الرجوع إلى هذا الدليل للحصول على تعليمات مفصلة حول إعداد صندوق بريد لموقع الويب في Chatwoot. الخطوة 2. تثبيت الكود المُولد في Webflow سجّل الدخول إلى حساب Webflow الخاص بك واختر موقعك الإلكتروني. اختر الإعدادات. انتقل إلى الكود المخصص -> كود التذييل. الصق الكود في "كود التذييل". احفظ التغييرات. الخطوة 3. نشر التغييرات انقر على نشر -> اختر الموقع الإلكتروني -> انشر إلى النطاقات المحددة. الخطوة 4. التحقق قم بزيارة موقعك وتحقق من ظهور أداة الدردشة على الموقع.

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

إذا كان لديك تطبيق React Native، يمكنك إضافة أداة الدردشة المباشرة Chatwoot والتحدث مع زوارك في الوقت الفعلي. يمكن تنفيذ ذلك في 3 خطوات بسيطة باستخدام إضافة Chatwoot. الخطوة 1. إنشاء صندوق وارد لموقعك في Chatwoot​ يرجى الرجوع إلى هذا الدليل للحصول على تعليمات مفصلة حول إعداد صندوق وارد لموقع الويب في Chatwoot. الخطوة 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: 'john@gmail.com', name: 'John Samuel', avatar_url: '', email: 'john@gmail.com', 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}>Open widget</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; وهكذا... لقد انتهيت. يمكنك الاطلاع على المثال الكامل هنا.

كيف تقوم بتثبيت الدردشة المباشرة على تطبيق Vue.js؟

لدمج Chatwoot مع تطبيق Vue.js الخاص بك، تحتاج إلى لصق كود ودجت Chatwoot في ملف index.html  الخاص بتطبيق Vue.js الخاص بك. إليك كيفية القيام بذلك: الخطوة 1. الحصول على كود الودجت الخاص بك يمكنك العثور على كود الودجت الخاص بك في إعدادات صندوق الوارد الخاص بموقعك الإلكتروني. انتقل إلى الإعدادات -> صناديق الوارد -> اختر قناة موقعك > علامة التبويب الإعدادات. إذا لم تقم بإنشاء صندوق وارد لموقع إلكتروني بعد، يمكنك العثور على التعليمات خطوة بخطوة هنا. الخطوة 2. نسخ الكود انسخ الكود الذي تم إنشاؤه في حقل code  الخاص بالقناة. الخطوة 3. الصق الكود هنا افتح مشروع Vue الخاص بك والصق الكود في ملف index.html، مباشرة قبل وسم الإغلاق </body>. <body> <noscript> <strong >نعتذر ولكن <%= htmlWebpackPlugin.options.title %> لا يعمل بشكل صحيح بدون تفعيل الجافاسكريبت. يرجى تفعيلها للاستمرار.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- Chatwoot script goes here --> <script> (function (d, t) { var BASE_URL = "https://example.com"; var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { window.chatwootSDK.run({ websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1", baseUrl: BASE_URL, }); }; })(document, "script"); </script> <!-- Chatwoot script goes here --> </body> الخطوة 4. تحقق! ستتمكن الآن من رؤية ودجت Chatwoot على الصفحة. سيظهر بهذا الشكل تقريباً: Vue.js، وحدة Nuxt.js هناك وحدة مطورة من قبل المجتمع (من فريق @huntersofbook) لدمج Chatwoot في مشاريعك باستخدام Vue 3 و Nuxt 3. يمكنك الاطلاع على عرض توضيحي هنا. - عرض وحدة Vue 3. - عرض وحدة Nuxt 3.

كيفية تثبيت الدردشة المباشرة باستخدام Google Tag Manager؟

إذا كنت تستخدم Google Tag Manager على موقعك الإلكتروني، يمكنك تثبيت Chatwoot من لوحة تحكم Google Tag Manager عن طريق إنشاء وسم جديد لـ Chatwoot. لتثبيت أداة المحادثة الحية من Chatwoot، يرجى اتباع الخطوات التالية. الخطوة 1. الوصول إلى وحدة تحكم Tag Manager​ قم بتسجيل الدخول إلى مساحة عمل Tag Manager باستخدام حساب جوجل الخاص بك. سترى مساحة عمل مشابهة لما هو موضح أدناه. اضغط على زر "إضافة وسم جديد" من لوحة التحكم. الخطوة 2. إنشاء وسم جديد مع تكوين الوسم​ سيظهر لك نافذة منبثقة لإنشاء وسم. قم بتغيير الاسم من "وسم بدون عنوان" إلى "Chatwoot" أو أي اسم تفضله. انقر على تكوين الوسم، ثم اختر نوع الوسم "HTML مخصص" من القائمة. قم بنسخ السكربت من إعدادات البريد الوارد في Chatwoot والصقه في منطقة نص كود HTML، كما هو موضح أدناه. قم بتحديد خيار "دعم document.write". الخطوة 3. إعداد آلية التشغيل​ انقر على "آلية التشغيل" واختر "كل الصفحات" من القائمة. اضغط على "حفظ" لحفظ الوسم. ستتمكن من رؤية الوسم مُدرجاً تحت تغييرات مساحة العمل. ثم اضغط على "إرسال" لنشر الوسم. قم بتقديم اسم للإصدار ثم انشر التعديلات بالضغط على "نشر". الخطوة 4. ضع علامة "تم" على المهمة في قائمة مهامك​ لقد نجحت في نشر أداة المحادثة الحية من Chatwoot على موقعك الإلكتروني. قم بتحديث موقعك وسترى الأداة تظهر في جميع الصفحات.

كيف تواصل المحادثات عبر البريد الإلكتروني؟

يمكن لعملائك متابعة محادثاتهم مع وكلائك عبر سلاسل رسائل البريد الإلكتروني. قد يكون هذا مطلوباً في الحالات التالية. - لا يوجد وكلاء متاحون، ويترك العميل رسالة في الدردشة. - يغادر العميل الدردشة قبل أن يرد الوكيل. لكي يعمل هذا، يجب أن يكون لدى جهة الاتصال عنوان بريد إلكتروني في نظام إدارة علاقات العملاء Chatwoot. الحصول على عناوين البريد الإلكتروني لجهات الاتصال​ يمكنك مطالبة العميل بإدخال بريد إلكترونيه أو تحديثه في Chatwoot من خلال الطرق التالية. 1. من خلال Chatwoot SDK​ إذا كان بريد العميل الإلكتروني معروفاً، يمكنك إدخاله في Chatwoot عبر طريقة setUser في SDK الخاص بنا. 2. من خلال نموذج ما قبل الدردشة​ إذا قمت بتمكين نموذج ما قبل الدردشة الإلزامي، ستبدأ المحادثة بشاشة كما هو موضح أدناه: 3. من خلال مطالبة جمع البريد الإلكتروني​ عندما يتم تعطيل نموذج ما قبل الدردشة، وعنوان بريد العميل الإلكتروني غير معروف، يبدأ Chatwoot المحادثة بمطالبة لإدخال البريد الإلكتروني. ملاحظة: عند تمكين "Captain" على صندوق البريد، يتم تعطيل مطالبة جمع البريد الإلكتروني تلقائياً. يتولى "Captain" إجراء المحادثات مباشرةً حتى خارج أوقات العمل. ولن يتم إرسال مطالبة جمع البريد الإلكتروني إلا إذا قام "Captain" بتحويل المحادثة إلى وكيل بشري أو لم يتم تكوين "Captain" لصندوق البريد. استمرارية المحادثة​ ملاحظة: قم بتمكين استمرارية المحادثة في التركيبات المستضافة ذاتياً من خلال هذا الدليل. إذا تم تحديث عنوان البريد الإلكتروني للعميل عبر أي من الخيارات المذكورة أعلاه وغادر الدردشة بينما رد الوكيل، يحدث ما يلي. - يتلقى العميل سلسلة رسائل بريد إلكتروني تحتوي على ملخص للمحادثة. يمكنه الرد على هذا البريد الإلكتروني ومتابعة المحادثة. - يتلقى الوكيل ردود العميل من البريد الإلكتروني في لوحة تحكم Chatwoot الخاصة به، وتستمر المحادثة في نفس سلسلة المحادثة الحالية. تشير أيقونة البريد الإلكتروني في فقاعة الدردشة إلى أن العميل قد رد عبر البريد الإلكتروني.

فهم هوية جهة الاتصال والتحقق من الهوية في Chatwoot

عندما يتواصل أحد العملاء مع فريقك، يقوم Chatwoot بإنشاء ملف تعريف للاتصال به أو تحديثه. يساعد هذا الملف الوكلاء على فهم هوية العميل، وما هي المحادثات التي قام بها من قبل، وأي قناة استخدمها. على سبيل المثال، قد يتواصل نفس العميل معك من خلال: - الدردشة المباشرة على الموقع - واتساب - البريد الإلكتروني - أداة دعم داخل التطبيق يمكن لـ Chatwoot استخدام معرفات مثل عنوان البريد الإلكتروني أو رقم الهاتف أو معرف العميل الفريد لربط هذه التفاعلات بنفس ملف تعريف العميل. مطابقة الاتصال مقابل التحقق من الهوية هناك فكرتان مترابطتان لكنهما مختلفتان: مطابقة الاتصال تساعد Chatwoot في التعرف على أن محادثتين قد تخصان نفس العميل. التحقق من الهوية يساعد Chatwoot في التأكد من أن العميل لديه حق استخدام تلك الهوية فعلاً. هذا الفرق مهم لأنه يمكن لشخص ما إدخال عنوان بريد إلكتروني لعميل آخر في نموذج محادثة عام. يمكن لمطابقة الاتصال فقط تخزين البريد الإلكتروني، لكنها لا تثبت أن الزائر يملك ذلك البريد أو الحساب. ماذا يرى الوكلاء عندما لا يتم التحقق من الهوية عندما لا يتم التحقق من هوية العميل، يعرض Chatwoot مؤشراً تحذيرياً بجوار اسم جهة الاتصال. يساعد ذلك الوكلاء على فهم أن الزائر لم يتم التحقق من هويته بشكل آمن من خلال تطبيقك. هذا لا يعني دائماً أن العميل مشبوه. إنما يعني ببساطة أن Chatwoot لم يتلق رمز تحقق موثوق لهوية هذا الزائر. للطلبات الحساسة، يجب على الوكلاء توخي الحذر قبل مناقشة معلومات خاصة مثل الفواتير أو تفاصيل الحساب أو المعاملات أو حالة التحقق. لماذا التحقق من الهوية مهم يساعد التحقق من الهوية في حماية المحادثات الخاصة بالعملاء. ويقلل من خطر انتحال الشخصية، خاصة عند تقديم الدعم داخل بوابة عملاء مسجلين الدخول أو تطبيق بنكي أو منصة تداول أو لوحة تحكم SaaS أو أي منتج يعتمد على الحسابات. على سبيل المثال، إذا بدأ عميل مسجل الدخول محادثة من بوابتك، يمكن لنظامك إبلاغ Chatwoot بأمان: "هذا الزائر هو العميل 12345، وقد قمنا بالتحقق من ذلك من جانبنا." يمكن حينها لـ Chatwoot الوثوق بالهوية لأنها تم التحقق منها من نظامك الخلفي، وليس مجرد إدخالها يدوياً في نموذج المحادثة. الإعداد الموصى به لزوار المواقع العامة، يمكنك استخدام حقول الاتصال العادية مثل الاسم والبريد الإلكتروني ورقم الهاتف. بالنسبة للمستخدمين المسجلين الدخول، ننصح بتمكين التحقق من الهوية. يكون ذلك مفيداً عندما قد يناقش الوكلاء معلومات حساسة مثل: - تفاصيل الحساب - معلومات الفوترة - الطلبات أو المعاملات - حالة KYC أو التحقق - طلبات الموظفين الداخلية - قضايا دعم العملاء الخاضعة للتنظيم أين يمكن تفعيل التحقق من الهوية يمكن ضبط التحقق من الهوية ضمن إعدادات صندوق الوارد في موقعك. اذهب إلى: الإعدادات -> صناديق الوارد -> اختر صندوق الوارد الخاص بالموقع -> الإعدادات -> التحقق من الهوية في هذا القسم، يعرض Chatwoot المفتاح السري المستخدم لإنشاء رموز هوية آمنة. يمكنك أيضاً اختيار ما إذا كان يجب إلزام التحقق من الهوية لجميع المحادثات. إذا تم تفعيل إلزام التحقق من الهوية لجميع المحادثات، يجب على الزوار تقديم رمز هوية صالح قبل أن يتمكنوا من بدء المحادثات. سيتم رفض الطلبات بدون رموز صالحة. كيف يعمل باختصار يُنشئ تطبيقك توقيعاً آمناً للمستخدم المسجل الدخول. يتحقق Chatwoot من هذا التوقيع قبل الوثوق بهوية المستخدم. يظل السر المستخدم لإنشاء هذا التوقيع على خادمك. ويجب ألا يُعرض في المتصفح. إذا كان التوقيع صالحاً، يعامل Chatwoot هوية العميل على أنها موثقة. إذا كان التحقق من الهوية مفروضاً وكان التوقيع مفقوداً أو غير صالح، يرفض Chatwoot الطلب. ما الذي يجب أن يعرفه الوكلاء لا يحتاج الوكلاء لفهم الإعداد الفني. المهم هو: إذا كان التحقق من الهوية مفعلاً، فإن هوية العميل المعروضة في Chatwoot تأتي من جلسة تسجيل الدخول الخاصة به، وليس من قيمة أدخلها يدوياً في المحادثة. وهذا يمنح فرق الدعم ثقة أكبر عند التعامل مع المحادثات الحساسة. متى يجب استخدام التحقق من الهوية استخدم التحقق من الهوية عندما يتم عرض أداة المحادثة داخل منتج أو بوابة عملاء مسجلين الدخول. أمثلة: - بوابة عملاء فينتك - لوحة تحكم بنكية - منطقة حساب للتجارة الإلكترونية - تطبيق SaaS - بوابة خدمة موظفين - بوابة للرعاية الصحية أو التأمين بالنسبة لمواقع التسويق العامة، قد يكون التحقق من الهوية اختيارياً. أما في دعم العملاء المسجلين الدخول، فهو موصى به بشدة. للمطورين تشرح هذه المقالة المفهوم على مستوى عالٍ. إذا كنت مستعداً لضبط التحقق من الهوية، استخدم دليل الإعداد الفني.

كيف تقوم بتثبيت الدردشة المباشرة على موقع ووردبريس؟

WordPress هو نظام إدارة محتوى شائع. إذا كنت تستضيف موقعك على ووردبريس، يمكنك إضافة أداة الدردشة المباشرة Chatwoot والتحدث إلى زوارك في الوقت الفعلي. يمكن القيام بذلك في 4 خطوات بسيطة باستخدام إضافة Chatwoot لووردبريس. الخطوة 1. تحميل إضافة Chatwoot قم بتنزيل ملف Zip لآخر إصدار من إضافة Chatwoot لووردبريس من GitHub، كما هو موضح أدناه. الخطوة 2. رفع الإضافة إلى موقع ووردبريس الخاص بك سجّل الدخول إلى حسابك في ووردبريس. انتقل إلى لوحة التحكم وانقر على “الإضافات” من الشريط الجانبي. ستتمكن من رؤية زر "أضف جديد". سترى خيارًا لرفع الإضافة، كما هو موضح في لقطة الشاشة أدناه. انقر على “رفع” واختر ملف Zip الذي قمت بتنزيله في الخطوة 1. الخطوة 3. تفعيل الإضافة بمجرد رفع الإضافة، ستظهر لك شاشة نجاح مع خيار "تفعيل الإضافة"، كما هو موضح أدناه. انقر على زر "تفعيل الإضافة". تهانينا! تم تثبيت الإضافة الآن. لإكمال الإعداد، يجب عليك مشاركة بيانات اعتماد تطبيق Chatwoot، كما هو موضح في الخطوات أدناه. الخطوة 4. إعداد الإضافة الآن، ستتمكن من رؤية "إعدادات Chatwoot" ضمن قائمة "الإعدادات" الخاصة بك. انقر عليها لتحديث إعدادات الدردشة المباشرة. ستظهر لك شاشة الإعدادات كما هو موضح أدناه. قم بإعداد إضافة Chatwoot هنا حتى تعمل بشكل صحيح. تحتاج إلى إنشاء صندوق موقع ويب على منصة Chatwoot الخاصة بك. يرجى الرجوع إلى هذا الدليل لإنشاء قناة صندوق الموقع. شرح حقول النموذج كالتالي: 1. رمز موقع Chatwoot / عنوان تثبيت Chatwoot بعد إنشاء صندوق قناة الموقع على Chatwoot، ستحصل على كود برمجي. يمكنك نسخ الرمز والعنوان كما هو موضح أدناه. 2. تصميم الأداة يدعم Chatwoot تصميمين لأداة الدردشة المباشرة – التصميم القياسي وتصميم الفقاعة الموسعة. اختر ما تفضله. 3. موضع الأداة يمكنك تحديد المكان الذي ترغب في وضع أداة الدردشة المباشرة على الموقع حسب تفضيلك. الخيارات المتاحة هي اليسار واليمين. 4. اللغة يدعم Chatwoot أكثر من 30 لغة. اللغة الافتراضية هي الإنجليزية. 5. نص المُشغّل هذا الحقل اختياري. إذا استخدمت تصميم الفقاعة الموسعة، يمكنك تخصيص النص الظاهر على الفقاعة باستخدام هذا الحقل. بعد إكمال النموذج، انقر على زر "حفظ التغييرات". تأكد أيضًا من أنك قد قمت بإعداد صندوق الموقع من Chatwoot. الخطوة 5. تحقق من أن الإضافة تعمل بشكل صحيح قم بزيارة موقعك وتأكد من ظهور أداة الدردشة على الموقع!

كيفية إرسال معلومات مستخدم إضافية إلى Chatwoot باستخدام SDK؟

يتيح لك Chatwoot Website SDK إرسال معلومات إضافية عن المستخدم إلى Chatwoot. إذا قمت بتثبيت الكود الخاص بنا على موقعك الإلكتروني، سيقوم الـ SDK بإتاحة كائن window.$chatwoot. للتأكد من أن الـ SDK قد تم تحميله بالكامل، يرجى التأكد من الاستماع لحدث chatwoot:ready كما يلي: window.addEventListener("chatwoot:ready", function () { // استخدم window.$chatwoot هنا // ... }); إذا كنت ترغب في الاستماع للرسائل في الودجت، يمكنك استخدام الحدث التالي. window.addEventListener('chatwoot:on-message', function(e) { console.log('chatwoot:on-message', e.detail) }) إعدادات SDK لإخفاء الفقاعة، يمكنك استخدام الإعداد المذكور أدناه. ملاحظة: إذا استخدمت هذا، يجب عليك تفعيل الودجت أيضًا. window.chatwootSettings = { hideMessageBubble: false, showUnreadMessagesDialog: false, // تعطيل مربع حوار الرسائل غير المقروءة position: "left", // يمكن أن تكون يسار أو يمين locale: "en", // اللغة المطلوبة useBrowserLanguage: false, // تعيين لغة الودجت من متصفح المستخدم type: "standard", // [standard, expanded_bubble] darkMode: "auto", // [light, auto] // baseDomain: "yourdomain.com" // إعداد إذا كنت تريد تتبع المستخدمين عبر النطاقات الفرعية }; استخدم لغة المتصفح تلقائيًا في ودجت الدردشة المباشرة لعرض ودجت الدردشة المباشرة بلغة متصفح المستخدم، عيّن useBrowserLanguage إلى true في window.chatwootSettings كما في الأعلى. ملاحظة: إذا تم تعيين useBrowserLanguage إلى true، سيتم تجاهل locale المذكور. إذا كانت لغة المتصفح غير مدعومة من chatwoot، سيتم استخدام اللغة المذكورة تحت locale. إذا لم يتم تحديدها أيضًا، سيعود الودجت إلى لغة لوحة تحكم الوكيل. الوضع الداكن يدعم ودجت الدردشة المباشرة من Chatwoot الوضع الداكن بدءاً من الإصدار v2.4.0. لتمكين الوضع الداكن، اتبع الخطوات المذكورة هنا. تصاميم الودجت يدعم Chatwoot تصميمين للودجت. 1. القياسي (الافتراضي) 2. الفقاعة الموسّعة إذا كنت تستخدم الفقاعة الموسعة، يمكنك تخصيص النص المعروض في الفقاعة عن طريق تعيين الوسيط launcherTitle على chatwootSettings كما هو موضح أدناه. window.chatwootSettings = { type: "expanded_bubble", launcherTitle: "تحدث معنا", }; تفعيل نافذة منبثقة لتمكين النافذة المنبثقة، أضف التكوين التالي إلى chatwootSettings. هذا الخيار معطل افتراضياً. window.chatwootSettings = { // ...إعدادات أخرى showPopoutButton: true, } يمكنك أيضاً فتح نافذة الدردشة برمجياً بواسطة الطريقة `popoutChatWindow()`. رسائل مخصصة خصص رسائل الترحيب ورسائل التوافر التي تظهر في رأس الودجت ومؤشرات حالة الفريق. window.chatwootSettings = { // ...إعدادات أخرى welcomeTitle: "هل تحتاج للمساعدة؟", // رأس الودجت المخصص welcomeDescription: "نحن هنا لدعمك.", // العنوان الفرعي للرأس availableMessage: "نحن متصلون وجاهزون للدردشة!", // عندما يكون الفريق متصل unavailableMessage: "نحن غير متصلين حالياً." // عندما يكون الفريق غير متصل }; تبديل الميزات تفعيل أو تعطيل ميزات واجهة المستخدم الاختيارية داخل الودجت: window.chatwootSettings = { // ...إعدادات أخرى enableFileUpload: true, // إظهار زر إرفاق الملفات enableEmojiPicker: true, // تمكين منتقي الرموز التعبيرية في الدردشة enableEndConversation: true // السماح للمستخدمين بإنهاء المحادثة }; فتح النافذة المنبثقة برمجياً يمكنك فتح النافذة المنبثقة برمجياً باستخدام popoutChatWindow(). لبدء ذلك، استدعِ الطريقة كما يلي. window.$chatwoot.popoutChatWindow(); تبديل ظهور فقاعة الودجت إذا كنت ترغب في إظهار/إخفاء فقاعة ودجت Chatwoot، يمكنك فعل ذلك باستخدام toggleBubbleVisibility('show/hide') مثال window.$chatwoot.toggleBubbleVisibility("show"); // لإظهار الفقاعة window.$chatwoot.toggleBubbleVisibility("hide"); // لإخفاء الفقاعة تفعيل الودجت برمجياً إذا كنت ترغب في فتح نافذة الدردشة عند النقر على رابط بالموقع، اتبع الطريقة أدناه. في الإجراء الخاص بك، استدعِ الـ SDK الخاص بـ Chatwoot كما هو موضح بالأسفل. window.$chatwoot.toggle(); // تبديل الودجت عبر تمرير الحالة window.$chatwoot.toggle("open"); // لفتح الودجت window.$chatwoot.toggle("close"); // لإغلاق الودجت تعيين المستخدم في الودجت window.$chatwoot.setUser("<unique-identifier-key-of-the-user>", { email: "<email-address-of-the-user@your-domain.com>", name: "<name-of-the-user>", avatar_url: "<avatar-url-of-the-user>", phone_number: "<phone-number-of-the-user>", }); تقبل setUser معرّف يمكن أن يكون user_id في قاعدة بياناتك أو أي وسيط فريد يمثّل المستخدم. يمكنك تمرير البريد الإلكتروني، الاسم، avatar_url، رقم الهاتف كمعاملات. دعم المعاملات الإضافية قيد التطوير. تأكد من إعادة تعيين الجلسة عندما يقوم المستخدم بتسجيل الخروج من تطبيقك. التحقق من الهوية باستخدام HMAC لحماية المحادثات مع العملاء ومنع انتحال الهوية، ننصح بإعداد التحقق من الهوية في Chatwoot. يتم تفعيل التحقق من الهوية عن طريق إنشاء HMAC (توقيع توثيق الرسائل) بناءً على خاصية identifier، باستخدام SHA256. بجانب identifier يمكنك تمرير identifier_hash أيضاً كما هو موضح أدناه للتأكد من صحة المستخدم. window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, { name: "", // اسم المستخدم avatar_url: "", // رابط الصورة الرمزية email: "", // البريد الإلكتروني للمستخدم identifier_hash: "", // هاش المعرف الذي يتم إنشاؤه بناءً على webwidget hmac_token phone_number: "", // رقم هاتف المستخدم description: "", // وصف عن المستخدم country_code: "", // رمز الدولة من حرفين city: "", // مدينة المستخدم company_name: "", // اسم الشركة social_profiles: { twitter: "", // اسم المستخدم في تويتر linkedin: "", // اسم المستخدم في لينكدإن facebook: "", // اسم المستخدم في فيسبوك github: "", // اسم المستخدم في جيتهاب }, }); لإنشاء HMAC، اطلع على التحقق من الهوية. لاحظ أن تطبيق توثيق HMAC سيسمح باستمرار سجل الدردشة عبر الجلسات. تعيين حقول مخصصة لتعيين معلومات إضافية عن العميل، يمكنك استخدام حقول السِمات المخصصة للعميل. اقرأ المزيد عن الحقول المخصصة هنا. لتعيين حقل مخصص، استدعِ setCustomAttributes كما يلي window.$chatwoot.setCustomAttributes({ accountId: 1, pricingPlan: "paid", // هنا المفتاح يجب أن يكون معرف مسبقاً في السمة المخصصة // يجب أن تكون القيمة حسب النوع (حاليًا يدعم الرقم، التاريخ، النص والرقم) }); يمكنك رؤية هذه المعلومات في اللوحة الجانبية للمحادثة. لحذف حقل مخصص، استخدم deleteCustomAttribute كما يلي window.$chatwoot.deleteCustomAttribute("attribute-key"); تعيين اللغة يدويًا window.$chatwoot.setLocale("en"); لتعيين اللغة يدويًا، استخدم دالة setLocale. تعيين تصنيفات على المحادثة يرجى ملاحظة أن التصنيفات سيتم تعيينها على المحادثة إذا لم يقم المستخدم ببدء محادثة حتى الآن. في هذه الحالة، لن يكون للتعليمات التالية أي تأثير: window.$chatwoot.setLabel("support-ticket"); window.$chatwoot.removeLabel("support-ticket"); تحديث الجلسة (استخدم هذا عند تسجيل خروج المستخدم من تطبيقك) window.$chatwoot.reset(); أخطاء الودجت لرؤية أي أخطاء في الودجت، يرجى التأكد من الاستماع لحدث chatwoot:event كما هو موضح: window.addEventListener("chatwoot:error", function () { // ... }); ملاحظة: هذه الميزة متوفرة في الإصدار v2.3.0 وما بعده. تخصيص رأس الترحيب والوصف يمكنك تغيير: - عنوان الترحيب والوصف - الرسائل التي تظهر عند تواجد فريقك أونلاين أو أوفلاين - تفعيل ميزات واجهة المستخدم بشكل اختياري مثل رفع الملفات، منتقي الرموز التعبيرية، وزر إنهاء المحادثة window.chatwootSettings = { welcomeTitle: 'هل تحتاج للمساعدة؟', welcomeDescription: 'نحن هنا لدعمك.', availableMessage: 'نحن متصلون وجاهزون للدردشة!', unavailableMessage: 'نحن غير متصلين حالياً.', enableFileUpload: true, enableEmojiPicker: true, enableEndConversation: true };

شرح إعدادات الدردشة المباشرة على الموقع الإلكتروني

سيساعدك هذا المستند على إعداد دردشة موقعك الإلكتروني بشكل كامل. يوضح لك كيفية إنشاء واستخدام الإعدادات الإضافية لصندوق وارد الموقع الإلكتروني المرغوب. التوافق والمتطلبات​ يعمل لوحة التحكم على الويب وأداة الدردشة المباشرة مع معظم متصفحات الويب الحديثة. فيما يلي إصدارات المتصفحات المدعومة: - موزيلا فايرفوكس: الإصدار 52 وما بعده - جوجل كروم: الإصدار 57 وما بعده - كروميوم: الإصدار 57 وما بعده - آبل سفاري: الإصدار 14.1 وما بعده - مايكروسوفت إيدج: الإصدار 16 وما بعده وفيما يلي أنظمة تشغيل الهواتف المحمولة المدعومة لتطبيق Chatwoot: - أندرويد: الإصدار 5.0 وما بعده - iOS: الإصدار 11.0 وما بعده كيف تنشئ قناة موقع إلكتروني على Chatwoot؟ الخطوة 1. انتقل إلى صفحة صناديق الوارد. انتقل إلى الإعدادات → صناديق الوارد → زر "إضافة صندوق وارد". الخطوة 2. انقر على أيقونة "موقع إلكتروني". الخطوة 3. أدخل اسم موقعك الإلكتروني، والرابط، وغيرها من التفاصيل كما هو موضّح أدناه. تم شرح الحقول المتوفرة أدناه. 1. اسم الموقع الإلكتروني أدخل اسم موقعك الإلكتروني. على سبيل المثال، Example Inc. 2. نطاق الموقع الإلكتروني أدخل رابط موقعك الإلكتروني. على سبيل المثال، www.example.com 3. لون الأداة انقر على لوحة الألوان واختر لون أداة الدردشة المباشرة في موقعك الإلكتروني. 4. عنوان الترحيب اكتب رسالة ترحيبية لعملائك. على سبيل المثال، مرحبًا بك 👋 5. سطر الترحيب على سبيل المثال، نحن هنا لمساعدتك في استفساراتك. اسألنا أي شيء أو شاركنا ملاحظاتك. 6. تفعيل/تعطيل رسالة الترحيب للقناة فعّل لإرسال رسالة ترحيب عند بدء العميل المحادثة 7. رسالة الترحيب للقناة قدّم ترحيبًا لبدء المحادثة. على سبيل المثال، مرحبًا. كيف يمكننا مساعدتك؟ بعد إدخال جميع التفاصيل، انقر على زر “إنشاء صندوق وارد”. الخطوة 4. "أضف الوكلاء" إلى صندوق وارد موقعك الإلكتروني. ستتم إعادة توجيه المحادثات إلى الوكلاء فقط إذا كانوا مرتبطين بصندوق الوارد. حتى وإن كنت مسؤولاً، عليك إضافة نفسك كوكيل إلى صندوق الوارد لتتمكن من رؤية الصندوق على شاشتك. اختر الوكلاء من القائمة المنسدلة ثم انقر على إضافة الوكلاء. إذا لم تتم إضافة الوكلاء، اتبع الخطوات لإضافة الوكلاء. الخطوة 5. تهانينا! لقد أنشأت صندوق وارد موقع إلكتروني بنجاح. الآن، أضف الأداة إلى موقعك الإلكتروني. انسخ والصق جزء الكود المعروض في الصفحة إلى موقعك وابدأ في دعم عملائك. يمكنك النقر على زر "نسخ" لنسخ ثم اللصق في ملف الجذر لموقعك. إذا نقرت على زر "المزيد من الإعدادات"، سيتم نقلك إلى الإعدادات الإضافية لصندوق الوارد. إذا نقرت على زر "خذني هناك"، سيتم نقلك إلى صندوق الوارد الذي تم إنشاؤه حديثًا. الخطوة 6. إذا رغبت في تحديث الوكلاء الذين لديهم صلاحية على صندوق الوارد، انتقل إلى الإعدادات → صناديق الوارد. ستتمكن من رؤية صندوق وارد موقعك الإلكتروني مدرج هناك. انقر على الإعدادات. ستتمكن من رؤية الكود بالإضافة إلى قائمة الوكلاء الذين لديهم صلاحية للوصول إلى صندوق الوارد. إكمال إعداد صندوق وارد الموقع الإلكتروني أصبح لديك بالفعل صندوق وارد موقع إلكتروني فعّال. لنطلع الآن على الإعدادات الإضافية لصندوق الوارد.​ في شاشة صناديق الوارد لديك، انقر على أيقونة الترس للوصول إلى صفحة الإعدادات. سترى الشاشة التالية: علامة تبويب الإعدادات قم بالتمرير لأسفل لرؤية المزيد من الإعدادات، حيث يمكنك إعداد الإشعارات التي ترغب في تلقيها عند بدء عمل صندوق وارد موقعك الإلكتروني. إليك بعض الأمثلة لفهمك: تفعيل صندوق جمع البريد الإلكتروني مفعّل افتراضيًا. هذا يعني أن رسالة تلقائية لجمع بريد إلكتروني ستظهر عند بدء العميل المحادثة. سيتلقى المستخدم/العميل رسالة تطلب منه إدخال بريده الإلكتروني. تفعيل مقياس رضا العملاء (CSAT). عند تفعيل هذا الخيار، سيتم إطلاق استطلاع رضا العملاء في كل مرة يتم حل تذكرة. يمكن عرض نتائج CSAT لاحقًا في قسم التقارير. انقر على زر "تحديث" لحفظ التغييرات التي قمت بها. علامة تبويب المتعاونون​ انقر على علامة تبويب "المتعاونون". يمكنك هنا إضافة الوكلاء إلى صندوق الوارد أو حذف الوكلاء الموجودين بالفعل في الصندوق. كما يمكنك تفعيل أو تعطيل التعيين التلقائي للمحادثات الجديدة على الوكلاء المضافين لهذا الصندوق. انقر على تحديث لحفظ التغييرات. علامة تبويب ساعات العمل​ انقر على علامة تبويب "ساعات العمل". في هذا القسم، يمكنك تعيين أوقات العمل لفريقك. حدد مربع "تفعيل توفر ساعات العمل لهذا الصندوق" إذا كانت لديك ساعات عمل محددة جيدًا. بمجرد تحديد المربع، سيفتح قسم جديد كما هو موضح أدناه. يمكنك كتابة الرسالة التي ستُعرض للعميل خارج ساعات العمل الرسمية. ملاحظة: عند تفعيل ميزة القبطان (Captain) على صندوق الوارد، يتم إخفاء رسالة عدم التوفر تلقائيًا. القبطان سيتعامل مع المحادثات مباشرة حتى خارج ساعات العمل. ستُرسل رسالة عدم التوفر فقط إذا قام القبطان بتحويل المحادثة إلى وكيل بشري أو إذا لم يكن القبطان مفعلاً لصندوق الوارد. يمكنك أيضًا اختيار ساعات العمل المتاحة لكل يوم من أيام الأسبوع مع المنطقة الزمنية المناسبة. انقر على زر تحديث إعدادات ساعات العمل. علامة تبويب نموذج ما قبل الدردشة​ انقر على علامة تبويب "نموذج ما قبل الدردشة". من خلال ذلك يمكنك جمع معلومات حول عملائك بمجرد دخولهم نافذة الدردشة/أداة موقعك. يمكنك استخدام ذلك لجمع الاسم والبريد الإلكتروني والمزيد قبل بدء المحادثة. تم شرح الحقول الظاهرة أدناه: 1. تفعيل نموذج ما قبل الدردشة اختر نعم أو لا. نعم في حال رغبتك في استخدام نموذج ما قبل الدردشة، لا إذا أردت إبقاءه معطلاً. 2. رسالة ما قبل الدردشة اكتب رسالة لبدء محادثة مع العميل. على سبيل المثال، مرحبًا، نحتاج بعض المعلومات لخدمتك بشكل أفضل. 3. حقول نموذج ما قبل الدردشة حدد الحقول المطلوبة. مهم: "الاسم"، "البريد الإلكتروني" و "رقم الهاتف" هي السمات الافتراضية الوحيدة لنموذج ما قبل الدردشة. أما الحقول الأخرى، فتنشئ عبر السمات المخصصة. إذا كنت بحاجة إلى حقول مخصصة في النموذج، أنشئها كسمات مخصصة أولاً. انقر على زر "تحديث". تم تفعيل نموذج ما قبل الدردشة الآن. علامة تبويب التكوين​ انقر على علامة تبويب "التكوين". ستجد هنا جزء الكود لنسخه إلى موقعك الإلكتروني. يمكنك النقر على زر نسخ لنسخ الكود ومن ثم لصقه في ملف الجذر لموقعك. علامة تبويب منشئ الأداة​ يمكنك تخصيص أداة موقعك عبر الإعدادات البسيطة المتاحة في هذه الصفحة. ستتمكن من رؤية التغييرات مباشرة.

كيف يمكن تفعيل الوضع الداكن في أداة الدردشة المباشرة؟

تتيح المواقع الحديثة للمستخدمين التبديل بين الوضعين الفاتح والداكن. لذلك، يعد وجود دردشة مباشرة تتوافق مع كلا النمطين أمرًا مهمًا. يساعدك هذا الدليل في إعداد الوضع الداكن لأداة الدردشة المباشرة Chatwoot على موقعك الإلكتروني. فيما يلي لمحة سريعة عن كيفية عمل الوضع الداكن على أداة الدردشة المباشرة: لتمكين الوضع الداكن في أداة Chatwoot، استخدم معلمة darkMode مع chatwootSettings. معلمة darkMode تدعم قيمتين. 1. light - تفعيل الوضع الفاتح فقط. هذه هي القيمة الافتراضية. 2. auto - تفعيل الوضع الداكن بناءً على تفضيل نظام التشغيل. window.chatwootSettings = { //... إعدادات أخرى darkMode: "auto", }; ملاحظة: الوضع dark فقط غير مدعوم حاليًا. سنضيف الدعم في الإصدارات القادمة.