[How to Add] Dynamic Click To Call Buttons

  • 1 February 2018
  • 16 replies
  • 316 views
Jess
Rank
Userlevel 7
Badge +1
  • Jess Unbouncer
  • Former Community Manager @ Unbounce
  • 831 replies

tips-scripts-banner

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('[?&]' + name + '=([^&]*)').exec(window.location.search);
 return match && decodeURIComponent(match[1].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?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

16 replies

digibomb
Userlevel 6
Badge +1

Pretty darn useful …

C

Don’t you mean “Before Body End Tag” cause any other choice, does not work (for me at least).
58%20AM

E

Hello @Jess and @Luis_Francisco ,

I was able to make it work with a button, but not a text link.

Do I need to change something particular in the script in order for it to work with a link indicated in a text element ?

Also, if no parameter is indicated in the URL, could you please make it use the default phone number indicated in the URL ?

E

Hello @Jess and @Luis_Francisco ,

I am still having the same issue.

I was able to make it work with a button, but not a text link.

Do I need to change something particular in the script in order for it to work with a link indicated in a text element ?

Also, if no parameter is indicated in the URL, could you please make it use the default phone number indicated in the URL ?

Jess
Rank
Userlevel 7
Badge +1

Hey @Etienne, off the top of my head I’m not sure, I’ll see if I can get Luis to take a look! Hang tight

-Jess

Luis_Francisco
Rank
Userlevel 3
Badge +1

Hi Etienne!

I just want to confirm… Are you adding jquery to your scripts?

For the script to run you need to make sure to add jquery.

lapdatcamera

I was able to make it work with a button, but not a text link.

R

Hello @Luis_Francisco - thanks for the script - it works great for me with the only problem being that it returns a “null” if there is no parameter used - is there a way for it to have a default value (phone number)? Thanks!

E

Yes, I did add jquery

image

E

@Luis_Francisco could you please paste the source code of an example with a link ?
Not only the source code of the script, but also the source code displaying the phone number and the tel: link please ?

This is what I have :

<a href="tel:02%2057%2054%2037%2011"><ub:dynamic class="text-editor-dynamic-tag" contenteditable="true" defaulttext="02 57 54 37 11" method="" parameter="phone" title="URL Parameter: tel" wrap="true">02 57 54 37 11</ub:dynamic></a>```
E

Up @Luis_Francisco @Jess

Luis_Francisco
Rank
Userlevel 3
Badge +1

@Etienne @rmdlwa @lapdatcamera first of all my apologies… I haven’t been active in the community for a long time…

I updated the code, so you can define a fallback phone now:

<script>

  
function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].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>

For making it work with a link @Etienne @lapdatcamera I’ll need to write some changes in the code and let you know here when I finish 😉

Luis_Francisco
Rank
Userlevel 3
Badge +1

Ok @Etienne @lapdatcamera here we go!

For text links, you will first need to add a class (“phonelink” in my example) to the link “a” tag:

Screen Shot 2021-07-12 at 10.55.44 AM

Screen Shot 2021-07-12 at 10.58.35 AM

Then you need to use the following script:

<script>

  
function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

  
  //replace 'phone' with your DTR's URL parameter
var dynamicnumber = getParameterByName('phone');



if (!dynamicnumber){ 
	//replace 000-0000 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 
$( ".phonelink" ).attr("href", "tel:"+ phonenumber);


</script>

I hope that helps! I also update the page so you can try yourself: https://success.unbounce.com/phone-dtr/?phone=333-3333

Cheers!

E

Perfect ! Thanks a lot ! Text link finally works !

PS: what if I wanted to have a different URL parameter for PHONE and for PHONELINK ? For instance, for PHONE I would want to display the local format number, in France 01 23 45 67 89, but for PHONELINK, I would want to have the international format, so that it works for foreigners calling from another country : +33123456789.
My url would be for instance blabla.com/?phone=01%2023%2045%2067%2089&phonelink=+33123456789

Luis_Francisco
Rank
Userlevel 3
Badge +1

@Etienne
On the link script and the text DTR you need to update the parameter you are targeting to phonelink:

E

Awesome ! It works. Tx a ton.

Reply


Terms & ConditionsCookie settings