كود HTML جاهز للنسخ واللصق لأداة واتساب، من رابط wa.me المجرد إلى زر عائم كامل، بالإضافة إلى ما يترك لك الكود الخام وحده بناءه بنفسك.
إذا كنت تبحث عن كود HTML الفعلي، ها هو، بدون الحاجة إلى التسجيل:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>استبدل 15551234567 برقمك بالصيغة الدولية الكاملة: رمز الدولة أولاً، بدون علامة زائد، بدون مسافات، بدون صفر في البداية. هذا الرابط وحده كافٍ لفتح محادثة واتساب مع نشاطك التجاري. وهو أيضاً الإجابة الصادقة الكاملة على طلب “أعطني كود HTML للأداة”، لأن كل ما يأتي بعد هذه النقطة هو أنت (أو منشئ) تبني الأجزاء التي لا يغطيها هذا السطر الواحد.
يصل الزائر إلى الرابط دون أي شيء مكتوب. أضف معامل text لتكون هناك رسالة بالانتظار في الصندوق عند فتح الدردشة:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>يجب أن تكون الرسالة مشفرة بصيغة URL: %20 تعني مسافة، و%2C تعني فاصلة، و%27 تعني علامة اقتباس مفردة. اكتب الجملة التي تريدها أولاً، ثم مررها عبر أي مشفر URL قبل لصقها في قيمة text، لأن مسافة أو علامة ترقيم خام في منتصف سلسلة الاستعلام ستكسر الرابط في بعض المتصفحات.
الرابط النصي ليس ما يقصده معظم الناس بـ”أداة واتساب”. الزر في الزاوية هو CSS فوق نفس الرابط:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>تتخطى هذه النسخة الحاجة إلى ملف أيقونة منفصل عبر تضمين رمز الهاتف/الدردشة كـ SVG مباشرة داخل الكود، لذلك فهي كتلة واحدة مكتفية ذاتياً فعلاً: الصقها قبل </body> ولا يوجد شيء آخر لتحميله. لكنها لا تزال تترك لك أربعة أمور للتعامل معها يدوياً، وهنا يثبت المنشئ الفعلي جدارته.
الهاتف المحمول وسطح المكتب لا يتصرفان بنفس الطريقة، ولا شيء في هذا المقطع يتحكم بذلك. النقر على رابط wa.me على هاتف مثبت عليه واتساب يفتح التطبيق مباشرة. إذا لم يكن التطبيق مثبتاً، يرسل الزائر إلى متجر التطبيقات بدلاً من ذلك، ولا توجد رسالة بديلة أو طريقة تواصل احتياطية يمكنك إعدادها من الرابط نفسه. على متصفح سطح المكتب، يفتح web.whatsapp.com في علامة تبويب جديدة، وهذا يعمل فقط إذا كان الزائر مسجلاً دخوله بالفعل إلى WhatsApp Web في ذلك المتصفح، وإلا فسيحدّق في رمز QR دون أي سياق يوضح السبب. النتائج الثلاث كلها تأتي من نفس الـ href. لا يمكنك اكتشاف أي منها سيحدث أو اعتراضه باستخدام HTML عادي.
الرسالة المملوءة مسبقاً موجودة في الرابط، لا في حقل نموذج. غيّرها وستعود إلى تشفير سلسلة جديدة يدوياً، والعثور على كل صفحة تم لصق الرابط فيها، واستبدالها هناك أيضاً إذا لم يكن لديك قالب مشترك.
لا يوجد ملف أيقونة يمكن استبداله دون تعديل مسار SVG يدوياً، ولا طريقة لإعادة تموضع الزر أو تغيير حجمه أو لونه دون لمس كتلة النمط المضمّن مباشرة، سطراً سطراً.
لا شيء هنا يلتقط عميلاً محتملاً قبل فتح الدردشة. الرابط (أو الزر) ينتقل مباشرة إلى واتساب لحظة النقر عليه. إذا أردت اسماً وسبباً للتواصل قبل بدء المحادثة، فذلك نموذج منفصل عليك بناؤه، وربطه، وتمريره بطريقة ما إلى معامل text بنفسك.
منشئ أداة دردشة واتساب هو أداة مجانية تحول نفس مجموعة الإعدادات القليلة إلى علامة script واحدة بدلاً من كتلة CSS تحافظ عليها بنفسك. اضبط رقمك، اختر لوناً، حدد الموضع والإزاحات، اكتب رسالة ترحيب، وقم اختيارياً بتفعيل نموذج ما قبل الدردشة (سؤال قصير، مع تحديد البريد الإلكتروني أو الهاتف كإلزامي أو لا) يجمع السياق قبل فتح نافذة واتساب أصلاً. تُخرج الأداة هذا:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>كل إعداد هو سمة data- مسمّاة على سطر واحد، لذلك تغيير رسالة الترحيب أو نقل الزر إلى الزاوية الأخرى يعني إعادة نسخ العلامة من النموذج، لا البحث في ملف CSS. الأيقونة، ومنطق التموضع، ومعالجة الروابط العميقة للهاتف المحمول مقابل سطح المكتب، ونموذج ما قبل الدردشة، كلها تعيش في البرنامج النصي المستضاف الذي تشير إليه العلامة، وهذا ما لا يستطيع كود HTML الخام أعلاه القيام به بمفرده دون أن تكتبه بنفسك.
إذا كنت تلصق مقطعاً منتجاً وتريد معرفة ما يتحكم فيه كل سطر قبل تعديله يدوياً، إليك ما تقبله العلامة:
| السمة | ما تتحكم به |
|---|---|
data-widget-id | معرف فريد يصدره المنشئ، لا تقم بتعديله |
data-whatsapp-number | رقم الوجهة، بالصيغة الدولية، بدون + |
data-color | خلفية الزر، أي قيمة hex |
data-position-vertical | top أو bottom |
data-position-horizontal | left أو right |
data-offset-vertical / data-offset-horizontal | المسافة بالبكسل من تلك الحافة |
data-z-index | ترتيب التكديس، ارفعه إذا كان عنصر ثابت آخر يغطي الزر |
data-greeting | نص الرسالة المملوءة مسبقاً، بدون الحاجة إلى تشفير URL يدوي |
data-prechat | true لعرض نموذج قصير قبل فتح الدردشة |
data-prechat-title / data-prechat-description / data-prechat-question | النص المعروض على نموذج ما قبل الدردشة |
كل من كود HTML الخام وعلامة script المُنتجة يذهبان إلى نفس المكان: مكان يُعرض على كل صفحة، ويُفضل أن يكون ذلك قبل </body> مباشرة.
theme.liquid، فوق </body> مباشرة، عبر متجر على الإنترنت → الموضوعات → تحرير الكود.هل يتطلب رابط HTML الخام حساب WhatsApp Business؟
لا. رقم واتساب شخصي يعمل مع رابط wa.me بنفس الطريقة التي يعمل بها رقم Business. الميزات الخاصة بـ Business، مثل الكتالوج أو الردود الآلية، ليست جزءاً من الرابط نفسه.
لماذا يعرض زري صورة مكسورة بدلاً من أيقونة؟
يحدث هذا عندما يشير كود HTML إلى ملف أيقونة خارجي (<img src="/whatsapp-icon.svg">) لم يتم تحميله إلى ذلك المسار. تتجنب نسخة SVG المضمّنة أعلاه هذا الأمر تماماً لأن الأيقونة مكتوبة مباشرة داخل كود HTML.
هل يمكنني وضع كود HTML الخاص بالأداة داخل علامة <head> بدلاً من ذلك؟
من الناحية التقنية، تحتاج علامة الرابط نفسها إلى أن تُعرض داخل <body>، لأن محتوى <head> لا يُعرض. يمكن للبرامج النصية أن تُحمّل من <head>، لكن وضع المقطع قبل </body> مباشرة يتجنب حجب العرض، وهو النمط الذي تتوقعه معظم أدوات إنشاء المواقع.
هل هناك حد لعدد أدوات واتساب التي يمكنني إضافتها إلى صفحة واحدة؟ لا شيء يمنعك من لصق اثنتين، لكن زرين عائمين مكدسين في نفس الزاوية عادة ما يبدوان كخلل بدلاً من ميزة. إذا كنت بحاجة إلى رقمين (المبيعات والدعم، على سبيل المثال)، امنح كل واحد موضعاً مختلفاً بدلاً من تراكبهما.
هل يعمل هذا بنفس الطريقة على Squarespace؟ لوحة حقن الكود في Squarespace (ضمن الإعدادات → متقدم) تقبل أياً من النسختين بنفس الطريقة التي تقبل بها كتلة HTML المخصصة في WordPress، وحقن التذييل يطبقها على مستوى الموقع بأكمله من مكان واحد.
كود HTML الحرفي لأداة واتساب هو علامة <a href="https://wa.me/..."> واحدة، والآن أصبحت لديك. تحويل ذلك إلى الزر العائم، المُعلّم بالعلامة التجارية، والملتقط لجهات الاتصال المحتملة الذي يتخيله الناس عادة، يعني إما كتابة والحفاظ على CSS وحالات الروابط العميقة الحدية بنفسك، أو ترك منشئ أداة دردشة واتساب يُخرج علامة script الجاهزة بلصقة واحدة، مجاناً، دون الحاجة إلى حساب.
أضف إضافة Chrome وغيّر طريقة إدارتك لمحادثات واتساب لأعمالك.