[Resolved] display a phone in a directory website

[Author]

Posts

[marcM-3]

Tell us what you are trying to do?

I'm building a website directory. In the professional single template (made with elementor) there are contact details.

The button to contact via email and the button to link to the professional's website work correctly.

But the button to contact by phone does not allow adding the dynamic phone data.

Is there any documentation that you are following?

I haven't found any.

Is there a similar example that we can see?

hidden link

What is the link to your site?

hidden link

[Christopher Amirian]

Hi there,

I checked and it is not possible to add the Phone custom field type to an Elementor button.

You can use the Toolset shortcode to retrieve the phone number like this:

[types field="cellphone"]

(replace `cellphone` with the slug of your field)

Then you can use the HTML code generated by the button and add an HTML element and embed the shortcode above inside that code.

I checked the page that you have the yellow button and come up with this code:

<div class="elementor-button-wrapper">
    <a href="tel:[types field='cellphone'"
        class="elementor-button-link elementor-button elementor-size-lg elementor-animation-grow" role="button">
        <span class="elementor-button-content-wrapper">
            <span class="elementor-button-icon elementor-align-icon-left">
                <i aria-hidden="true" class="fas fa-phone-alt"></i> </span>
            <span class="elementor-button-text">[types field="cellphone"]</span>
        </span>
    </a>
</div>

In the code above replace `cellphone` with the slug of your field in two places. One is the link of the A tag and the other one is the text of the button.

That should do the trick.

[marcM-3]

Hi Cristopher,

it's practically already solved, but I think there's an error in line 2.

When I click the button, I can't make a call.

I have tried putting a phone directly and it works. It only fails when I try it with dynamic data.

Is it possible that a ] is missing in the code?

I've tried to put it but didn't work either.

The code I added is the following.

<div class="elementor-button-wrapper elementor-align-center">



</span>
<span class="elementor-button-text">Llamar</span>
</span>

</div>

I have only made minor changes:

1- I have centered the div
2- I have changed cellphone to slug as you mentioned
3- in line 7 I have not put the [types field="telefono"] but only text

Thanks.

[Christopher Amirian]

Hi there,

Yes you are correct I missed an ending ]

Here is a fixed code:

<div class="elementor-button-wrapper elementor-align-center">
<a href="tel:[types field='telefono']" class="elementor-button-link elementor-button elementor-size-lg elementor-animation-grow" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-icon elementor-align-icon-left">
<i aria-hidden="true" class="fas fa-phone-alt"> </span>
<span class="elementor-button-text">Llamar</span>
</span>
</a>
</div>

Thanks.

[marcM-3]

Hi Cristopher,

it has finally work! 🙂

It didn't worked in a html widget but in has worked in a shortcode widget.

There was also missing a .

So, the final code is:

<div class="elementor-button-wrapper elementor-align-center">



</span>
<span class="elementor-button-text">Llamar</span>
</span>

</div>

My issue is resolved now.

Thank you very much! 🙂