Awesome Call To Action Widget Code

Read Time:2 Minute, 1 Second

Ever wanted or needed a simple floating call to action button for your website. You can see an example on this website your currently on, on the lower right hand corner.

Well, I’ll provide you with the code to do so, all you will need to do is add some CSS, HTML and a img to your website in order for this to work.

Call To Action Widget Code

First your going to need a place to store the files, i suggest creating a folder called /corner-widget/. Inside this folder create a index.php file aswell.

Go your your websites main .css file and add the following css somewhere

#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 768px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

}

Once you have added the CSS open up the index.php or index.html file of your website. In the index file please add the following code somewhere within the opening and closing body tags.

<div style="position: fixed; right: -2px; bottom: -4px; margin: 0px;padding: 0px; border: none; float: none; z-index: 100000;">
<div id="content-mobile">
<div align="center">
</div>
</div>
<div id="content-desktop">
<div align="center">

 <a href="https://YOURWEBSITELINK.com" target="_blank"><img src="https://yourwebsite.com/corner-img.png" alt="ADD YOUR TITLE TEXT HERE" style="background-color: transparent;border: none;z-index: 10000;"></a>

</div>
</div>
</div>

Your going to need to edit the URL and possibly the Image if it does not align with your business or offer. Once you have edited everything just hit save and then visit the index page of your website. you will now notice your image and link floating in the lower right hand corner of your website.

Here’s a Demo of the script I’ve shared in this post.

Conclusion

Simple way to have a eye catching call to action on your website. I should add this code will display on desktop only and when the screen is made smaller than 768 the widget will disappear. this was done so mobile users don’t get annoyed by having this image blocking their navigation.

Enjoy.

Leave a Reply

Previous post Stupid Simple PHP URL Shortener In Less than 10 Lines Of Code!
Next post 15 Free Commercial Use Image Sites To Use With Your Marketing.