Clickatell API to send SMS

[updates]

hi, unfortunately not. I had other jobs ti do so I leaved it on the side. hope next week to study something will keep you informed

[bpj]

I’ve had a few issues with client-side API Actions recently and have found it much more reliable to use Server Connect to link to an action that contains an API Action. It also makes it a bit easier to add forms/tables to a page (particularly across multiple pages without having to define the Schema each time)

When creating the Globals for the input ‘to’, you can define it as an array:

There is also an issue in IOS 12 that can stop API calls working. By implementing it through Server Connect you also avoid this.

I hope this helps

[mimuk]

This has intrigued me, I signed up for a test account and like @updates
Having difficulty working out the method of sending the following in ServerConnect API Connector. I did try setting the to as an array.

{"content": "SMS Message Text", "to": ["CELLNUMBER"]}

Any advice appreciated

[updates]

we should require @ben a special webminar on it

[mimuk]

Heres it is in javascript if it helps

var xhr = new XMLHttpRequest(),
    body = JSON.stringify({
        "content": "SMS Message Text",
        "to": ["4479760000000"]
    });
xhr.open("POST", 'https://platform.clickatell.com/messages', true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "TcGNoNOTAREALKeyKv0XpaQ==");
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log('success');
    }
};

xhr.send(body);

[bpj]

OK, so managed to make it work:

1. Set up the Server Connect form with ‘to’ and ‘content’ inputs - send as POST

2. Set up POST globals for ‘to’ and ‘content’

3. Add API Action with the following settings:
   

4. Add Header for ‘Authorization’ with the value of your API (without any quotes)

5. Add Input Data for ‘to’ and ‘content’ set to the respective POST globals set up earlier

You had most of this but it appears that the key setting is setting the Data Type to form

This is tested on a test account for single messages to single recipients. Do you need multiple recipients per message?

[updates]

Yes, I could need multiple numbers.

can you show more screenshots please?

i.e.: in the header should I write ‘Authorization’ or Authorization?

[bpj]

The names for headers and inputs are always without quotes. The values also don’t require quotes, unlike other areas of Wappler.

On the form make sure the name attribute for the inputs

reflects the POST variables you set up in Globals (Server Connect)

Once all set up, save it and then click ‘Define API Schema’ in the API Action step

The Authorization header should be completed already - just enter static values for the recipient (use the mobile number you set up in your account as the test number - in international format) and the message.
Click ‘Fetch Schema’ - you can show the response section at the bottom of this modal using the chevron underneath the Fetch Schema button.

[updates]

Thank you very much for your screenshots.

I followed your instruction but got error:

I set in the Globals the POST variables:

then I added the API Action in the server connect

I set up the API as per your instructions:

added the input data:

added the Header Authorization

then fetch schema

and I get

[updates]

In nay case while trying one SMS arrived… means have to check carefully…

[bpj]

Very weird:

[updates]

It works. Thank you very much for your support @bpj !!
Suggestions: sometimes instead to search for something wrong… it is better to write Authorization correctly… and everything will works!!

[bpj]

Glad you’ve got it working. I’m just building/testing an adaptation of @Teodor’s Working with Arrays guide which should give you a way of adding a list of numbers that you can then pass to the Server Connect action as the ‘to’ input when the submit button is clicked. It will need a slight change to the Server Connect action to receive it.

[updates]

Thank you again, you have been very kind!

[bpj]

You’re welcome.
Could I be a pain and ask you to change the solution to my post?

[bpj]

As promissed, to add multiple phone numbers, you can use @Teodor’s guide mentioned above altering the following:

1. The repeat part should be placed inside the form.

2. When creating the buttons to show them add a hidden text field (to hold the phone numbers for POSTing to the Server Connect)
   

3. give the hidden text input Name to[] (use something like to_add for the text input where you enter the number)

4. Give the hidden field a dynamic attribute for Value of the $value of the repeat

5. Change the API Action properties to :

The Post globals remain as they were, as do the Header/input options of the API action

Thanks for altering the solution. I hope it all works well for you.

[updates]

Hi guys, I m here again for more complex problem:
while Clickatell with SMS is working thank your help, I m getting stuck with Clicaktell business whatsapp api.

While in the SMS api input are as follow:

-d ‘{“content”: “Test Message Text”, “to”: [“393347453271”]}’ \

in the whatsapp api is:

-d ‘{“messages”: [{ “to”: “1234567890”, “content”: “Test Message Text” }]}’ \

I suppose it is an array but how can I do with Wappler I don’t understand. Someone can help me please ?

Thank you Roberto

[bpj]

You should be able to change the input names (in the form) to messages[to] and messages[content]
(use messages[][to] and messages[][content] if planning to allow multiple messages in one Server Connect call)

Change the Globals (in Server Connect) to just be messages (rather than separate to and content)
Change the Input Data in the Server Connect API Action to map messages to the messages POST variable

[updates]

thank you @bpj, as I did like you said in the Globals messages I got to and content as part of the array.

But when I go to fetch the api schema I got the following message:

it makes me crazy

[bpj]

You don’t need to arrange the POST inputs (as you are sending as a JSON string). Simply create one POST input:

for messages
Then in Input Data (in API Action) create the link to the messages POST:

I haven’t tried the WhatsApp API and haven’t applied for it so can’t verify the steps, but in principle they should work.