Skip to content

Instantly share code, notes, and snippets.

@benaubin
Last active February 11, 2024 18:47
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benaubin/246dc4ca0d4db595fcfb07fd441ab513 to your computer and use it in GitHub Desktop.
Save benaubin/246dc4ca0d4db595fcfb07fd441ab513 to your computer and use it in GitHub Desktop.
Click To Call Bookmarklet

Click to Call Bookmarklet

This bookmarklet calls the phone number in the next element clicked. If a phone number does not exist or is not valid, the user is then prompted to enter a valid phone number. This continues until the user enters a valid phone number, or cancels a prompt.

To install the bookmarklet, type this into your browser's address bar (note the javascript: part):

javascript:var%20script=document.createElement('script');script.src="https://cdn.rawgit.com/penne12/246dc4ca0d4db595fcfb07fd441ab513/raw/e2d6e480556d54f305c1619b177568dc488fc376/install-bookmarklet.js";script.type="text/javascript";document.body.appendChild(script);
/* This contains source code and won't do anything on it's own.
You can use these funtions and variables:
window.bookmarklet() // Start the bookmarklet
window.bookmarkletString //=> A `javascript:` formatted uri that you can copy and paste into your browser's address bar to run the bookmarklet function.
window.displayBookmarklet() //=> Show the bookmarklet as an anchor tag with instructions to drag the link onto your browser's bookmarks bar
window.displayBookmarkletString() //=> Returns code for the above
window.copyString() //=> Copy a string
*/
var bookmarklet = function(){
var phoneNumberFromStr = function(str){
var match = str.match(/\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/);
return match && match[0];
};
var askValidPhoneNumber = function(str){
var phone = phoneNumberFromStr(str||'');
if(phone) return phone;
var str = prompt('Please enter a valid phone number:', str);
return str && askValidPhoneNumber(str);
};
var f = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
var phone = askValidPhoneNumber(target.textContent || target.innerText);
if(phone){
console.log('Calling:', phone);
var a = document.createElement("a");
a.innerText = phone;
a.href = "tel:" + phone;
a.click();
target.addEventListener('click', function(e){
e.preventDefault();
a.click();
});
e.preventDefault();
}
document.removeEventListener('click', f);
};
document.addEventListener('click', f);
};
window._bookmarkletString = ("javascript:(" + bookmarklet.toString() + ")()").replace(/\t|\n/g,'').replace(/\s{2,}/g, ' ');
window.bookmarkletString = window._bookmarkletString.replace(/(\w) /g,'$1%20').replace(/ /g,'');
window.displayBookmarkletString = function(){
return "(function(bookmarkletString){(" + displayBookmarklet.toString() + ')()})("' + window._bookmarkletString.replace(/"/g,'\\"') + '");';
};
window.copyString = function(str){
var textarea = document.createElement("textarea");
textarea.innerText = str;
textarea.style.opacity = 0;
textarea.style.width = 0;
textarea.style.height = 0;
textarea.style.overflow = 'scroll';
textarea.style.position = 'absolute';
textarea.style.top = 0;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
}
window.copyBookmarkletString = function(){
copyString(displayBookmarkletString());
}
window.displayBookmarklet = function(){
var div = document.createElement("div");
div.style.zIndex = '1000000';
div.style.position = 'fixed';
div.style.backgroundColor = 'rgba(0,0,0,0.75)';
div.style.top = '0';
div.style.width = '100vw';
div.style.height = '100vh';
div.style.opacity = '0.5';
var centerWrapper = document.createElement("div");
centerWrapper.style.width = '30vw';
centerWrapper.style.textAlign = 'center';
centerWrapper.style.margin = 'auto';
centerWrapper.style.marginTop = '40vh';
centerWrapper.style.backgroundColor = 'rgba(0,0,0,0.75)';
var a = document.createElement("a");
a.innerText = 'Click to Call';
a.href = bookmarkletString;
a.style.color = 'white';
a.style.margin = 'auto';
a.style.textDecoration = 'none';
a.style.backgroundColor = 'transparent';
a.style.fontSize = '40px';
a.style.textAlign = 'center';
a.style.fontFamily = "'Helvetica Neue', Helvetica, Arial, sans-serif'";
centerWrapper.appendChild(a);
div.appendChild(centerWrapper);
var p = document.createElement("p");
p.innerText = '(Drag the link to your bookmarks bar and click to use)';
p.style.color = 'white';
p.style.position = 'fixed';
p.style.bottom = '16vh';
p.style.right = '9vw';
p.style.textDecoration = 'none';
p.style.backgroundColor = 'transparent';
p.style.fontSize = '25px';
p.style.textAlign = 'right';
p.style.fontFamily = "'Helvetica Neue', Helvetica, Arial, sans-serif'";
div.appendChild(p);
document.body.style.overflow = 'hidden';
document.body.appendChild(div);
}
(function(bookmarkletString){(function (){ var div = document.createElement("div"); div.style.zIndex = '1000000'; div.style.position = 'fixed'; div.style.backgroundColor = 'rgba(0,0,0,0.75)'; div.style.top = '0'; div.style.width = '100vw'; div.style.height = '100vh'; div.style.opacity = '0.5'; var centerWrapper = document.createElement("div"); centerWrapper.style.width = '30vw'; centerWrapper.style.textAlign = 'center'; centerWrapper.style.margin = 'auto'; centerWrapper.style.marginTop = '40vh'; centerWrapper.style.backgroundColor = 'rgba(0,0,0,0.75)'; var a = document.createElement("a"); a.innerText = 'Click to Call'; a.href = bookmarkletString; a.style.color = 'white'; a.style.margin = 'auto'; a.style.textDecoration = 'none'; a.style.backgroundColor = 'transparent'; a.style.fontSize = '40px'; a.style.textAlign = 'center'; a.style.fontFamily = "'Helvetica Neue', Helvetica, Arial, sans-serif'"; centerWrapper.appendChild(a); div.appendChild(centerWrapper); var p = document.createElement("p"); p.innerText = '(Drag the link to your bookmarks bar and click to use)'; p.style.color = 'white'; p.style.position = 'fixed'; p.style.bottom = '16vh'; p.style.right = '9vw'; p.style.textDecoration = 'none'; p.style.backgroundColor = 'transparent'; p.style.fontSize = '25px'; p.style.textAlign = 'right'; p.style.fontFamily = "'Helvetica Neue', Helvetica, Arial, sans-serif'"; div.appendChild(p); document.body.style.overflow = 'hidden'; document.body.appendChild(div);})()})("javascript:(function (){ var phoneNumberFromStr = function(str){ var match = str.match(/\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/); return match && match[0]; }; var askValidPhoneNumber = function(str){ var phone = phoneNumberFromStr(str||''); if(phone) return phone; var str = prompt('Please enter a valid phone number:', str); return str && askValidPhoneNumber(str); }; var f = function(e){ e = e || window.event; var target = e.target || e.srcElement; var phone = askValidPhoneNumber(target.textContent || target.innerText); if(phone){ console.log('Calling:', phone); var a = document.createElement(\"a\"); a.innerText = phone; a.href = \"tel:\" + phone; a.click(); target.addEventListener('click', function(e){ e.preventDefault(); a.click(); }); e.preventDefault(); } document.removeEventListener('click', f); }; document.addEventListener('click', f);})()");
@squishy9876
Copy link

thanks bbg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment