How to add a calling feature in Blogger

Hi to all, in this article I am going to tell you about how to add calling feature in blogger website to increase customers services faster.

Here calling feature will be created by using some codes which you need to paste in your blogger website theme code.

This code will not effect your code, if you paste this code any where then definitely it will cause some problem, so to avoid that problem you need to first backup your blogger website theme code safely and then add the below provided CSS code.

By using this calling feature you can increase your customers interaction with your website by spending some time talking with your website visitors and providing solutions of their problems.

And to use this feature in mac you need to have any calling software and same for windows also need some calling software, so you need to download and install any calling software.

• Also Read: How to upload WEBP in WordPress

Steps to add calling feature in blogger

Step-1: First of all you need to login to your blogger account.

Step-2: Click on Theme option and then click on customize option and then click on Edit html.

Step-3: Now click on the screen and press CTRL + F and enter </head> tag.

Step-4: Paste the below provided CSS code above the </head> tag.

Step-5: Paste the code carefully above the closing head tag.

Step-6: Now click on the screen and press CTRL + F and enter </body> tag.

Step-7: Paste the below provided JavaScript code above the </body> tag.

Step-8: After adding the below two codes, click on save button.

Step-9: You need to open your website and check once whether this feature is working correctly or not.

Step-10: If you see the blue color call us button at the bottom right side of the website, then this script is working successfully, you can edit your own mobile number, in the script and can interact with your website customers.

• Also Read: How to add sitemap xml in Blogger & WordPress

• Also Read: Create Password Protected File on Blogger & WordPress

CSS Code [ Paste the below code above the </head> ]

<style> #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: 5; outline: none; background-color: blue; color: white; cursor: pointer; padding: 15px; border-radius: 30px; } #myBtn:hover { background-color: #555; } </style>
Copy

JavaScript Code [ Paste the below code above the </body> ]

<a href="tel:mobile number"><button id="myBtn" title="Calling Feature">Call Us</button></a> <script> //Get the button var mybutton = document.getElementById("myBtn"); // When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script>
Copy

Conclusion