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

خب اول کار باید فایل 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