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?
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?
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.
@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.
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.
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?
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?
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!
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.
It worked now, thank you so much for your help! ![]()
Sure thing! Glad to hear we were able to find the solution ![]()
