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.

• How to add Facebook Messenger Live Chat to Joomla

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

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");