# Send SMS via Twilio > Learn how to send SMS from your application to a specified phone number using Twilio. This tutorial covers setting up a scenario with Integromat or Zapier and connecting your PandaSuite application for SMS functionality. https://docs.pandasuite.com/essentials/integrations/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](https://www.twilio.com) 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](https://www.twilio.com) account to send SMS (free access, [see rates](https://www.twilio.com/pricing)) - Have a [Zapier](https://zapier.com) account or an [Integromat](https://www.integromat.com) 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. [Image: Garden Guide app preview: on the Invite a friend screen, a phone number is typed in the Send an invite card, above the Send SMS button] ## Add Input Field ### Insert the Text input component Click on **Components** and add the **Text Input** component to your screen. [Image: Phone number Text Input placed in the Send an invite card; its properties show the Phone type and Live Validation set to No] Customize the appearance of this field from the **Properties** window. Leave **Live Validation** on **No** 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** and **Clear Text**. - To send the number to Twilio, you must first prepare the scenario on Integromat / Zapier and then insert an [HTTP](https://docs.pandasuite.com/essentials/components/http/) component to make the connection. [Image: Send SMS button selected: single tap/click validates and clears the Phone number field] 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. > **Info** > > Integromat and Zapier are powerful and well-known services for connecting > applications to each other through the use of their API. They allow you to > automate processes and to make advanced manipulations accessible without any > line of code. In our example, they provide the connection between your > application's interface (PandaSuite) and an SMS sending feature (Twilio). 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 . Create an account, then create a new scenario. Select **Webhooks** and click the **Continue** button. [Image: Integromat, choosing the services to integrate: searching “webhook” returns Webhooks and WP Webhooks, next to the Continue button] In the Triggers list, select **Custom webhook**: [Image: Integromat Webhooks module list: Custom webhook heads the Triggers, above Custom mailhook and the Webhook response action] Then click on the **Add** button to define a new webhook. [Image: Webhooks window of the Custom webhook module in Integromat: the Webhook field is empty, with the Add button to create one] In the window, you can customize the name of the webhook and click on **Save**. [Image: Integromat Add a hook window: the webhook is named “My Panda Test” before clicking 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. [Image: My Panda Test webhook in Integromat: its hook.integromat.com URL appears with the Copy address to clipboard button] ### 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. [Image: SMS request HTTP component selected: webhook URL, POST method and a tel: content bound to the Input value of the text field] Choose **POST** as the method: it is used to send data (here, the phone number). In the **Content** field, type a label followed by a colon, for example `tel:`. Right after the colon, click the data binding icon, choose **From a component**, click the Text Input on your screen (**Interactive Selection**), then pick **Input value**. The body becomes `tel:` followed by the live value of the Text Input. Adjust the label name to match what your scenario expects. ### Send the number to Twilio Select the button and add a **Single tap/click** action > **Interact with a component**. Click the HTTP component in the objects list (**Interactive Selection**), then choose **Start request**. [Video: the Send SMS button gets a Single tap/click action, Interact with a component, targets SMS request, then 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** [Image: Integromat Webhooks window: the Successfully determined message confirms that the data structure was recognized] 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**. [Image: Twilio module actions in Integromat: Create a Message tops the Messages section, above the call actions] Choose the type of message you want to send: **Send a message from phone number**. A sender phone number is automatically generated. [Image: Twilio module in Integromat: Send a message from set to phone number, generated sender number, webhook tel value offered for To] 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. [Image: Twilio message fields: To gets the webhook tel value and Body the text “Hello from PandaSuite!”, before clicking OK] Click **OK** to validate your scenario. [Image: Validated Integromat scenario: Webhooks module linked to the Twilio Create a Message module, and a log showing a completed run] Test it and here is the result: [Image: iPhone lock screen showing the notification of the “Hello from PandaSuite!” SMS received through the Integromat scenario] ## Create the Scenario Via Zapier ### Create a webhook Go to Create an account, then click the **Make a Zap** button. In the list of triggers, look for **Webhooks by Zapier.** [Image: Zapier, step 1. Trigger of a Zap: searching “webhook” returns the Webhooks by Zapier app, marked Premium] In the Trigger Event list, select **Catch Hook** and click **Continue**. [Image: Zapier trigger: Webhooks by Zapier app with Catch Hook as the Trigger Event, above the Continue button] 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. [Image: Customize Request step of the Zapier Catch Hook: the hooks.zapier.com webhook URL appears with its Copy button] [Image: Find Data step of the Zapier Catch Hook: Test your trigger asks to send a request to the webhook URL, with a Test trigger button] ### 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. [Image: The same HTTP component for the Zapier scenario: URL field, POST method and a tel: content bound to the Input value] Choose **POST** as the method: it is used to send data (here, the phone number). In the **Content** field, type a label followed by a colon, for example `tel:`. Right after the colon, click the data binding icon, choose **From a component**, click the Text Input on your screen (**Interactive Selection**), then pick **Input value**. The body becomes `tel:` followed by the live value of the Text Input. Adjust the label name to match what your scenario expects. ### Run the query & test Select the button and add a **Single tap/click** action > **Interact with a component**. Click the HTTP component in the objects list (**Interactive Selection**), then choose **Start request**. [Video: for the Zapier test, the Send SMS button gets Interact with a component, with Start request on the HTTP component] 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** [Image: Zapier Catch Hook trigger: the We found a request! message shows the received request, with the tel value of the number] You can now configure a new action. Type and select **Twilio**. In the Action Event list, choose **Send SMS**. [Image: Zapier action 2. Send SMS in Twilio: Twilio app with Send SMS as the Action Event, above the Continue button] 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. [Image: Zapier Customize Sms step: sender number in From Number, and the Catch Hook Tel value offered for the To field] Enter the body text in **Message**. [Image: SMS fields in Zapier: To gets the Catch Hook Tel value and Message the text “Hello from PandaSuite!”] Test it and here is the result: [Image: Result of the Zapier scenario: the “Hello from PandaSuite!” SMS arrives as a notification on an iPhone lock screen] ## 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. [Image: SMS sent pop-up being edited: the “Your invite has been sent!” card over the dimmed Invite screen, with the Pop-up properties] Select the HTTP component and the trigger event: **Request completed**. Select the **Interact with a component** > **Pop-up** > **Open pop-up** action. [Image: Actions of the SMS request HTTP component: on the Request completed trigger, the Open pop-up action targets SMS sent pop-up]