افزودن دکمه تماس واتساپ در سایت برنامه نویسی شده و وردپرس

افزودن دکمه تماس واتساپ در سایت برنامه نویسی شده و وردپرس

عموما مشتریان طراحی سایت نیاز دارند که یک دکمه تماس براشون اضافه کنید جدای اینکه تمام شماره های موجود تو سایت قابل تماس هستش بعضی مشتریان دوست دارند به صورت پیامک از طریق واتساپ با شما صحبت کنند.

اینم اطلاع بدم که سیستم تیکت یا چت آنلاین رو خودتون طراحی کنید هم زمانبر هستش و هم هزینه زیادی داره پس برای بیزینس های کوچیک اصلا پیشنهاد نمیکنم.

اضافه کردن یک دکمه تماس از طریق واتساپ هم از طریق سایت میتونه کمک کنه که مشتری اطمینان بیشتری برای خرید داشته باشه.

اگه بازدیده کننده سایت شما با کامپیوتر اومده باشه میتونه به نسخه دسکتاپ پیام بده و بالعکس برای گوشی هم اتوماتیک اپ واتساپ در تو گوشتیون باز میشه

من امروز در برنامه نویسی به صورت خیلی ابتدایی میخام با یک فایل جاوا اسکریپت و یک کلاس سی اس اس یک دکمه تماس واتساپ ایجاد کنم

زمان مطالعه: 3 دقیقه
بازدید: 2498
پرسش و پاسخ: 2

خب اول کار باید فایل js رو داشته باشید کد زیر را در یک فایل به اسم whatsapp.js ذخیره کنید

var ht_ctc_v="3.0.3",url=window.location.href,is_mobile="yes";void 0!==screen.width&&(is_mobile=1024<screen.width?"no":"yes");var post_title=void 0!==document.title?document.title:"";function afterdom_loaded(){"complete"==document.readyState||"interactive"==document.readyState?ht_ctc():document.addEventListener("DOMContentLoaded",ht_ctc)}function ht_ctc_loaded(){afterdom_loaded()}function ht_ctc(){var t=document.querySelector(".ht-ctc-chat");t&&hide_basedon_device(t)}function hide_basedon_device(t){var e,a,c,n;"yes"==is_mobile?"show"==t.getAttribute("data-display_mobile")&&((a=document.querySelector(".ht_ctc_desktop_"+t.getAttribute("data-return_type")))&&a.remove(),c=t.getAttribute("data-css"),e=t.getAttribute("data-position_mobile"),t.style.cssText=e+c,display(t)):"show"==t.getAttribute("data-display_desktop")&&((a=document.querySelector(".ht_ctc_mobile_"+t.getAttribute("data-return_type")))&&a.remove(),c=t.getAttribute("data-css"),n=t.getAttribute("data-position"),t.style.cssText=n+c,display(t))}function display(e){try{var t=parseInt(e.getAttribute("data-show_effect"));jQuery(e).show(t)}catch(t){e.style.display="block"}try{ht_ctc_things(e)}catch(t){}}function ht_ctc_things(t){var e=t.getAttribute("data-an_type");setTimeout(function(){t.classList.add("ht_ctc_animation",e)},120),jQuery(".ht-ctc-chat").hover(function(){jQuery(".ht-ctc-chat .ht-ctc-cta-hover").show(120)},function(){jQuery(".ht-ctc-chat .ht-ctc-cta-hover").hide(100)})}function ht_ctc_shortcode_click(t){data_link=t.getAttribute("data-ctc-link"),data_link=encodeURI(data_link),window.open(data_link,"_blank","noopener"),ht_ctc_analytics(t)}function ht_ctc_click(t){ht_ctc_link(t),ht_ctc_analytics(t)}function ht_ctc_link(t){var e=t.getAttribute("data-number"),a=(a=t.getAttribute("data-pre_filled")).replace(/\[url]/gi,url);a=encodeURIComponent(a);var c,n=t.getAttribute("data-webandapi");""!=e?"webapi"==n?(c="yes"==is_mobile?"https://api.whatsapp.com/send":"https://web.whatsapp.com/send",window.open(c+"?phone="+e+"&text="+a,"_blank","noopener")):(c="https://wa.me/",window.open(c+e+"?text="+a,"_blank","noopener")):t.innerHTML=t.getAttribute("data-no_number")}function ht_ctc_analytics(t){var e=t.getAttribute("data-return_type"),a="";"chat"==e?a=t.getAttribute("data-number"):"group"==e?a=t.getAttribute("data-group_id"):"share"==e&&(a=t.getAttribute("data-share_text")),ht_ctc_ga(e,a,t),"yes"==t.getAttribute("data-is_fb_pixel")&&ht_ctc_fb_pixel(e,a),"yes"==t.getAttribute("data-is_fb_an_enable")&&ht_ctc_fb_an(e,a)}function ht_ctc_ga(t,e,a){var c="Click to Chat for WhatsApp",n=t+": "+e,i=post_title+", "+url;"yes"==a.getAttribute("data-is_ga_enable")&&("undefined"!=typeof gtag?gtag("event",n,{event_category:c,event_label:i}):"undefined"!=typeof ga&&void 0!==ga.getAll?ga.getAll()[0].send("event",c,n,i):"undefined"!=typeof __gaTracker&&__gaTracker("send","event",c,n,i)),"undefined"!=typeof dataLayer&&dataLayer.push({event:"Click to Chat",event_category:c,event_label:i,event_action:n})}function ht_ctc_fb_pixel(t,e){"undefined"!=typeof fbq&&fbq("trackCustom","Click to Chat by HoliThemes",{Category:"Click to Chat for WhatsApp",return_type:t,ID:e,Title:post_title,URL:url})}function ht_ctc_fb_an(t,e){var a={Category:"Click to Chat for WhatsApp"};a.return_type=t,a.ID=e,a.Label=post_title+", "+url,"undefined"!=typeof FB&&FB.AppEvents.logEvent("Click to Chat for WhatsApp",null,a)}afterdom_loaded();

قدم بعدی افزودن کد css به سایتمون هستش که دکمه واتساپ رو در پایین صفحه به صورت شناور قرار بدیم

.btn-whatsapp {
    display: block;
    position: fixed;
    text-decoration: none;
    z-index: 2147483647;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgb(0 0 0 / 30%);
    transform: scale(1);
    bottom: 45px;
    right: 70px;
    background: url(../img/whatsapp.png);
}

دقت کنید تصویر رو با خصوصیت background مشخص کردیم تصویر دلخواه خودتون رو میتونید دانلود و مسیردهی کنید تا نمایش داده بشه.

گزینه right هم مشخص کننده ثابت بودن دکمه در سمت راست صفحه است که اگه دوست دارید به جای right بنویسید left تا در سمت چپ نمایش داده بشه.

مرحله بعدی کد html خود دکمه هستش که باید اضافه کنید تا برای بازدیدکنندگان نمایش داده شود

<a target="_blank" onclick="ht_ctc_click(this);" href="#" class="btn-whatsapp"
       data-return_type="chat"
       data-number="989357669329"
       data-pre_filled="از کارشناسان ما سوال خود را بپرسید"
    ></a>

به همین راحتی که دیدید انجام شد به جای شماره واتساپ من میتونید شماره دلخواهتون رو بزارید.

اگه از وردپرس هم استفاده میکنید میتونید از پلاگینی که لینکشو گذاشتم استفاده کنید

https://wordpress.org/plugins/wp-whatsapp-chat

بهزاد میرزازاده
مسیر درست با پرسش های درست ساخته می شود

مشاهده تمام مطالب نویسنده