Free Tool

Build a WhatsApp chat widget for your website

Configure it below and try it out right on this page. The bubble in the corner is the real widget, live.

Configure your widget

Changes update the live preview and the snippet instantly.

Pick your country so the code is right (WhatsApp can't find the chat without it), then enter the rest of the number, digits only.

Raise this if the widget ends up hidden behind another element on your site, like a cookie banner or a different chat tool.

Your embed snippet

Paste this before the closing </body> tag on your website.

Live preview

Look at the bottom corner of this page. That's your widget, rendered from the settings above using the real embed script.

Manage your leads on WhatsApp Web

Download the free Chat Quotient Chrome extension to see and manage every conversation directly inside WhatsApp Web, a full WhatsApp CRM experience.

Add to Chrome, It's Free

ما هو عنصر واجهة دردشة WhatsApp؟

عنصر واجهة دردشة WhatsApp هو زر صغير يجلس في زاوية موقع ويب وعند النقر عليه، يفتح محادثة WhatsApp مع الشركة، إما مباشرة إلى رقم WhatsApp الخاص بالشركة أو من خلال نموذج قصير أولاً. يحل محل رابط "تواصل معنا" ثابت أو نموذج بريد إلكتروني بقناة معظم الزوار لديها بالفعل مفتوحة على هواتفهم.

إنه مختلف عن رابط "انقر للدردشة" السادس (مجرد نص أو رمز يفتح wa.me) من حيث أن عنصر واجهة المستخدم قابل للتكوين: الموضع والاللون والتحية المملوءة مسبقاً.

كيفية إضافة عنصر واجهة دردشة WhatsApp إلى موقعك

  1. 1

    قم بتكوين عنصر واجهة المستخدم الخاص بك

    أدخل رقم WhatsApp الخاص بك، ثم اختر لوناً وزاوية لعنصر واجهة المستخدم.

  2. 2

    انسخ المقتطف

    استخدم زر "نسخ المقتطف" أعلاه. إنها وسم <script> واحد، بدون ملفات أخرى أو تبعيات.

  3. 3

    الصقه على موقعك

    أضفه مباشرة قبل وسم الإغلاق </body> من HTML الموقع.

  4. 4

    نشر

    هذا كل شيء. يرسم عنصر واجهة المستخدم نفسه من المقتطف، بدون خطوة بناء أو خلفية أو حساب مطلوب.

أين تلصقه، حسب النظام الأساسي

WordPress
استخدم مكوناً إضافياً مثل "Insert Headers and Footers" أو "WPCode"، أو الصقه مباشرة في footer.php الخاص بك قبل </body> عبر Appearance → Theme File Editor.
Shopify
Online Store → Themes → Edit code → theme.liquid، والصق المقتطف فوق </body> مباشرة.
Wix
Settings → Custom Code → Add Code، قم بتعيينه للتحميل على جميع الصفحات في قسم "Body - end".
Webflow
Project Settings → Custom Code → Footer Code، ثم انشر موقعك.
أي موقع آخر
إذا كان بإمكانك تحرير HTML الخاص بك، الصقه قبل </body>. إنه يعمل بنفس الطريقة في كل مكان.

لماذا تضيف زر WhatsApp إلى موقعك

بدون نموذج، بدون بريد إلكتروني، بدون إعادة تحميل الصفحة

يصل الزوار إليك في تطبيق لديهم بالفعل مفتوح على هواتفهم، بدلاً من الكتابة في نموذج اتصل وانتظر الرد.

يلتقي الزوار حيث هم بالفعل

WhatsApp هو تطبيق المراسلة الافتراضي لمليارات الأشخاص في جميع أنحاء العالم. بالنسبة لمعظم الزوار، لا يوجد شيء جديد للتحميل أو الاشتراك فيه.

تبدأ كل دردشة بسياق

رسالة تحية معبأة مسبقاً تعني أن المحادثة لا تبدأ بدون أساس. يصل الزوار إلى WhatsApp برسالتهم مؤطرة بالفعل.

أنت تتحكم بالضبط حيث يجلس

قم بتعيين اللون والزاوية والإزاحة بحيث يطابق عنصر واجهة المستخدم موقعك بدلاً من فقاعة افتراضية جنرية.

مجاني، بدون عملية موافقة

لا توجد طلبات WhatsApp Business API، لا يوجد رقم منفصل، لا يوجد رمز خارج وسم النص البرمجي الواحد.

زر الدردشة مقابل عنصر واجهة الدردشة. ما الفرق?

زر الدردشة

رابط ثابت أو أيقونة تفتح محادثة WhatsApp عند النقر عليها. لا توجد إعدادات خارج رقم الوجهة.

عنصر واجهة الدردشة

  • لون وموضع وتحية معبأة مسبقاً قابلة للتكوين
  • يعمل في كل مكان: WordPress، Shopify، Wix، Webflow، أو HTML بسيط، بدون تبعيات
  • هذا بالضبط ما تبنيه أعلاه

الأسئلة الشائعة

هل مولد عنصر واجهة دردشة WhatsApp هذا مجاني؟ +

نعم. عنصر واجهة إعادة التوجيه الذي تنشئه أعلاه (برقمك وألوانك وموضعك وتحيتك) مجاني، مع شارة صغيرة "Powered by Chat Quotient". تم التخطيط لنسخة Pro المدعومة بوكيل AI للمستقبل.

هل أحتاج إلى WhatsApp Business API لاستخدامه؟ +

لا. يفتح عنصر واجهة المستخدم محادثة WhatsApp عادية باستخدام رقم WhatsApp الحالي الخاص بك. لا تتطلب موافقة Business API أو رقم منفصل.

هل سيعمل على WordPress أو Shopify أو Wix أو أي موقع ويب آخر؟ +

نعم. إنه وسم <script> واحد بدون تبعيات، لذا فهو يعمل في أي مكان يمكنك لصق HTML فيه: WordPress، Shopify، Wix، Webflow، Squarespace، أو موقع مبني يدوياً.

هل يبطئ عنصر واجهة المستخدم موقعي؟ +

لا يجب أن يكون ملحوظاً. السيناريو صغير، يتم تحميله باستخدام async و defer حتى لا يحجب صفحتك أبداً، وتم رسمه داخل Shadow DOM معزول حتى لا يتضارب مع أنماط موقعك.

هل يمكنني التقاط اسم الزائر قبل ذهابه إلى WhatsApp؟ +

ليس حتى الآن. التقاط العميل المحتمل قبل نقل WhatsApp موجود على الخارطة، وسنعيد تشغيل الزر هنا بمجرد أن يكون جاهزاً.

أين يتم تخزين إعدادي؟ +

في أي مكان على خوادمنا. تعيش إعداداتك بالكامل داخل وسم البرنامج النصي الذي تلصقه على موقعك. لتغيير شيء ما لاحقاً، عد إلى هذه الصفحة وأعد التكوين ونسخ المقتطف الجديد (احتفظ بنسخة من الحالي، حيث لا نقوم بتخزينها لك).

ما الفرق بين زر الدردشة وعنصر واجهة الدردشة؟ +

"زر الدردشة" عادة ما يكون مجرد رابط ثابت يفتح WhatsApp. "عنصر واجهة الدردشة" (الذي تبنيه هذه الأداة) هو مشغل عائم مع تحية وموضع وألوان قابلة للتكوين.

هل يمكنني استخدام رقم WhatsApp الشخصي أم أحتاج إلى رقم تجاري؟ +

أي رقم WhatsApp يعمل، شخصي أو تجاري. ما عليك سوى الإدخال برمز الدولة وبدون مسافات أو علامة زائد.