By 
From ticket releases to product restocks, appointment availability to breaking news, SMS notifications and broadcasts are a handy tool to keep your customers engaged about the things they care about.
This tool allows users to sign up for SMS notifications with an easy form. Users are verified with Twilio's Verify API to both decrease fraud and ensure that you're only sending messages to people who want to see them. The application optionally supports tags, so you can segment notifications to different groups of people.
This blog post will walk you through how to launch your own SMS notification service with no code and how to edit the project for some common modifications.
Prerequisites for sending broadcast notifications to verified subscribers
Before you can send an SMS broadcast you'll need to:
Step 1: Sign up for or sign into your Twilio account - sign up or sign in.
Step 2: Search for and buy a Twilio Phone number (or use an existing phone number on your account).
Step 3: Create a Messaging Service in the Twilio Console and select "not listed here" as the use case. Give your messaging service a name like "Notification Service".
Step 4: Add your Twilio Phone number as a sender to your messaging service as seen below:
Step 5: Create a Notify Service in the Twilio console. Give it a name like "Example Notify Service". In the Notify Service configuration tab, select your newly created Messaging Service from step 3 under the "Messaging Service SID" drop down and save.
Step 6: Create a Verify Service in the Twilio console. The Service Name will appear in the SMS body but you can always edit it later.
You'll need your Verify Service SID (starts with VA) and your Notify Service SID (starts with IS) later.
Quick Deploy the broadcast notification application
Make sure you're logged in to Twilio and head over to Twilio's Code Exchange for the Broadcast SMS with Verified Sign up page and paste in your Notify and Verify Service SIDs along with your phone number in E.164 format in the Broadcast admin number field. This number will be used for verification when someone attempts to broadcast a message to subscribers.
Click Deploy my application at the bottom of the page. After a few seconds you should see a button to launch the live application. Click the button under step 4 to go to your new application. You will see the screen below:
Head over to the Subscribe link at the bottom under the Usage section (or replace /index.html with /subscribe.html in the URL) to sign up for notifications. The example allows you to select topics to be notified about - in this case pie or cake (pie, obviously).
To test the application, enter your phone number and hit the Subscribe button to sign up. You'll receive a verification code to confirm your number:
Enter the code in the screen that appears:
If the code is correct, you'll see a confirmation message and receive an SMS from your Twilio phone number letting you know you've been subscribed.
Modify the broadcast SMS application
Unless you're running a bakery you'll probably want to modify the subscription tags. Even if you're not a programmer, I'll walk you through how to edit the code to make changes.
There's a section on the main page of the deployed application that says "Make the application your own". Click the Edit this application button as seen below:
This will take you to the Twilio Console Functions editor and you will see a page like this:
Change subscription option names
If you want to keep the segments but change the names, you can do that!
Click on /subscribe.html under the Assets section and update the names from "Cake" and "Pie", which start with <label for. I've changed the options to Blue and Green in the example below:
<div>
<input type="checkbox" id="option1" name="tags" value="option1" />
<label for="option1">Blue</label><br />
</div>
<div>
<input type="checkbox" id="option2" name="tags" value="option2" />
<label for="option2">Green</label><br />
</div>
Head over to /broadcast.html and make a similar change seen here:
<div>
<input type="radio" id="option1" name="tags" value="option1" />
<label for="option1">Blue Fans</label><br />
</div>
<div>
<input type="radio" id="option2" name="tags" value="option2" />
<label for="option2">Green Fans</label><br />
</div>
Save all of the files (you should see solid gray dots next to the file name once they're saved).
Deploy the changes by clicking the Deploy All button at the bottom left hand corner. The dots will change to green checkmarks once everything is deployed.
Navigate back to the Live Twilio Application page to see your renamed options!
Add subscription options
You can also add additional options for users to subscribe to.
Head back to the Twilio Console Functions editor and click on /subscribe.html. Copy lines for one of the div blocks and paste them below the block to create a new div. Change the label name to another value such as "Red" and update the id, value, and for to a unique value like option3. You can add as many options as you want this way. Save the file.
<div>
<input type="checkbox" id="option1" name="tags" value="option1" />
<label for="option1">Blue</label><br />
</div>
<div>
<input type="checkbox" id="option2" name="tags" value="option2" />
<label for="option2">Green</label><br />
</div>
<div>
<input type="checkbox" id="option3" name="tags" value="option3" />
<label for="option3">Red</label><br />
</div>
Head over to /broadcast.html and repeat the process by copying one of the div sections, change the label name, and update the id, value, and for to match the values you added in subscribe.html. In this case, the values are option3.
<div>
<input type="radio" id="option1" name="tags" value="option1" />
<label for="option1">Blue Fans</label><br />
</div>
<div>
<input type="radio" id="option2" name="tags" value="option2" />
<label for="option2">Green Fans</label><br />
</div>
<div>
<input type="radio" id="option3" name="tags" value="option3" />
<label for="option3">Red Fans</label><br />
</div>
Save the file and deploy the changes by clicking the Deploy All button. The dots will change to green checkmarks once everything is deployed and you now have additional options:
Remove subscription options
If you don't need to segment your customers at all, you can remove the subscription options all together.
Click on /subscribe.html and delete the input option sections. Alternatively you can comment out the code in case you want to change it later. Delete or comment lines starting with <p>Keep me updated and ending with the </div> that contains the last option:
<form id="subscribe">
<label for="phone">Phone number</label>
<input type="tel" id="phone_number" required />
<!-- <p>Keep me updated on...</p>
<div>
<input type="checkbox" id="option1" name="tags" value="option1" />
<label for="option1">Blue</label><br />
</div>
<div>
<input type="checkbox" id="option2" name="tags" value="option2" />
<label for="option2">Green</label><br />
</div> -->
<input type="submit" value="Subscribe" />
</form>
Delete or comment out the following lines in the script section starting with var tags =, which parses the tags and sends them to the subscription endpoint for processing:
// var tags = document.querySelectorAll("input[name=tags]:checked");
// tags.forEach((tag) => data.append("tags", tag.value));
In the Functions section of the editor, click on the /subscribe function and delete or comment out the lines starting with const tags = and tag: tags:
// const tags = typeof event.tags === 'object' ? event.tags : [event.tags];
verifyService.verificationChecks
.create({ to, code })
// eslint-disable-next-line
.then((check) => {
if (check.status === 'approved') {
notifyService.bindings
.create({
identity,
bindingType: 'sms',
address: to,
// tag: tags,
})
Head over to /broadcast.html and delete or comment out lines that render radio buttons starting with <p>Send updates to:</p>:
<form id="broadcast">
<label for="message-body">Message</label>
<input type="text" id="message-body" required />
<!-- <p>Send updates to:</p>
<div>
<input type="radio" id="all" name="tags" value="all" checked />
<label for="all">Everyone</label><br />
</div>
<div>
<input type="radio" id="option1" name="tags" value="option1" />
<label for="option1">Blue Fans</label><br />
</div>
<div>
<input type="radio" id="option2" name="tags" value="option2" />
<label for="option2">Green Fans</label><br />
</div> -->
<input type="submit" value="Send message" />
</form>
In the same file, delete or comment out the code that parses the tags and sends them to the broadcast endpoint for processing:
data.append("code", code);
// var tag = document.querySelector('input[name="tags"]:checked').value;
// data.append("tag", tag);
fetch("./broadcast", {
Save all of the files (you should see solid gray dots next to the file name once they're saved).
Deploy the changes by clicking the Deploy All button. The dots will change to green checkmarks once everything is deployed. Your interfaces will no longer have any options and will only ask the user to enter their phone number to subscribe:
Next steps
There are plenty of other ways you can modify and extend this project, including building 2-way messaging support. Check out this similar Quick Deploy project to see more. There's so much more you can do with Twilio, check out these Quick Deploy projects for more inspiration:
I can't wait to see what you build!
