Create an incoming call animation for a Joomla site

The incoming call icon highlights your phone number. Make it easy for visiting customers to contact you. This is a useful tool for e-commerce sites.

You can install the JMP Incoming Call module and use it on Joomla 3 and 4.

Incomming Call Demo Forum

Parameters you can customize:

  • Phone number
  • Color
  • Icon position

This is the fastest and easiest way. If you don't want to install it for some reason, you can use the JMP Custom module to create this icon.

After downloading and installing JMP Custom, go to the Module management section > New > JMP Custom

Here, enter the parameters as below:

HTML:

<a href="tel:911" class="pulse"><i class="fas fa-phone fa-2x"></i></a>

 

CSS:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css");
.pulse i{color:#fff}
.pulse{height:100px;width:100px;background-color:orange;border-radius:50%;display:flex;justify-content:center;align-items:center;position:fixed;bottom:50px;right:50px;z-index:999}
.pulse:hover{text-decoration:none;}
.pulse::before{content:"";position:absolute;border:1px solid orange;width:calc(100% + 40px);height:calc(100% + 40px);border-radius:50%;animation:pulse 1s linear infinite}
.pulse::after{content:"";position:absolute;border:1px solid ORANGE;width:calc(100% + 40px);height:calc(100% + 40px);border-radius:50%;animation:pulse 1s linear infinite;animation-delay:.3s}
@keyframes pulse {
0%{transform:scale(0.5);opacity:0}
50%{transform:scale(1);opacity:1}
100%{transform:scale(1.3);opacity:0}
}

 

In the HTML field, replace "911" with your phone number.

In the CSS field, replace "orange" with your preferred color (HEX/RGB). If your site already has Font Awesome built-in, you can remove the line of code:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css");

You may also like

Best Free Joomla 4 Templates of 2022

Joomla Modal & Popup Extension

JoomHelper Media Plugin

Say something here...
You are a guest ( Sign Up ? )
or post as a guest
Loading comment... The comment will be refreshed after 00:00.

Be the first to comment.


Powered By JLex Comment.