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

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

بواسطة Ihab Milad
• 13 المقالات

كيفية تمكين التحقق من الهوية في Voxys Connect؟

يساعد التحقق من الهوية في ضمان أن المحادثات بين عملائك ووكلاء الدعم خاصة. كما يساعد في منع الانتحال. يمكن تمكين التحقق من الهوية عن طريق إنشاء HMAC. المفتاح المستخدم لإنشاء HMAC لكل ويدجت ويب يختلف ويمكن نسخه من Inboxes -> Settings -> Configuration -> Identity Validation -> نسخ الرمز المعروض هناك. يمكنك إنشاء HMAC بلغات مختلفة، كما هو موضح أدناه. إنشاء HMAC​ PHP​ <?php $key = '<webwidget-hmac-token>'; $message = '<identifier>'; $identifier_hash = hash_hmac('sha256', $message, $key); ?> Javascript (Node.js)​ const crypto = require('crypto'); const key = '<webwidget-hmac-token>'; const message = '<identifier>'; const hash = crypto.createHmac('sha256', key).update(message).digest('hex'); Ruby​ require 'openssl' require 'base64' key = '<webwidget-hmac-token>' message = '<identifier>' OpenSSL::HMAC.hexdigest('sha256', key, message) Elixir​ 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)) } Python​ 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()

آخر تحديث في May 28, 2026

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

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

آخر تحديث في May 28, 2026

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

تمكّنك مجموعة تطوير البرمجيات (SDK) لموقع Voxys Connect من إرسال معلومات إضافية عن المستخدم إلى Voxys Connect. إذا قمت بتثبيت الكود الخاص بنا على موقعك، فإن الـ 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", // يمكن أن تكون left أو right locale: "en", // تعيين اللغة useBrowserLanguage: false, // تعيين لغة الودجت من متصفح المستخدم type: "standard", // [standard, expanded_bubble] darkMode: "auto", // [light, auto] // baseDomain: "yourdomain.com" // قم بالتكوين إذا كنت تريد تتبع المستخدمين عبر النطاقات الفرعية }; استخدام لغة المتصفح تلقائيًا في ودجت الدردشة الحية لعرض ودجت الدردشة الحية بلغة متصفح المستخدم، قم بتعيين useBrowserLanguage إلى true في window.chatwootSettings المذكورة أعلاه. ملاحظة: إذا تم تعيين useBrowserLanguage إلى true، سيتم تجاهل locale المذكورة. إذا لم تكن لغة المتصفح مدعومة من قبل Voxys Connect، سيتم استخدام اللغة المذكورة تحت locale. وإذا لم تكن موجودة أيضًا، فسيتراجع الودجت إلى locale لوحة تحكم الوكيل. الوضع الداكن​ يدعم ودجت الدردشة الحية في Voxys Connect الوضع الداكن بدءًا من الإصدار 2.4.0. لتمكين الوضع الداكن، اتبع الخطوات المذكورة هنا. تصاميم الودجت​ يدعم Voxys Connect تصميمين للودجت. 1. القياسي (الافتراضي) 2. الفقاعة الموسعة إذا كنت تستخدم الفقاعة الموسعة، يمكنك تخصيص النص المستخدم في الفقاعة عن طريق تعيين معامل launcherTitle في إعدادات voxys connect كما هو موضح أدناه. 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(); تبديل ظهور فقاعة الودجت​ إذا كنت تريد إخفاء/عرض فقاعة ودجت Voxys Connect، يمكنك فعل ذلك باستخدام toggleBubbleVisibility('show/hide') مثال window.$chatwoot.toggleBubbleVisibility("show"); // لعرض الفقاعة window.$chatwoot.toggleBubbleVisibility("hide"); // لإخفاء الفقاعة تفعيل الودجت برمجيًا إذا كنت تريد فتح نافذة الدردشة بالنقر على رابط في الموقع، اتبع الطريقة أدناه. في الإجراء الخاص بك، استدعِ SDK الخاص بـ Voxys Connect كما هو موضح أدناه. window.$chatwoot.toggle(); // تبديل الودجت بتمرير الحالة window.$chatwoot.toggle("open"); // لفتح الودجت window.$chatwoot.toggle("close"); // لإغلاق الودجت تعيين المستخدم في الودجت​ window.$chatwoot.setUser("<مفتاح-معرف-فريد-للمستخدم>", { email: "<[email protected]>", name: "<اسم-المستخدم>", avatar_url: "<رابط-الصورة-الشخصية-للمستخدم>", phone_number: "<رقم-هاتف-المستخدم>", }); تقبل دالة setUser معرفًا يمكن أن يكون user_id في قاعدة بياناتك أو أي معلمة فريدة تمثل المستخدم. يمكنك تمرير البريد الإلكتروني، الاسم، رابط الصورة الشخصية، ورقم الهاتف كمعاملات. دعم المعلمات الإضافية قيد التنفيذ. تأكد من إعادة تعيين الجلسة عند تسجيل خروج المستخدم من تطبيقك. التحقق من الهوية باستخدام HMAC​ لمنع الانتحال وللحفاظ على خصوصية المحادثة مع عملائك، نوصي بإعداد التحقق من الهوية في Voxys Connect. يتم تفعيل التحقق من الهوية عن طريق إنشاء HMAC (رمز مصادقة الرسائل المعتمد على التجزئة) بناءً على خاصية identifier، باستخدام SHA256. بالإضافة إلى identifier يمكنك تمرير identifier_hash كما هو موضح أدناه للتأكد من أن المستخدم هو الصحيح. window.$chatwoot.setUser(`<مفتاح-معرف-فريد-للمستخدم>`, { 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", // هنا المفتاح الذي تم تعريفه مسبقًا في السمة المخصصة // يجب أن تكون القيمة بناءً على النوع (يدعم حاليًا Number, Date, String و Number) }); يمكنك عرض هذه المعلومات في اللوحة الجانبية للمحادثة. لحذف سمة مخصصة، استخدم 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 () { // ... }); ملاحظة: هذه الميزة متاحة في الإصدار 2.3.0 وما بعده. تخصيص رأس الترحيب والوصف يمكنك تغيير: - عنوان الترحيب والوصف - الرسائل المعروضة عندما يكون فريقك متصلًا أو غير متصل - تمكين ميزات واجهة المستخدم بشكل انتقائي مثل رفع الملفات، اختيار الرموز التعبيرية، وزر إنهاء المحادثة window.chatwootSettings = { welcomeTitle: 'هل تحتاج مساعدة؟', welcomeDescription: 'نحن هنا لدعمك.', availableMessage: 'نحن متصلون وجاهزون للدردشة!', unavailableMessage: 'نحن غير متصلين حاليًا.', enableFileUpload: true, enableEmojiPicker: true, enableEndConversation: true };

آخر تحديث في May 28, 2026

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

لدمج Voxys Connect مع تطبيق Vue.js الخاص بك، تحتاج إلى لصق سكريبت أداة Voxys Connect في ملف index.html لتطبيق Vue.js الخاص بك. إليك كيفية القيام بذلك: الخطوة 1. الحصول على سكريبت الأداة​ يمكنك العثور على سكريبت الأداة في إعدادات صندوق الوارد لموقعك الإلكتروني. اذهب إلى الإعدادات -> صناديق الوارد -> اختر قناة موقع الويب الخاصة بك > تبويب Configuration. إذا لم تقم بإنشاء صندوق وارد لموقع الويب بعد، يمكنك العثور على التعليمات خطوة بخطوة هنا. الخطوة 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. التحقق ستتمكن الآن من رؤية أداة Voxys Connect على الصفحة. شيء مثل هذا: وحدة Vue.js و Nuxt.js​ تتوفر وحدة تتم صيانتها من قبل المجتمع (صنعها الفريق الرائع في @huntersofbook) لدمج Voxys Connect في مشاريع Vue 3 و Nuxt 3 الخاصة بك. يمكنك العثور على عرض تجريبي هنا. - عرض وحدة Vue 3. - عرض وحدة Nuxt 3.

آخر تحديث في May 28, 2026

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

إذا كان لديك تطبيق Next.js، يمكنك إضافة أداة الدردشة الحية Voxys Connect والتحدث مع زوارك في الوقت الحقيقي. لدمج Voxys Connect مع تطبيق Next.js الخاص بك، تحتاج إلى مكون يقوم بتحميل سكريبت Voxys Connect. يمكنك القيام بذلك في خطوتين سريعتين. دعنا نوضح ذلك بمثال أدناه. يُظهر هذا المثال مكون React يقوم بتحميل سكريبت Voxys Connect بشكل غير متزامن. الخطوة 1. النسخ والإنشاء! انسخ الكود التالي وأنشئ ملفًا في مجلد components بالاسم ChatwootWidget.js. import React from 'react'; class ChatwootWidget extends React.Component { componentDidMount () { // إضافة إعدادات Chatwoot window.chatwootSettings = { hideMessageBubble: false, position: 'right', // يمكن أن تكون left أو right locale: 'en', // اللغة المراد تعيينها type: 'standard', // [standard, expanded_bubble] }; // الصق السكريبت من إعدادات البريد الوارد باستثناء وسم <script> (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 ستتمكن الآن من رؤية أداة Voxys Connect على الصفحة.

آخر تحديث في May 28, 2026

كيفية تثبيت الدردشة الحية على تطبيق 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; وهكذا... لقد انتهيت. اطلع على المثال الكامل هنا.

آخر تحديث في May 28, 2026

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

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

آخر تحديث في May 28, 2026

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

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

آخر تحديث في May 28, 2026

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

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

آخر تحديث في May 28, 2026

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

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

آخر تحديث في May 28, 2026