What`s App button to contact a Member

Ask the community
, , ,
1

HI,

I have a form that my member fill out and submit to “myCheckins” collection that contains the members phone number.

What i want to be able to do is review that submission on my dynamic page and have a button that says contact member on what`s app and when i click it my whats app opens on my phone to their conversation.

This is achievable i see in the wix support but only by entering your own phone number for a member to contact me.

https://api.whatsapp.com/send?phone=123456&text=This%20is%20a%20test.

I want the other way round and me to contact a member. In order to do this it has to be dynamic and retrieve the correct member’s phone number from the collection obviously which it will via the dynamic page i open.

This is how you do it using your own phone number i need to change the part in red to contain the item.phoneNumber from my collection then have the other parts of the URL

Share on WhatsApp"MEMBERS DYNAMIC PHONE NUMBER HERE IN MY CASE THATS item.phoneNumber "&text=This%20is%20a%20test.

To link a button to your WhatsApp:

Add a button to your page.
Change the button text, for example, "Contact on WhatsApp".
Click the Link icon .
Click Web Address.
Choose an option:
Create a link without a message: Add https://api.whatsapp.com/send?phone=<number> where the <number> is a full phone number in international format. Omit any zeros, brackets, or dashes when adding the phone number.
Create link with custom message: Add the link as above, and add text= with the message. For example, https://api.whatsapp.com/send?phone=123456&text=This%20is%20a%20test. To add a space in custom message use '%20'. The default message in this example is "This is a test".

Click Done.

I contacted Wix and they told me it is possible using a data hook.

Thank you for elaborating on the matter. Hope you are doing well! 

I have reviewed the information you provided, and understand that you would like the information from the Main Phone text field that each site member submits to populate the button that you can use to reach out to everyone via WhatsApp with one click.

While this is not possible to do while using pure Wix Data, I'm glad to inform you that you can do it using Velo by Wix. The main Velo functionality you'll have to use is Data Hooks. Data hooks run code before or after certain interactions with your site's collections. The hook's code can even be used to affect the interaction itself. For example, you may want to intercept an item before it is added to your collection to perform a final validation or to tweak the data that actually makes it into the collection.

In our case, a "Data Hook" can capture the number and then just add the rest of the URL portion which will get stored in your collection field. I will link the articles related to Data Hooks, you are encouraged to check them and let me know whether this solution is something you'd like to proceed with:
Velo: About Data Hooks
Velo: Using Data Hooks

The field would, however, need to be a URL field, so please make sure to tweak with the field's type while implementing this solution. Another thing to point out is that you will need to use the button's dynamic connection only, using the static linking option in addition to the dynamic one may negate the dynamic link.

If you need any help with completing the steps, I'd like to note that we have a Velo team that will gladly walk you through the steps if you need it. 

I hope I managed to answer your question. Please keep in mind that we are here 24/7 for you, and I look forward to hearing about your success implementing Data Hooks to your site. If you have any other questions, please do not hesitate to send us another request. Stay safe and healthy and have a wonderful day ahead of you!

So with this in mind i set about this and i am struggling to figure out exactly where and how to add the “item.phoneNumber” section to the hook prior to the Member submitting the form.

So far im at this point with regard to having the hook intercept the phone number and transofrm into a section of the URL as shown

export function MyCheckIns_beforeInsert(item, context) {

    item.phoneNumber = item['link-api.whatsapp.com/send?item.phoneNumber=&text=This%20is%20a%20test']
 return item;
}

Just cant figure out how to place that item.phoneNumber or if the URL section i have here is correct.

If someone could point me in the right direction id appreciate it

Dan

2

Hey Dan! Hopefully I can point you down the right track - I followed a similar path for a different function and beforeInsert was not working, I believe you’ll need afterInsert and you can see what I achieved below

Check out my code below for duplicating the _id - you’ll need to update your collection name, then define yours with the concatenated version of your link, your data field (in the let newId = item._id line, where item._id is your concatenation), then your sample text.


import wixData from 'wix-data';

export function memberRegistration_afterInsert(item, context) {
 let toUpdate = item
 let newID = item._id;
    toUpdate.newId = newID;

    wixData.update("memberRegistration", toUpdate)
        .then( (results) => {
            item = results; 
        } )
        .catch( (err) => {
 let errorMsg = err;
        } );
 
 return item;
}

This will go into your backend data.js. file, as screenshot example shows below:

1257×681 94.7 KB

Hope that helps!