Make "click to phone-call" links for your mobile users only (accepts encrypted phone numbers)
GPL-3.0 License
Tiny JavaScript library, for making Phone call links, for modern mobile web browsers, this library is not needed, phone numbers are automatically detected, but on older ones, it's not, and if you manage to add a <a href='tel:XXX'>
it may be clickable by non-mobile users and the link will lead to a wrong web page.
The name is from telefonillo
means Call him
(in Algerian dialect), and I found that it means Door Phone
in Spanish.
TLDR: JS library for creating "click to call" links for mobile users.
<a href=tel://###>
if the visitor is on mobile device.Have an issue? A better trick? Open an issue, we'd like to hear from you!
Inlude the telefonilo.js
script in your HTML.
<script src="dist/telefonilo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/telefonilo.min.js" integrity="sha256-dHltx45U5E48U7ebYh/IR8UoQIKU5nzzYJluNLk+jLA=" crossorigin="anonymous"></script>
npm i telefonilo.js
Instantiate Telefonilo by calling Telefonilo();
. you can pass a selector of the tags containing phone numbers (ex: Telefonilo('#my-phone-number')
or Telefonilo('.phone-numbers')
) By default Telefonilo lookup for .phone-num
classes.
<div class="container">
<p>
If you're on a mobile phone you should click on<span class="phone">0123456789</span>
</p>
</div>
<script src="../dist/telefonilo.js"></script>
<script>Telefonilo('.phone'); </script>
To avoid spam and crawlers, you may want to encrypt phone numbers on your web pages. For example, you're using encryptionFct
to encrypt phone numbers when rendering your page:
function encryptionFct(str){
return str.split('').map(n => (n.charCodeAt(0)+5)).join('-')
}
// encryptionFct('0123456789') Will return "53-54-55-56-57-58-59-60-61-62"
<p>
If you're on a mobile phone you should click on
<span class="phone">53-54-55-56-57-58-59-60-61-62</span>
</p>
Then you can load Telefonilo
and pass you decryption function, for example
<p>
If you're on a mobile phone you should click on
<span class="phone">53-54-55-56-57-58-59-60-61-62</span>
</p>
<script src="../dist/telefonilo.js"></script>
<script>
var decrypTionFct = function(str) {
return str.split('-').map(n => String.fromCharCode(n-5)).join('');
}
// Initialize Telefonilo inside a captcha-check callback, or after a certain time/event to avoid crawlers
Telefonilo('.phone', true, decrypTionFct);
</script>
Ctrl+Shift+M
, you should switch to the mobile view, you should see that the phone number became a clickable.<a href="tel://xxxx">
link to your phone number <p>If you're on a mobile phone you should click on <span class="phone"><a href="tel://0123456789">0123456789</a></span></p>
# Running unit tests with Jest
$ npm test # Or: npm run watch-tests
# Getting the test coverage, it creates a [./coverage] directory
$ npm run coverage
The file src/telefonilo.js is not production-ready, it exports the private functions in order to test them. To use Telefonilo, you can find two files (minified and unminified verion) in dist/.
# Build with Gulp, it generates two files
$ npm run build
The generated dist/telefonilo.js
is a copy of src/telefonilo.js
without that peice of code that exports the private functions. To verify run:
$ diff src/telefonilo.js dist/telefonilo.js
Doing...
This project is licensed under the GNU GPL v3.0 License - see the LICENSE file for details