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 it does all sorts of communication platforms, phone, WhatsApp, et cetera. Anyway, I like using ClickSend because I think Twilio can be a little bit confusing. 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 Bubble API Connector
So 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. Let me call 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 Bubbles's private key in header and we can see it says keynames authorisation, and that matches exactly what's expected there.
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 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 two SMS notifications. So making sure my JSON syntax is all correct. I just removed one there. If you look at the 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. 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. I'm just going to change this to...
Dynamic values in your API request
In fact, I'm going to start making it dynamic now. So this is message, and then I click untick private so that I can access it in a workflow. And I'm going to leave the recipient as it currently is because it is one of ClickSends. So go into 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.
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 it 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, I've clicked on the key icon up here, and you can see that I 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.
How to base64 your API key
So let me show you how to do that. Pnc-test. So I can go over to here and I will put pnc-test. This is just a website that I found by googling base64 encode. And then the API key, I'm going to 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 there 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.
Adding SMS to a page
So that's how to set up in the API Connector. I'm going to really quickly show you how you would put that into a page. So we'll call this SMS. And then if I go for a multi line input and a button, and this is not going to be very neat at all. So our button is going to send an SMS notification. In fact, 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 number as 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, click, send API call. That is named such because of the name here. So it would make more sense if I changed this to send SMS. And Bubbles updated 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've sent, again, to their test numbers. So I've not been charged for it, but the API returns a success response, indicating everything is set up as it should be. 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 since it's an affiliate link, and so we get a little bit back for having sent you to ClickSend rather than recommending Twilio to you.