Have you ever found yourself in a situation where you needed a Click To Call feature in your Unbounce landing pages or popups? For example, perhaps you have different phone numbers for different locations, and need DTR functionality to work within a link (when the URL the link points to changes based on the value in the URL parameter).
Up until this point, Unbounce DTR couldn’t change button or text link URLs. I’m happy to announce that those days are over, thanks to our in-house developer/marketer/designer/wizard @Luis_Francisco 💥
Luis added DTR to the button and used jQuery to change the link text to include the URL parameter.
You can see this in action (built in Unbounce) here.
To achieve this functionality, follow the instructions below…
🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
Instructions
Enter the following code snippet into your button’s Javascript tab, Before Body End Tag, and follow along with the commented code, and BOOM! You’ve got yourself a Dynamic Click To Call button! 🎉
<script>
function getParameterByName(name) {
var match = RegExp('h?&]' + name + '=(+^&]*)').exec(window.location.search);
return match && decodeURIComponent(matchp1].replace(/\+/g, ' '));
}
//replace 'phone' with your DTR's URL parameter
var dynamicnumber = getParameterByName('phone');
if (!dynamicnumber){
//replace 555-5555 with default phone number fallback if no number is given
var phonenumber = "555-5555";
}
else {
var phonenumber = dynamicnumber;
}
//replace "#lp-pom-button-9" with your button id
$( "#lp-pom-button-9" ).attr("href", "clkn/tel/"+ phonenumber);
</script>
Want to take your Unbounce landing pages + Popups to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks