Overview

This guide will use Flask to create a simple web application that can send sms through the browser.

What do I need?

Find the full code on Github here.

You will need the SignalWire Python SDK as well as Flask to handle the web framework.

Additionally, you will need a SignalWire account which you can create here. You will also need your SignalWire API credentials which you can find in the API tab of your SignalWire Dashboard. For more information, read our guide to Navigating your SignalWire Space.

How to run

Run Natively

Run app.py in your python environment of choice.
This app will be using Flask, which will use port 5000 on your localhost by default.

This example should not be used in a live environment

Exposing this web app to a live endpoint means anybody with the URL could send SMS requests through your SignalWire Space.

Code Walkthrough

This application has two components:

app.py: This is our "server" component
A templates folder: This holds our sendsms.html, which is our client component.
There is also an example.env file you can use to fill in with your SignalWire credentials and save as .env.

Server-side code

Set-up

The server-side code for this is very simple. First we will import the required packages, load then set our environment variables, and create a client that will handle our SMS requests.

from flask import Flask, request, render_template, redirect
import os
from dotenv import load_dotenv
from signalwire.rest import Client as signalwire_client
import re

load_dotenv()

SIGNALWIRE_PROJECT_KEY = os.environ['SIGNALWIRE_PROJECT_ID']
SIGNALWIRE_TOKEN = os.environ['SIGNALWIRE_API_TOKEN']
SIGNALWIRE_SPACE = os.environ['SIGNALWIRE_SPACE_URL']
SIGNALWIRE_NUMBER = os.environ['SIGNALWIRE_FROMNUMBER']

client = signalwire_client(SIGNALWIRE_PROJECT_KEY, SIGNALWIRE_TOKEN, signalwire_space_url=SIGNALWIRE_SPACE)

Index Route

Next we will create a route that returns our sendSMS.html form. When integrating this project, this may not be needed as you can simply embed the code from sendSMS.html into any html page your project is already using.

@app.route("/", methods=['GET', "POST"])
def smsmenu():
    return render_template('sendSMS.html')

Create Sms/Handler Route

Finally for our server-side we will create a route that actually handles the creation of our sms requests to the client.

First we will get the pnum and smsbody values from the client and call our phonevalidation() function, passing our pnum.

If phonevalidation() returns False we will let the client know that phone number wasn't valid. Otherwise we will create a request using pnumvalid as the "to" number and the body we retrieved from the client as our message body, and return "Message Sent." In this case there is no validation for if a message was delivered successfully, only that the request was created.

Alternatively if our conditions aren't met, we just assume something went wrong and return a message stating so to the client.

@app.route("/createsmshandler", methods=['GET', "POST"])
def createsms():
    pnum = request.args.get('pnum')
    body = request.args.get('smsbody')

    pnumvalid = phonevalidation(pnum)

    if pnumvalid == False:
        return "Invalid Phone Number"

    else:
        success = client.messages.create(to=pnumvalid, from_=SIGNALWIRE_NUMBER, body= body)
        return "Message sent."

Phone Number Validation

Validating phone numbers helps reduce improperly formatted requests to SignalWire, which in turn means your messages are delivered to the right target more appropriately! We can do this with some basic regex using python's default regex package re.

First we will define a new function and accept one pnum parameter. When we call this function in createsms() we will pass the phone number from our client as pnum.

Next we define our compiled regex as pattern. Our regex is simply looking for a string of 10 or 11 digits.

Then we will create a filterednum variable which will strip all non-digit characters from our phone number. The goal is to eliminate any white-space or special characters, for instance 1(123)-123-1234 would be stripped down to 11231231234.

Once we have our number filtered we can use the regex findall method to return a list of strings that match our criteria. We should only get 0 or 1 matches. If we get 0 matches, we return False which will return to our function.

If we do get a match, we will check the length of the match. If the length is 11 digits, and the leading digit is a "1" we can assume this user included the country-code and append a + to the string and return our e.164 formatted phone number to our function which will then use it as the to number in our text.
Similarly, if the length of our match is 10 digits we will assume the user did not include an area code and append +1 before returning our number to the function.

def phonevalidation(pnum):

    pattern = re.compile(r'\d{10,11}$')
    filterednum = re.sub("[^0-9]", "", pnum)
    matches = pattern.findall(filterednum)

    for match in matches:
        if len(match) == 11 and match[0] =="1":
            match = "+"+match
            return match
        if len(match) == 10:
            match = "+1"+match
            return match
    else:
        return False

This Function is designed to Validate US country codes

If you would like to validate numbers from other countries you may have to adjust the code to match your desired country-code and phone number lengths.

Client-side Code

Our client-side code is just a simple html file SendSMS.html.
Most of this code is just the default/boilerplate HTML. The heart of our client really boils down to the <body>.

First we will create a new <form> with the action url being our /createsmshandler route. Once this is set we can create a <label> that will describe what our form does.
Now we can create our two text inputs pnum which is our target phone number, and smsbody which is the message the client would like to send. These will be passed as arguments to /createsmshandler.

Example: /createsmshandler?pnum=%2B11231231234&smsbody=Your+SMS+body+here

Finally, we have to create a <button> which will be used to submit our request and ensure we close our </form> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Send A Message</title>
</head>
<body>
        <form action = "/createsmshandler">
        <label for="pnum">Send an SMS</label><br>
        <input type="text" id="pnum" name="pnum" value="+18001234567">Send SMS To</input></br></br>
        <input type="text" id="smsbody" name="smsbody" value="Your SMS body here">Sms Body</input></br></br>
        <button id="submitButton" class="float-left submit-button" >Send SMS</button>
        </form>
</body>
</html>

Wrap Up

This is a simple and flexible way to allow data to be passed from the client to your server which can then be validated before we create requests to the SignalWire API. While this guide focuses on SMS, this same principle can be used to implement a wide variety of features into your web app.

Required Resources:

Github Repo
Python SignalWire SDK

If you would like to test this example out, create a SignalWire account and Space.

Please feel free to reach out to us on our Community Slack or create a Support ticket if you need guidance!

Overview

What do I need?​

How to run​

Run Natively​

Code Walkthrough​

Server-side code​

Set-up​

Index Route​

Create Sms/Handler Route​

Phone Number Validation​

Client-side Code​

Wrap Up​

Required Resources:​

Sign Up Here​