Send SMS via Twilio

In this tutorial, we will explain how to send an SMS from your application to a phone number specified by the user, using Twilio.

Twilio is a service that allows you to send and receive SMS and voice calls. The goal of this tutorial is to send an SMS to a customizable phone number and to open a pop-up when the message is gone.

Requirements:

• Have a Twilio account to send SMS (free access, see rates)
• Have a Zapier account or an Integromat account to create your scenario and connect your PandaSuite application to these services. Please note that the use of these services may incur additional costs.

Add Input Field

Insert the Text input component

Click on Components and add the Text Input component to your screen.

Customize the appearance of this field from the Properties window.

Uncheck Live Validation so that changes to the number are not automatically taken into account.

Create button

Insert a validation button.

The purpose of this button is to validate the number entered, clear the field and send the phone number to Twilio via Integromat or Zapier:

• To validate the number entry and clear the field entry, select the button and create two actions on the Text input component: Validate Entry and Clear Text.
• To send the number to Twilio, you must first prepare the scenario on Integromat / Zapier and then insert an HTTP component to make the connection.

This configuration requires a new scenario to be set up on Integromat or Zapier. This information will be essential to build the request of our HTTP component.

You can use either one or the other in your configuration, we detail both ways. The first step is to create a webhook for each of these services.

Create the Scenario Via Integromat

Create a webhook

Go to https://www.integromat.com.

Create an account, then create a new scenario.

Select Webhooks and click the Continue button.

In the Triggers list, select Custom webhook:

Then click on the Add button to define a new webhook.

In the window, you can customize the name of the webhook and click on Save.

Back in the previous window, you will see the Integromat webhook URL that you can copy to your clipboard. It looks like this:

https://hook.integromat.com/iduhiohdzoudzouopdupdz

You will need it to configure your HTTP module in PandaSuite.

Insert the HTTP component

Back to PandaSuite Studio. Click on Components and insert an HTTP component.

In the Properties window, insert the URL of the webhook in the URL field.

Choose as POST method: this method is used to send data (here, the phone number).

Click on the Edit Content button and enter the value you typed in the Text Input component. We have used tel as an example but you can change the structure as you wish.

tel:[data:ID_TEXT_INPUT(/inputValue)]

To get the component ID (ID_TEXT_INPUT), double-click on the component name in the Properties window and paste the resulting formula.

Send the number to Twilio

Select the button and create a new action > Interact with a component > HTTP > Start request.

Launch the web preview and click on the button to run the query once.

Finalize the scenario

Now that you have made an initial query, Integromat can determine the new structure.

Back in your Integromat scenario, a message appears: Successfully determined

You can now add a new Twilio module to create a message. Click on Add another module and select Twilio.

In the list of messages, choose Create a Message.

Choose the type of message you want to send: Send a message from phone number. A sender phone number is automatically generated.

In the To field, you find here the value of the phone number sent from the Text Input component.

In the Body field, enter the body of the text.

Click OK to validate your scenario.

Test it and here is the result:

Create the Scenario Via Zapier

Create a webhook

Go to https://zapier.com

Create an account, then click the Make a Zap button.

In the list of triggers, look for Webhooks by Zapier.

In the Trigger Event list, select Catch Hook and click Continue.

You discover the URL of the Zapier webhook that you can copy to your clipboard. It looks like this:

https://hooks.zapier.com/hooks/catch/1727973/dgiudgui/

You will need it to configure your HTTP module in PandaSuite.

Insert the HTTP component

Back to PandaSuite Studio. Click on Components and insert an HTTP component.

In the Properties window, insert the URL of the webhook in the URL field.

Choose as POST method: this method is used to send data (here, the phone number).

Click on the Edit Content button and enter the value you typed in the Text Input component. We have used this as an example but you can change the structure as you wish.

tel:[data:ID_TEXT_INPUT(/inputValue)]

To get the component ID (ID_TEXT_INPUT), double-click on the component name in the Properties window and paste the resulting formula.

Run the query & test

Select the button and create a new action > Interact with a component > HTTP > Start request.

Launch the web preview and click on the button to run the query once.

Finalize the scenario

Now that you have made an initial request, Zapier can determine the new structure.

Back in your Zapier scenario, a message appears: We found a request

You can now configure a new action. Type and select Twilio.

In the Action Event list, choose Send SMS.

A sender telephone number is automatically generated.

In the To field, you will find the value of the phone number sent from the Text Input component.

Enter the body text in Message.

Test it and here is the result:

Open a Pop-up After Sending the SMS

In our example, we want to inform the user that his SMS has been sent via a pop-up. In concrete terms it is possible to trigger an action when the HTTP request is completed.

Create the pop-up.

Select the HTTP component and the trigger event: Request completed. Select the Interact with a component > Pop-up > Open pop-up action.