كيفية إضافة أداة دردشة واتساب مجانية إلى أي موقع ويب في دقائق معدودة، باستخدام رابط wa.me البسيط، أو استخدام منشئ يعطيك مقطع برمجي قابل للتخصيص بدون الحاجة إلى برمجة.
هناك طريقتان حقيقيتان فقط لإضافة أداة دردشة واتساب إلى موقع ويب دون دفع ثمن: لصق رابط wa.me عادي وتنسيقه بنفسك، أو استخدام منشئ يعطيك مقطع برمجي كامل قابل للتخصيص. كلا الطريقتين مجاني فعلاً، وكلاهما يستغرق بضع دقائق فقط. ينتهي بهما المطاف في أماكن مختلفة جداً بعد ستة أشهر.
يشرح هذا الدليل الطريقتين، بدءاً برابط wa.me البسيط لتفهم بدقة ما تتخلى عنه عندما تتخطاه.
النسخة الحد الأدنى هي سطر واحد من HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>استبدل 15551234567 برقمك بالصيغة الدولية الكاملة، بدون علامة زائد، بدون مسافات، بدون صفر في البداية. معامل text هو رسالة مملوءة مسبقاً، مشفرة بـ URL، إذاً %20 هو مسافة و %2C هو فاصلة. عند النقر عليه، يفتح WhatsApp والرسالة مكتوبة بالفعل في الصندوق، في انتظار الزائر ليضغط الزر الذي يرسل.
wa.me هو اختصار Meta الخاص لهذا، لذلك السلوك من الطرف الآخر متسق دائماً. على الهاتف، يفتح تطبيق WhatsApp مباشرة إذا كان مثبتاً، أو يرسل الزائر إلى متجر التطبيقات إذا لم يكن. على متصفح سطح المكتب دون تطبيق مثبت، يفتح web.whatsapp.com في علامة تبويب جديدة. لا تضطر إلى بناء أي من كشف هذا بنفسك، وهو الجزء الوحيد من هذه الطريقة الذي تم حله لك فعلاً.
كل شيء آخر لم يتم حله. هذا الرابط الواحد هو مجرد نص مزرق تحته خط أينما تضعه. لتحويله إلى الزر العائم في الزاوية السفلية التي يقصدها الناس فعلاً عندما يقولون “أداة دردشة واتساب”، عليك كتابة CSS بنفسك:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>هذا يعمل، لكن الآن تحتاج أيضاً إلى ملف أيقونة، و z-index عالي بما يكفي ليجلس فوق لافتة ملف تعريف الارتباط وأي نوافذ منفثقة دون أن يغطي التنقل الخاص بك على الهاتف المحمول، وخطة لما يحدث عندما يريد شخص ما تغيير نص الرسالة الشهر القادم، وهذا يعني فتح نفس الكتلة من الترميز مرة أخرى، أينما تم لصقها، في كل صفحة أو قالب لديه.
منشئ أداة دردشة واتساب يقوم بنفس عمل الرابط أعلاه، زائد التنسيق والموضع والأيقونة، وتعطيك مقطع script واحد بدلاً من كتلة CSS مخصصة أنت مسؤول عن الحفاظ عليها. إنه مجاني، لا يتطلب حسابًا، ولا يلمس WhatsApp Business API، لذلك لا توجد خطوة تحقق قبل أن تتمكن من استخدامه.
إليك شرح العملية الفعلية:
#25D366) هو الافتراضي، لكن الحقل يقبل أي قيمة hex إذا كنت تريد مطابقته بلون علامتك التجارية بدلاً من ذلك.text في الرابط البسيط، لكن قابل للتعديل من النموذج بدلاً من سلسلة مشفرة بـ URL.عند ملء النموذج، معاينة مباشرة لزر الاتصال تظهر على الصفحة، وشريط الكود بجانبها يحدث في الوقت الفعلي مع المقطع المنتهي:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>انقر فوق نسخ، والصق هذا العلامة الواحدة في أي مكان قبل علامة </body> الختامية على موقعك، والأداة مباشرة. لا حاجة لتحميل أي شيء آخر، لا ملف أيقونة، لا ورقة نمط منفصلة. كل إعداد من النموذج، اللون، الموضع، الإزاحات، الترحيب، النافذة المنفثقة، مشفرة كسمة data- على تلك العلامة الواحدة، لذلك الشيء كله يسافر كلصق واحد.
الاثنان يبدان متشابهين على السطح، زر في الزاوية يفتح WhatsApp، لكنهما يتقدمان بشكل مختلف.
مع النسخة المرسومة يدوياً، كل إعداد هو قيمة مدفونة داخل أنماط مضمنة أو ملف CSS منفصل. تغيير الترحيب يعني العثور على معامل text في سلسلة مشفرة بـ URL وتحريره. نقل الزر لأن لافتة ملف تعريف الارتباط الجديدة تتداخل الآن يعني تحرير CSS مرة أخرى في كل صفحة أو قالب حيث لصقته، وإذا نسيت واحدة، تلك الصفحة بهدوء لديها أداة تبدو مكسورة حتى يلاحظ شخص ما. لا شيء من هذا يفشل بصوت عالٍ، فقط ينجرف من صفحة إلى صفحة.
المقطع المُنتج يحافظ على كل واحد من تلك الإعدادات كسمة مسماة على سطر واحد يمكنك نسخها مرة أخرى من النموذج بالثواني، ثم البحث والاستبدال عبر موقعك إذا كنت لا تستخدم تضمين رأس أو تذييل مشترك. وبما أن منطق الزر الفعلي يعيش في ملف البرنامج النصي المستضاف الذي تشير إليه العلامة، وليس في الكود الذي لصقته، تصحيحات الأخطاء وتحسينات السلوك للأداة نفسها تُشحن دون لمس موقعك مرة أخرى.
الميكانيكا هي نفسها في كل مكان: احصل على المقطع في مكان ما يعرضه على كل صفحة، بشكل مثالي فقط قبل </body>.
theme.liquid، فقط فوق علامة الإغلاق </body>، عبر متجر على الإنترنت → الموضوعات → تحرير الكود.لكل من هذه غموضها الخاص يستحق نظرة أطول في حد ذاته، سنغطي WordPress بمزيد من التفاصيل بشكل منفصل، لكن خطوة اللصق نفسها متطابقة في كل مكان: علامة برنامج نصي واحدة، مكان واحد، يطبق على كل صفحة في وقت واحد.
حمّل الموقع في نافذة حاضنة لذلك الأنماط المخزنة لا تخفي مشكلة حقيقية، والتحقق من الزر على كل من سطح المكتب وهاتف حقيقي، وليس فقط نافذة متصفح بحجم تعديل. انقر عليه مرة واحدة من كل واحد والتأكيد من أنه يفتح WhatsApp (التطبيق على الهاتف المحمول، web.whatsapp.com على سطح المكتب) مع رقمك والرسالة الترحيبية مملوءة بالفعل. ثم مرر الصفحة مع أي لافتات ملف تعريف الارتباط أو عناصر ثابتة مرئية، أكثر الفشل الشائع في هذه النقطة هو تضارب z-index، حيث يعرض الأداة خلف عنصر موضع ثابت آخر بدلاً من فوقه.
هل هذا مجاني فعلاً، أم أن هناك خدعة؟ المنشئ نفسه مجاني بدون حساب مطلوب. برنامج البرنامج النصي للأداة الذي يشير إليه يتم استضافته وتقديمه بدون تكلفة. إذا قمت لاحقاً بتثبيت The Chat Quotient لإضافة Chrome لإدارة المحادثات التي تأتي من خلال الأداة، فهذا له خطته المجانية الخاصة أيضاً، لكنها خطوة منفصلة واختيارية، وليست متطلباً لاستخدام الأداة.
هل أداة واتساب هي نفس الشيء مثل WhatsApp Web؟
لا، وهذا التباس شائع. WhatsApp Web (web.whatsapp.com) هي الواجهة التي تستخدمها لقراءة وإرسال رسائل WhatsApp من متصفح. عنصر أداة دردشة واتساب هو الزر الصغير الذي تضيفه إلى موقعك الخاص الذي، عند النقر عليه، يفتح دردشة، إما في تطبيق WhatsApp على الهاتف المحمول أو في WhatsApp Web على سطح المكتب الذي لا يحتوي على تطبيق سطح المكتب المثبت. الأداة هي شيء تضمنه. WhatsApp Web هو حيث تحدث المحادثة الناتجة عن الفتح.
هل الأداة تعمل إذا لم يقم الزائر بتثبيت WhatsApp؟ على الهاتف المحمول، النقر عليه بدون التطبيق المثبت يرسل الزائر إلى متجر التطبيقات الخاص به لتثبيت WhatsApp أولاً. لا توجد طريقة حول تلك الخطوة، لأن الرابط يعرف فقط كيفية الانتقال إلى WhatsApp نفسه، لا تبديل قناة مراسلة أخرى.
هل يمكن أن يكون لديّ أكثر من رقم واتساب واحد، مثل المبيعات والدعم، على نفس الأداة؟ ليس على زر واحد. الأداة مبنية حول رقم واتساب واحد لكل نسخة. إذا كنت بحاجة إلى نقطتي دخول، فستضيف أداتين بمواضع مختلفة وترحيبات، رغم أنه في هذه النقطة صفحة اتصال مخصصة تحتوي على كليهما المدرج بشكل منفصل عادة ما تكون أوضح للزائرين من زرين عائمين مكدسين في نفس الزاوية.
هل أحتاج إلى معرفة البرمجة لاستخدام المنشئ؟ لا. كل إعداد هو حقل نموذج، والشيء الوحيد الذي تلصقه هو علامة البرنامج النصي الواحدة التي ينتجها، نفس خطوة النسخ واللصق بغض النظر عن منصة موقعك.
رابط wa.me هو كل ما تحتاجه فعلاً إذا كنت مرتاحاً لكتابة والحفاظ على CSS الخاص بك، وكنت لا تمانع في زيارة هذا الكود في كل مرة يحتاج شيء إلى التغيير. منشئ أداة دردشة واتساب ينتج نفس النتيجة، زر عائم يفتح دردشة واتساب مملوءة مسبقاً، بدون CSS وملف الأيقونة والصيانة التي تأتي معه في البيت، وهو لا يزال مجاني.
أضف إضافة Chrome وغيّر طريقة إدارتك لمحادثات واتساب لأعمالك.