Adding dynamic phone numbers to pages

[SOliveiraMP]

We need to add dynamic phone numbers to our landing pages and emails and we've tried doing this by adding the script, however we need to add a class of .rulertel to phone numbers and there doesn't seem to be a way to do this. Can anyone help me with this?

[evaldas · Accepted solution]

Hi @SOliveiraMP, 

Can you explain what kind of rules you are trying to use currently for the dynamic phone number and how are you trying to display it? For example, are you trying to display it in a custom module or by using smart content?

[evaldas · Accepted solution]

Hi @SOliveiraMP, 

Can you explain what kind of rules you are trying to use currently for the dynamic phone number and how are you trying to display it? For example, are you trying to display it in a custom module or by using smart content?

[SOliveiraMP]

Hi Evaldas, thanks for getting back to me! We just need to add a class to the phone number that is in the menu on the landing pages so that the phone number can be dynamic.

[evaldas]

@SOliveiraMP could you share a screenshot of how it is currently set up? Are you using the Simple Menu or Advanced Menu?

Also, what is the rule for it being dynamic? Is it just to add the class or the phone number changes based on the visitor?

This will help identify what solution should be applied.

[SOliveiraMP]

It's meant to be in the landing page header, we don't have a phone number now because we need it to be dynamic. We're using the Advanced Menu.

Do you mean the classname? It's rulertel. Yes, the number changes based on the visitor.

[evaldas]

So it would be:

Visitor A, show phone number: 111-111-11111

Visitor B, show phone number: 222-222-2222

Visitor C, show phone number: 333-333-3333

Correct? 

If so, I mean what is the rule that shows the phone number to Visitor A and a different phone number to Visitor B. Would it be based on whether they have a cookie or something else?

[SOliveiraMP]

We're not sure. It's a third party service, so it most likely is a cookie, however we just install the script then wrap the number with a class of rulertel on the normal sales site. Does that make sense? 

[evaldas]

Ok, I think this makes sense now.

Ultimately depends on what exactly the script is doing, but since you are using the Advanced Menu, you can try wrapping your link text in a <span> with the rulertel class applied.

It would look something like this:

[SOliveiraMP]

Hi Evaldas, we’ve done this, however its not going to work due to the way hubspot put their links in. It’s updating the visual phone number to the ruler number however the actual link is staying as tel:866.202.0005. Is there any other way you would suggest us to try? Thank you!

[evaldas · Accepted solution]

Looking at the documentation of the external service, there is an important note about placing the class on the <a> element directly if you want it to be clickable. 

So, in your menu, you can try updating the <span> element to <a>:

<a class="rulertel">CALL NOW</a> 

This will likely create multiple <a> elements in that menu item and might not be the cleanest implementation, but it should not show up on the front end or interfere with making the number dynamic, so it might work for the use case.

[SOliveiraMP]

It worked now, thank you so much for your help! 🙂

[evaldas]

Sure thing! Glad to hear we were able to find the solution 🙂