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, 4 and 5.
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");
Here is the working page on the test site:
https://testsite.formalms.org/forma-plugins/375-2factor-authentication-plugin.html
Here the production site:
https://formalms.org/forma-plugins/375-2factor-authentication-plugin.html