Skip Navigation

[Resolved] Whatsapp link (Click to chat) shortcode

This support ticket is created 5 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 15 replies, has 2 voices.

Last updated by Minesh 5 years, 1 month ago.

Assisted by: Minesh.

Author
Posts
#1210861
Whatsapp feature request_2.jpg
Whatsapp feature request.jpg

Tell us what you are trying to do?
I contacted Elementor asking them about a nested dynamic link, so I can use Toolset custom field to include a number and a pre-written text (pictures attached). But they said it's not possible at the current moment, but they suggested to create a shortcode since the link for whatsapp is very simple. Unfortunately I have no coding skills and I was wondering if you guys can help me out.

So the shortcode would have to have the whatsapp link, get the custom post field for the number, and the pre-written text while getting the post title (which is the name of the Ad) included in the text.

Like this: hidden link, [post-title]. I saw your Ad at this website]

How do I do this?

Thank you!

#1211036

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - you can try the following Doc that will help you to write custom shortcode:
=> https://toolset.com/documentation/adding-custom-code/how-to-create-a-custom-shortcode/

You can then add the custom shortcode to Toolset's custom code section:
=> https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/

If you do not know how to do it, please share problem URL and access details where exactly you want to add the shortocde.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

#1211242
Whatsapp feature request_4.jpg
Whatsapp feature request_3.jpg

The thing is my site is still under construction, so I'm using a localhost in order to get things done.

I know where to add the shortcode using Elementor (see picture).

I just don't know how to write the shortcode that gets the custom field type that I created named whatsapp, and to add the text saying "Hello [Post_title], I'd like to schedule an appointment."

If you see at this site: hidden link (which is the one I'm trying to upgrade), you can see Elementor's Text Editor is a link that has the href the whatsapp link, therefore I need either:
1) create a link that has a shortcode in it (E.I. <a href="hidden link;)</a>
or
2) create a shortcode that has the whatsapp link in it (E.I. [shortcode that gets whatsapp number and pre-written text)

Either way I don't know how to do any of those two. Could you help please?

Thank you!

#1211253

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Well - I need to know your field name. What if your whatsapp field name? is whats app field created using Types plugin?

#1211296
Whatsapp feature request_6.jpg
Whatsapp feature request_5.jpg

I believe it's called whatsapp, field group custom type for phone (pics attached)

#1211307

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Well - can you please try to add the following shortcode to your current theme's functions.php file OR You can then add the custom shortcode to Toolset's custom code section:
=> https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/

function func_show_whatsapp( $atts ) {
 global $post;

$number = get_post_meta($post->ID,'wpcf-whatsapp',true);
$text = "Olá, vi seu anúncio no site Destack Terapias ( <em><u>hidden link</u></em>)";

$link = '<a href="<em><u>hidden link</u></em>'.$number.'&text='.$text.'"><img class="alignleft size-full wp-image-299" src="<em><u>hidden link</u></em>" alt="" width="25" height="25">'.$number.'(Clique para agendar)</a>';
return $link;
 
}
 
add_shortcode( 'show_whatsapp', 'func_show_whatsapp' );

You can call the shortcode as given under:

[show_whatsapp]
#1211364
whatsapp_shortcode_result3.jpg
whatsapp_shortcode_result2.jpg
whatsapp_shortcode_result1.jpg
whatsapp_shortcode_result.jpg

So I followed your instructions but when I tested it did not open the whatsapp app on the browser to chat.

I attached some pics to show what I did.

Not sure what went wrong.

#1211383

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Well - as you can see the shortcode is not parsed - I see in the URL:
=> hidden link

Well - I can not able to guide you without access and again this is custom programming which is actually beyond the scope of our support policy but I tried to help you as the custom field from types is involved.

Please set up your site on some test server and send me access details and I'm happy to look at your issue.

I have set the next reply to private which means only you and I have access to it.

#1211733

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ok - thank you for sharing access details.

I've added the shortcode element and added the shortcode [show_whatsapp], as well as I, 've added the following shortcode code to your current theme's functions.php file

function func_show_whatsapp( $atts ) {
 global $post;
 
$number = get_post_meta($post->ID,'wpcf-whatsapp',true);
$text = "Olá, vi seu anúncio no site Destack Terapias ( <em><u>hidden link</u></em>)";
 
$link = '<a href="<em><u>hidden link</u></em>'.$number.'&text='.$text.'"><img class="alignleft size-full wp-image-299" src="<em><u>hidden link</u></em>" alt="" width="25" height="25">'.$number.'(Clique para agendar)</a>';
return $link;
  
}
add_shortcode('show_whatsapp','func_show_whatsapp');

Now, if you see with the page:
=> hidden link

The link is displayed just under the "Whatsapp" field. You can remove the dynamic field you added.

#1211874

Thank you Minesh! Now I have some questions.

1) Did you only add that function to the function.php file or somewhere else as well? So I know where they are.
2) Will this function work in all the new custom post for every registered users automatically?
3) If I wanted to add the name of the post (Post_title) within the message, could I do the following?

$namepost = get_post_meta($post - >ID,'wpv-post-title',true);
$text = 'Olá, '.namepost.' vi seu anúncio no site Destack Terapias ( <em><u>hidden link</u></em>)';

4) Sometimes the user adds characters to the number such as - or . for example, (21) 995-48.48, is there a code where eliminates any characters and leaves only the numbers? Like this 219954848
5) Now the opposite, I would like to display the number with a space between so it's easier for the visitors to see, for example, instead of seeing 21995444567, they would see 21 9954 4567
6) How can I make the other numbers clickable to call. For example, the landline number or the cell phone number, if the visitors click on it (on the mobile), they would be able to call, just like on Ana's site.

Thank you so much for your help.

#1211879

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

1) Did you only add that function to the function.php file or somewhere else as well? So I know where they are.
=> Only to your current theme's functions.php file

2) Will this function work in all the new custom post for every registered users automatically?
=> I think yes. but if you have any issue feel free to create the ticket and share the link of this ticket.

3) If I wanted to add the name of the post (Post_title) within the message, could I do the following?
=> You can use the following code:

$namepost = $post->post_title;
$text = 'Olá, '.$namepost.' vi seu anúncio no site Destack Terapias ( <em><u>hidden link</u></em>)';

4) Sometimes the user adds characters to the number such as - or . for example, (21) 995-48.48, is there a code where eliminates any characters and leaves only the numbers? Like this 219954848
=> No, there is no such feature available. That needs to be handled using custom programming.

5) Now the opposite, I would like to display the number with space between so it's easier for the visitors to see, for example, instead of seeing 21995444567, they would see 21 9954 4567
=> Again, there is no feature available. Again it needs custom programming which is beyond the scope of our support policy. However - you may try the following or contact our certified partners:
- https://stackoverflow.com/questions/4708248/formatting-phone-numbers-in-php

6) How can I make the other numbers clickable to call? For example, the landline number or the cell phone number, if the visitors click on it (on the mobile), they would be able to call, just like on Ana's site.
=> You may try to use the same function and just change the shortcode name, function name and the field which you want to target. I think you will get same results then.

#1211890

Great, thanks so much for your help. One last thing. If there is an upgrade or update on the theme, will the functions that we added disappear? Wouldn't it be better to have the function somewhere else in order for us not to lose it, if there is an update on the theme?

#1211913

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Yes - good question.

For that you should try to create a child theme and add the shortcode to the child theme.
=> hidden link

#1211967

My issue is resolved now. Thank you!

#1212023
hide_remove2.jpg
hide_remove.jpg

Minesh, sorry to bother you again. I only need one more help with this. I researched online and found the function

if(!empty($number))

Which will only show if the value is not empty. Great, but the problem is that it leaves unnecessary space. (See image)

I tried adding the CSS code to hide the empty div

div:empty {
   display: none;
}

But it does not remove the space. I believe it will only hide the div and not remove it.

So I tried the Jquery from this link https://stackoverflow.com/questions/33544794/how-to-remove-empty-div-with-any-class-by-php

I add a html elementor widget to the top of the page and added the following code with no success.

<script>
$('.elementor-widget-container').each(function(i, obj) {
    if( $(this).is(':empty') ) { 
          $(this).remove();
    }
});
</script> 

Is there another php function that I can add to remove the "space" or div when the fields are empty?

This is my php function code in function.php child theme

$number = get_post_meta($post->ID,'wpcf-whatsapp',true);
	if(!empty($number)){
$namepost = $post->post_title;
$text = 'Olá, '.$namepost.' vi seu anúncio no site Destack Terapias ( <em><u>hidden link</u></em>)';
  
$link = '<a href="<em><u>hidden link</u></em>'.$number.'&text='.$text.'"><img class="alignleft size-full wp-image-299" src="<em><u>hidden link</u></em>" alt="" width="25" height="25">'.$number.' (Clique para agendar)</a>';
return $link;
	}
}
add_shortcode('show_whatsapp','func_show_whatsapp');

Thank you

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.