SMS with Twilio Sample jQM App

Sending SMS from a jQuery Mobile app with Twilio.


Important Note!

The option of creating new apps with the jQuery Mobile framework was removed but we still support the projects that were created with it earlier.

This example uses Twilio API to send SMS from an app.

This sample app uses and demonstrates:

  • jQuery Mobile.
  • Server Code.
  • Invoking an external REST API.

App (UI)

To get the app UI:

  1. Create a new jQuery Mobile app based on the Starter template.
  2. Inside the App Builder, select CREATE NEW > From plugin. Under Examples, select SMS with Twilio.
  3. Click the Import selected plugin button.
  4. Select Twilio as the starter page and click Apply settings.


To get the app backend:

  1. Go to the Server Code page.
  2. Go to the Plugins page.
  3. Import the Twilio plugin.

Twilio Account

You also need to create a Twilio account to get an API key to send emails. After you sign up for an account, you will need the following information:

  • Account Sid.
  • Auth Token.
  • Twilio phone number.

Configuring the Server Code Script

Now, you need to configure the script.

  1. Open the Server Code script you have just imported.
  2. At the top of the script, set the accountSid and token values.
  3. Then set the from value - that's your Twilio number.
    That's all you need to do to configure this script.

Testing the Script

It's a good idea to test the script and the SendGrid API to make sure it works.

  1. Switch to the Script parameters tab.
  2. Create the following parameters and set them to test values:
    • to
    • body
  3. Switch to the Run tab and click the Save and run button.

Connecting the App with the Backend

The last step is to connect the app with the backend.

  1. Inside the App Builder, open Services > TwilioSMS_service.
  2. In theSettings tab, you will see {servercode} in the URL. To replace the value with the script ID, in the Server Code script, switch to the API information tab. There, you will see the script ID in the URL you need to use.
  3. Save all the changes.

Testing the App

You are now ready to test the app. Click the TEST button in the App Builder to launch the app in the browser.