How to send SMS messages (Alternative to Twilio)

Introduction to Clicksend as an Alternative to Twilio

In this Bubble tutorial video, I'm going to demonstrate how you can send SMS notifications from your Bubble app and I'll be using a third-party service called Clicksend. Clicksend is an excellent alternative to Twilio which is perhaps the most well-known SMS and you know there's all sorts of communication platforms, phone, WhatsApp etc. Anyway, I like using Clicksend because I think Twilio can be a little bit confusing like there are just you can send an SMS 10 different ways through Twilio whereas Clicksend keeps it simple and I'm going to be demonstrating how to use Clicksend in this tutorial.

Setting Up the API Connector in Bubble

To begin with, I'm going to go into the Clicksend API documentation and look at SMS and begin building copying this code sample into my Bubble app. So I'm in the API connector in my Bubble app and I'm adding a new API called this Clicksend and if I look back at the API documentation I can see that in my header I have authorization and I have content type. So let's add a shared header for content type and be careful with reformatting this it's meant to look like that and then the authorization I'm going to use Bubble's private key in header and we can see it says key names authorization and that matches exactly what's expected there.

Configuring the API Call

I'm going to come on to as it might be a little bit different to what you're used to this is not your API key I'm going to explain that in a moment but first of all let's build in the message or that's going to be sent in the body of the call so this is an action because I want to trigger it with a workflow it's going to be post here is the body and it's providing me with the ability to send to SMS notification so making sure my JSON syntax is all correct I've just removed one there.

Understanding API Documentation

If you look at documentation and this is all part of the journey of being able to read it and understand it and interpret it you can see here that there are all these different properties that I can include in my call and including this source one but I don't need to because it's not required so and it's mainly basically for internal tracking and debugging of your app if you were running multiple different applications through the same Clicksend account it helps to separate them out.

Making the API Call Dynamic

I'm just going to change this to in fact I'm making it dynamic now so this is a message and then I click untick private so I can access it in a workflow and I'm going to leave the recipient as it currently is because it is one of Clicksend's going to introduction testing you can see here that they provide you with a number of numbers that you can test your API integration with without it having to be deducted from your credits so I'm going to leave that as that and I can still test it I can still see if I get a success response back from Clicksend knowing that I've set all of this up correctly.

Adding the API Endpoint

Let's go back to SMS because there's one bit of data missing which is the endpoint or the URL so copy that paste into there okay so authorization so if I go into my Clicksend dashboard and I'm going to be regenerating these as soon as I've recorded the video and I've clicked on the key icon up here and you can see that have a username and an API key if I go back into the API documentation and then go on to authentication it explains to me that the header should include the API username and the API key and then it explains how to express that so it's saying put them one after another with a colon in the middle and then encode that in base 64 so let me show you how to do that PNC - test so I can go to here and I would put PNC - test this is just a website that I found by googling base 64 encode and then the API key copy that paste it in and then encode okay and this jumble of letters and numbers is what Clicksend wants me to enter into the key value don't forget if we go back down to SMS I have to put the word basic in front of it make sure I'm at the start basic and the space okay let me just have a quick check of everything there I need to include a message so I'll just call this test and then initialize call and you can see that that I've got a response of 200 that means that it is a success there's been no errors in the way that I've set this up and I'm getting all of this data back about the SMS that I had sent so that's how to set up in the API connector.

Creating a Simple SMS Sending Page

I'm going to really quickly show you how you would put that into a page so we'll call this SMS and then I go for a multi-line input and a button and this is not going to be very neat at all so my button is going to send an SMS notification in fact let's let's just do this a bit more thoroughly I'm going to change this to recipient make sure they're both unticked I'm going to put back in the test numbers I want that to be the default number that's used I'll also write test in there and you'll see how that populates through into my workflow editor so plugins Clicksend API call that is named such because of the name here so it would make more sense if I change this to send SMS and it's and Bubble updates it for me so I'm leaving that the same and I'm changing this to my input and then I preview that testing and click the button my API call is now going through and it's been sent to Clicksend and I can verify that by going into my Clicksend account under SMS going to history and I can see there the messages I have sent again to their test number so I've not been charged for it but the API returns a success response indication everything is set up as it should be.

Conclusion and Next Steps

So there we have it that is how to send an SMS notification with Clicksend. I might well do a follow-up video about how to receive a reply to an SMS leave a comment below if you'd like to see that also if you want to sign up for Clicksend if you would like to use our link that would be great as it's an affiliate link and so we get we get a little bit back for having sent you to Clicksend rather than recommending Twilio to you.