آموزش طراحی سایت و برنامهنویسی وب
دکمه شناور تماس وردپرس؛ واتساپ، تلگرام، ایتا و تماس در یک دکمه + آموزش کامل
- افزونه «دکمه شناور تماس» یک دکمهٔ ثابت گوشهٔ صفحه اضافه میکند که با کلیک، منوی تماس تلفنی، واتساپ، تلگرام، اینستاگرام، ایتا، بله، روبیکا و کانالهای دیگر را باز میکند.
- افزونه رایگان و متنباز است و مهدی حبیبی، بنیانگذار طاووس وب، آن را ساخته است.
- کانالها نامحدودند، افزونه لینک هر کانال را خودکار میسازد و موقعیت، رنگ، آیکون و صفحههای نمایش دکمه قابل تنظیم است.
- در سایت به jQuery نیاز ندارد و فایلهایش را فقط در صفحههای دارای دکمه بارگذاری میکند.
مشتریای که از گوشی وارد سایت شما میشود، معمولاً حوصلهٔ پیدا کردن صفحهٔ «تماس با ما» را ندارد. اگر راه تماس جلوی چشمش نباشد، سراغ سایت بعدی میرود. دکمه شناور تماس همین مشکل را حل میکند: یک دکمهٔ کوچک که همیشه گوشهٔ صفحه میماند و با یک لمس، همهٔ راههای ارتباط با شما را نشان میدهد.
در این مقاله افزونهٔ رایگان دکمه شناور تماس را معرفی میکنیم و قدمبهقدم نصب، افزودن کانالها، تنظیم ظاهر و موقعیت و انتخاب صفحههای نمایش را آموزش میدهیم.
دکمه شناور تماس چیست؟
دکمه شناور تماس (Floating Call Button) یک افزونهٔ رایگان و متنباز وردپرس است که مهدی حبیبی، بنیانگذار طاووس وب، آن را نوشته و با مجوز GPLv2 در گیتهاب منتشر کرده است. نسخهٔ فعلی ۱.۱.۰ است و روی وردپرس ۵.۶ به بالا و PHP ۷.۲ به بالا کار میکند.
افزونه یک دکمهٔ گرد ثابت به صفحه اضافه میکند. با کلیک روی آن منویی از کانالهای ارتباطی باز میشود؛ هر کانال عنوان، زیرعنوان، آیکون و رنگ مخصوص خودش را دارد. اگر فقط یک کانال فعال باشد، دکمه میتواند مستقیم همان لینک را باز کند.
چرا سایت به دکمه شناور تماس نیاز دارد؟
بیشتر بازدیدکنندگان سایتهای ایرانی با موبایل وارد میشوند و ترجیح میدهند در پیامرسانی که همیشه باز است پیام بدهند، نه اینکه فرم پر کنند. یک دکمه شناور تماس فاصلهٔ «علاقهمند شدن» تا «پیام دادن» را به یک لمس کم میکند و چند کار را همزمان انجام میدهد:
- همهٔ راههای تماس (تلفن، واتساپ، تلگرام و پیامرسانهای داخلی مثل ایتا، بله و روبیکا) یکجا جلوی چشم مشتری است.
- مشتری در هر صفحهای که باشد، مثلاً صفحهٔ محصول یا مقاله، بدون جستوجو تماس میگیرد.
- با متن پیشفرض پیام، مشتری لازم نیست شروع گفتگو را خودش بنویسد.
این افزونه برای سرعت سایت هم مشکلی درست نمیکند: CSS و JavaScript بخش سایت روی هم حدود ۶.۵ کیلوبایت است، به jQuery نیاز ندارد و افزونه آن را فقط در صفحههای دارای دکمه بارگذاری میکند.
امکانات افزونه دکمه شناور تماس
افزودن، حذف، غیرفعال کردن موقت و جابهجایی کانالها با کشیدن و رها کردن.
لوگوی آماده برای ایتا، بله و روبیکا، کنار واتساپ، تلگرام، اینستاگرام و لینکدین.
فقط شماره یا نام کاربری را وارد کنید؛ افزونه لینک wa.me، t.me یا tel: را خودکار میسازد و ارقام فارسی را هم میپذیرد.
گوشهها، وسط لبهها یا هر نقطهٔ دلخواه به درصد، با فاصلهٔ جدا برای دسکتاپ و موبایل.
۱۹ آیکون آماده، کد SVG دلخواه یا تصویر؛ رنگ ثابت یا گرادیان دو رنگ و رنگبندی منو.
همهٔ صفحهها، فقط صفحههای انتخابشده یا همه به جز چند صفحه؛ شامل برگهها، نوشتهها و محصولات ووکامرس.
متن آمادهٔ شروع گفتگو برای واتساپ و پیامک و موضوع آماده برای ایمیل.
هر تغییری در رنگ، اندازه و آیکون را همان لحظه در پیشنمایش پیشخوان میبینید.
بدون jQuery، راستچین و چپچین خودکار، برچسبهای ARIA و بسته شدن منو با کلید Esc.
نصب افزونه دکمه شناور تماس
- دانلود فایل افزونهفایل افزونه را از لینک دانلود مستقیم طاووس وب دانلود کنید. فایل zip را باز نکنید.
- بارگذاری در وردپرسدر پیشخوان به «افزونهها ← افزودن افزونه ← بارگذاری افزونه» بروید و فایل zip را انتخاب کنید.
- نصب و فعالسازیروی «هماکنون نصب کن» و بعد «فعالسازی» بزنید.
- منوی جدیدمنوی «دکمه تماس» به پیشخوان اضافه میشود و همهٔ تنظیمات در چهار تب همین صفحه است.
مرحله ۱: کانالهای ارتباطی
در تب کانالهای ارتباطی، سه کانال پیشفرض (تماس تلفنی، واتساپ و تلگرام) آماده است. روی هر کانال کلیک کنید تا تنظیماتش باز شود:
- نوع کانال: با تغییر نوع، آیکون، رنگ و راهنمای فیلد خودکار عوض میشود.
- شماره / نام کاربری / لینک: فقط مقدار را وارد کنید؛ افزونه لینک را میسازد و لینک کامل را هم قبول میکند.
- عنوان و زیرعنوان: متنهایی که در منو میبینید، مثل «پیام در واتساپ» و «پاسخ سریع کارشناسان».
- متن پیشفرض پیام: برای واتساپ و پیامک؛ برای ایمیل همین فیلد موضوع نامه است.
- باز شدن در تب جدید، آیکون و رنگها: برای هر کانال جداگانه.
- کلید «فعال» کانال را موقتاً مخفی میکند، آیکون ☰ برای جابهجایی و آیکون سطل زباله برای حذف است.
افزونه کانالهایی را که فیلد «شماره / نام کاربری / لینک» آنها خالی است، در سایت نشان نمیدهد.
مرحله ۲: افزودن کانال و آیکون دلخواه
پایین فهرست، نوع کانال را انتخاب کنید و روی افزودن بزنید. افزونه کانال جدید را با تنظیمات پیشفرض همان نوع میسازد و شما همهچیزش را تغییر میدهید. نوعهای آماده اینها هستند: تماس تلفنی، واتساپ، تلگرام، اینستاگرام، ایمیل، پیامک، ایتا، بله، روبیکا، لینکدین، آدرس روی نقشه و لینک دلخواه.
برای کانالی که در فهرست نیست، مثلاً یک شبکهٔ اجتماعی دیگر، نوع لینک دلخواه را انتخاب کنید و آیکونش را خودتان بگذارید. برای هر کانال و برای دکمهٔ اصلی سه روش انتخاب آیکون وجود دارد:
| روش | توضیح |
|---|---|
| آیکون آماده | انتخاب از ۱۹ آیکون، از جمله لوگوی ایتا، بله و روبیکا. لوگوی روبیکا چندرنگ است و «رنگ آیکون» روی آن اثری ندارد. |
| کد SVG دلخواه | کد SVG را بچسبانید؛ افزونه بخشهای خطرناک مثل اسکریپتها را خودکار حذف میکند. با fill="currentColor" آیکون همرنگ «رنگ آیکون» میشود. |
| تصویر | انتخاب از کتابخانهٔ رسانه یا وارد کردن آدرس تصویر (PNG، SVG یا WebP). |
مرحله ۳: ظاهر دکمه
در تب ظاهر دکمه آیکون دکمهٔ اصلی، رنگ پسزمینه، رنگ دوم برای گرادیان (خالی بماند یعنی رنگ ثابت)، رنگ آیکون، اندازهٔ دکمه در دسکتاپ و موبایل و انیمیشن پالس را تنظیم کنید. پیشنمایش کنار صفحه همان لحظه بهروز میشود. در بخش «ظاهر منوی کانالها» هم رنگ پسزمینهٔ کارتها، عنوان، زیرعنوان و حاشیه را انتخاب میکنید.
مرحله ۴: موقعیت دکمه
یکی از هشت موقعیت آماده را انتخاب کنید: پایین راست، پایین چپ، پایین وسط، وسط راست، وسط چپ، بالا راست، بالا چپ یا بالا وسط. بعد فاصلهٔ دکمه از لبهٔ صفحه را به پیکسل، جداگانه برای دسکتاپ و موبایل، تعیین کنید.
اگر هیچکدام از موقعیتها مناسب نبود، گزینهٔ دلخواه (درصدی) را بزنید و روی صفحهٔ نمونه کلیک کنید یا نقطه را بکشید. مقدارها را دستی هم میتوانید وارد کنید:
- افقی (W): ۰٪ یعنی لبهٔ چپ و ۱۰۰٪ یعنی لبهٔ راست.
- عمودی (H): ۰٪ یعنی بالای صفحه و ۱۰۰٪ یعنی پایین صفحه.
دکمه با هر مقداری داخل صفحه میماند و جهت باز شدن منو (بالا، پایین یا کنار دکمه) خودکار انتخاب میشود. عرض نقطهٔ شکست موبایل (پیشفرض ۱۰۲۴ پیکسل) و z-index هم در همین تب است.
مرحله ۵: صفحههای نمایش و تنظیمات عمومی
در تب نمایش و عمومی این تنظیمات را دارید:
- وضعیت: روشن یا خاموش کردن کل دکمه.
- دستگاهها: نمایش در دسکتاپ، موبایل یا هر دو.
- یک کانال: اگر فقط یک کانال فعال بود، دکمه مستقیم همان لینک را باز کند.
- متن دسترسیپذیری برای صفحهخوانها و جهت متن منو.
در بخش نمایش در صفحات یکی از سه حالت «همه صفحات»، «فقط صفحات انتخابشده» یا «همه به جز صفحات انتخابشده» را انتخاب کنید. در دو حالت آخر، صفحهٔ اصلی، برگهها (با جستوجو) و شناسهٔ نوشتهها و محصولات را مشخص میکنید. شناسهٔ هر نوشته یا محصول را در آدرس صفحهٔ ویرایش آن میبینید؛ مثلاً در post=123 شناسه ۱۲۳ است.
در پایان روی ذخیره تنظیمات بزنید.
ساخت خودکار لینک کانالها
لازم نیست فرمت لینک هر پیامرسان را حفظ باشید. دکمه شناور تماس از روی مقداری که وارد میکنید لینک درست را میسازد:
| نوع | مقدار نمونه | لینک ساختهشده |
|---|---|---|
| تماس تلفنی | +989121234567 | tel:+989121234567 |
| واتساپ | 989121234567 | wa.me/989121234567?text=… |
| تلگرام | username | t.me/username |
| اینستاگرام | username | instagram.com/username |
| ایمیل | info@example.com | mailto:info@example.com?subject=… |
| پیامک | +989121234567 | sms:+989121234567?body=… |
| ایتا، بله، روبیکا | username | eitaa.com/… · ble.ir/… · rubika.ir/… |
| لینک دلخواه، نقشه، لینکدین | لینک کامل | همان لینک |
شمارهٔ واتساپ را با کد کشور و بدون صفر اول و علامت + وارد کنید (مثل 989121234567). اگر در هر نوعی لینک کامل وارد کنید، مثل https://… یا tg://…، افزونه همان را استفاده میکند.
برای توسعهدهندگان
اگر میخواهید رفتار دکمه شناور تماس را با کد تغییر دهید، این فیلترها در دسترساند:
| فیلتر | کاربرد |
|---|---|
fcb_should_display | تصمیم نهایی نمایش دکمه |
fcb_channels | تغییر فهرست نهایی کانالها |
fcb_channel_url | تغییر لینک یک کانال |
fcb_channel_types | افزودن نوع کانال جدید |
fcb_icons | افزودن آیکون آمادهٔ جدید |
// مخفی کردن دکمه در صفحهٔ سبد خرید ووکامرس
add_filter( 'fcb_should_display', function ( $show ) {
return ( function_exists( 'is_cart' ) && is_cart() ) ? false : $show;
} );رفع مشکلات رایج دکمه شناور تماس
دکمه را در سایت نمیبینید: در تب «نمایش و عمومی» وضعیت روشن باشد، دستگاه موردنظر تیک خورده باشد و صفحهٔ فعلی جزو صفحههای نمایش باشد. حداقل یک کانال فعال با مقدار پر لازم است. اگر افزونهٔ کش دارید، کش را پاک کنید.
دکمه زیر هدر یا ابزارک چت دیگری میرود: مقدار z-index را در تب «موقعیت» بیشتر کنید یا موقعیت دکمه را عوض کنید تا با ابزارک دیگر همپوشانی نداشته باشد.
با کلیک، منو باز نمیشود و مستقیم یک لینک باز میشود: حالت «یک کانال» روشن است و فقط یک کانال فعال دارید. کانال دوم را فعال کنید یا این حالت را خاموش کنید.
اگر مشکل دیگری دیدید، آن را در بخش Issues گیتهاب مطرح کنید.
افزونههای رایگان دیگر طاووس وب را در صفحهٔ افزونههای رایگان وردپرس ببینید.
راه تماس آماده است؛ سایت شما چطور؟طاووس وب سایت فروشگاهی و شرکتی را طوری طراحی میکند که بازدیدکننده سریع به مشتری تبدیل شود؛ از صفحهٔ محصول تا دکمهٔ تماس.
مشاورهٔ رایگان طراحی سایتسؤالات متداول دکمه شناور تماس
افزونه دکمه شناور تماس رایگان است؟
بله. این افزونه کاملاً رایگان و متنباز است و مهدی حبیبی آن را با مجوز GPLv2 منتشر کرده است.
دکمه شناور تماس را از کجا دانلود کنم؟
آخرین نسخه را مستقیم از سرور طاووس وب دانلود کنید؛ لینک آن در کادر دانلود بالای همین صفحه است.
کدام پیامرسانها پشتیبانی میشوند؟
تماس تلفنی، واتساپ، تلگرام، اینستاگرام، ایمیل، پیامک، ایتا، بله، روبیکا، لینکدین و آدرس روی نقشه. با نوع «لینک دلخواه» هر سرویس دیگری را هم میتوانید اضافه کنید.
میشود دکمه را فقط در بعضی صفحهها نمایش داد؟
بله. میتوانید دکمه را در همهٔ صفحهها، فقط در صفحههای انتخابشده یا در همه به جز چند صفحه نمایش دهید؛ شامل صفحهٔ اصلی، برگهها، نوشتهها و محصولات ووکامرس.
میشود برای واتساپ متن پیام آماده گذاشت؟
بله. میتوانید برای واتساپ و پیامک متن پیشفرض پیام و برای ایمیل موضوع پیشفرض تعریف کنید تا مشتری فقط دکمهٔ ارسال را بزند.
دکمه شناور تماس سایت را کند میکند؟
خیر. بخش سایت افزونه حدود ۶.۵ کیلوبایت CSS و JavaScript دارد، به jQuery نیاز ندارد و افزونه آن را فقط در صفحههای دارای دکمه بارگذاری میکند.
میشود موقعیت و رنگ دکمه را تغییر داد؟
بله. هشت موقعیت آماده و یک موقعیت دلخواه درصدی دارید و رنگ دکمه میتواند ثابت یا گرادیان باشد. اندازه و فاصله از لبه هم برای دسکتاپ و موبایل جداست.
