{"id":3027,"date":"2021-07-08T20:36:56","date_gmt":"2021-07-08T20:36:56","guid":{"rendered":"https:\/\/scriptfeeds.com\/blog\/?p=3027"},"modified":"2025-03-12T16:21:01","modified_gmt":"2025-03-12T16:21:01","slug":"add-a-floating-whatsapp-button-without-plugin-in-website","status":"publish","type":"post","link":"https:\/\/scriptfeeds.com\/blog\/development\/add-a-floating-whatsapp-button-without-plugin-in-website\/","title":{"rendered":"How to add Floating WhatsApp button without Plugin in website 2025"},"content":{"rendered":"\n<p>Floating WhatsApp button without Plugin in WordPress website are those which floats on top of Website without disturbing the content of the <a href=\"https:\/\/scriptfeeds.com\/development\/websites\/\" data-type=\"URL\" data-id=\"https:\/\/scriptfeeds.com\/development\/websites\/\">website<\/a>. It works great as a CTA (Call to action) button which helps website visitor to take instant action and respond to any specific action.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block c-table\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#you-can-follow-these-4-steps-to-add-floating-whats-app-button-without-plugin-for-your-wordpress-or-html-website-it-will-work-on-both\">4 steps to add Floating WhatsApp button without Plugin.<\/a><ul><li><a href=\"#so-complete-code-will-look-like-below-after-adding-font-awesome-cdn-link-in-head-tag-so-once-code-added-you-will-have-floating-whats-app-button-without-plugin-on-your-word-press-website\">Complete Code to have Floating WhatsApp button<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Floating button can be anything like Call button, Whatsapp, social icons, Mail icon which direct customer to specific link when they click on it. In this blog we gonna show you how you can add a <strong>Floating WhatsApp button without Plugin<\/strong> on your website (WordPress or HTML) without using any JavaScript. Its a pure HTML and CSS based floating WhatsApp button without plugin.<\/p>\n\n\n\n<p>Let&#8217;s come to point.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"you-can-follow-these-4-steps-to-add-floating-whats-app-button-without-plugin-for-your-wordpress-or-html-website-it-will-work-on-both\"><strong>You can follow these 4 steps to add Floating WhatsApp button without Plugin for your wordpress or HTML website. It will work on both.<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the font awesome icons CSS via max CDN link before &lt;\/head&gt;. if its already added in your WordPress by theme developer then ignore this step.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the whatsapp button link which will initiate the opening process. Add your own number and text in code below.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/api.whatsapp.com\/send?phone=0987654321&amp;text=Hello%21%20.\" class=\"floating\" target=\"_blank\"&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the fa-fa icon HTML code to make it float.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i class=\"fa fa-whatsapp float-button\"&gt;&lt;\/i&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-medium-font-size\" id=\"so-complete-code-will-look-like-below-after-adding-font-awesome-cdn-link-in-head-tag-so-once-code-added-you-will-have-floating-whats-app-button-without-plugin-on-your-word-press-website\"><strong>So complete Code will look like below after adding Font-awesome CDN link in &lt;head&gt; tag<\/strong>. So once code added, you will have <strong>Floating WhatsApp button without Plugin<\/strong> on your WordPress website.<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/api.whatsapp.com\/send?phone=0987654321&amp;text=Hello%21%20.\" class=\"floating\" target=\"_blank\"&gt;\n&lt;i class=\"fa fa-whatsapp float-button\"&gt;&lt;\/i&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add CSS in your CSS file to make it float on website. You can change CSS as per requirement like Left\/right, Height, width etc.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>.floating{\n\tposition:fixed;\n\twidth:60px;\n\theight:60px;\n\tbottom:40px;\n\tright:40px;\n\tbackground-color:#25d366;\n\tcolor:#FFF;\n\tborder-radius:50px;\n\ttext-align:center;\n       font-size:30px;\n\tbox-shadow: 2px 2px 3px #999;\n  z-index:100;\n}\n\n.float-button{\n\tmargin-top:16px;\n}<\/code><\/pre>\n\n\n\n<p>Once all done the final result will be like a floating WhatsApp button on right bottom on your screen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1574\" height=\"600\" src=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin.jpeg\" alt=\"Floating whatsapp button without Plugin\" class=\"wp-image-3956\" title=\"Floating whatsapp button without Plugin\" srcset=\"https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin.jpeg 1574w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-300x114.jpeg 300w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-1024x390.jpeg 1024w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-150x57.jpeg 150w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-768x293.jpeg 768w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-1536x586.jpeg 1536w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-399x152.jpeg 399w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-800x305.jpeg 800w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-750x286.jpeg 750w, https:\/\/scriptfeeds.com\/blog\/wp-content\/uploads\/2023\/02\/Floating-whatsapp-button-without-Plugin-1140x435.jpeg 1140w\" sizes=\"(max-width: 1574px) 100vw, 1574px\" \/><figcaption class=\"wp-element-caption\">A Floating WhatsApp button on a on<a href=\"https:\/\/namamigangespiritual.org\/\" data-type=\"URL\" data-id=\"https:\/\/namamigangespiritual.org\/\" target=\"_blank\" rel=\"noopener\"> Namamigange Spiritual<\/a> Website<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Just follow all the steps below and you are good to go. In case if its not showing properly then do a hard refresh (Ctrl+F5) or open in Incognito Mode to check.<\/p>\n\n\n\n<p class=\"has-primary-color has-text-color\"><strong>You can use same code to show any floating icon like Calling button or social button. Just replace the font awesome code in 3rd step with the respective fa-fa icon and link. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"jeg_video_container jeg_video_content\"><iframe loading=\"lazy\" title=\"How to add floating WhatsApp button without Plugin in website - Scriptfeeds\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/aaT7xAQhFnc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p>You can also align multiple buttons one above other. It&#8217;s all about how to use CSS code.<\/p>\n\n\n\n<p class=\"has-text-color\" style=\"color:#b50303\">NOTE : If you are using WordPress then add the fontawesome CSS in header file using insert header footer plugin (Use if your theme don&#8217;t have option to add CSS\/JavaScript code in header or footer). Add CSS code in style.css file of your child theme and Floating link and HTML code in footer of your theme.<\/p>\n\n\n\n<p>So that&#8217;s all. Give it a try and let us know how it works in comment section. You can <a href=\"https:\/\/scriptfeeds.com\/blog\/hire-us\/\" data-type=\"page\" data-id=\"3537\">ask our Developer<\/a> to help you<\/p>\n\n\n\n<p>Happy Coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Floating WhatsApp button without Plugin in WordPress website are those which floats on top of Website without disturbing the content of the website. It works great as a CTA (Call to action) button which helps website visitor to take instant action and respond to any specific action. Floating button can be anything like Call button, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3422,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"subtitle":"","format":"standard","video":"","gallery":"","source_name":"","source_url":"","via_name":"","via_url":"","override_template":"0","override":[{"template":"1","single_blog_custom":"","parallax":"1","fullscreen":"1","layout":"right-sidebar","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"top","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"0","post_reading_time_wpm":"300","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"1","show_popup_post":"1","number_popup_post":"1","show_author_box":"0","show_post_related":"0","show_inline_post_related":"0"}],"override_image_size":"0","image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post":"0","trending_post_position":"meta","trending_post_label":"Trending","sponsored_post":"0","sponsored_post_label":"Sponsored by","sponsored_post_name":"","sponsored_post_url":"","sponsored_post_logo_enable":"0","sponsored_post_logo":"","sponsored_post_desc":"","disable_ad":"0"},"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[75,71],"tags":[118,119,120],"class_list":["post-3027","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-development","tag-3-steps-to-add-floating-button-in-wordpress","tag-whatsapp-floating-button-for-whatsapp","tag-whatsapp-floating-button-without-plugin"],"_links":{"self":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/3027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/comments?post=3027"}],"version-history":[{"count":0,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/posts\/3027\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media\/3422"}],"wp:attachment":[{"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/media?parent=3027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/categories?post=3027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scriptfeeds.com\/blog\/wp-json\/wp\/v2\/tags?post=3027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}