How to Send Your Users a Branded SMS using Twilio MMS and Illustrator

Time to read: 4 minutes

October 09, 2014
Written by
Jarod Reyes
Twilion

iphone-feature

Have you ever had a night where you feel like everything funny you say lands on deaf ears, only to have an unplanned, half-baked comment make everyone bust up laughing? I think it was Louis CK who said “…simple truth beats out cleverness every time”. I thought of this a few weeks ago when I was showing some of my colleagues an SMS demo I had made that would send a user a text message once they enter their phone number. I had hoped they would find the demo interesting, but it turns out they were more interested in the resulting text that was sent which included a Twilio logo in the message. As an offhand comment my buddy Matt Makai asked “is this a branded SMS?” Which is how the idea of “branded SMS” was born.

Of course, we didn’t actually create branded SMS, it’s more of a design trick. By sending an MMS with an image that looks like a standard text message with a logo on it, we create the illusion of a branded SMS. It may have been an accidental discovery, but it has the potential to be a very cool way of engaging your user base.

To send yourself a branded SMS text ‘hello’ to:

(979)272-6399

 

windows-feature.jpg

 

Twilio Recipe

Branded SMS Template (eps)
Twilio REST API
Twilio Number w/ MMS

 

How Branded SMS works

Pretty easy right? The only piece of code you would need to add to your server is the 4 lines necessary to send an MMS. The hardest part is actually creating the image that looks like a branded SMS, so let’s start there.

Creating the image to look like an SMS

The first step is to create an image that looks like an SMS across different devices. When I started working on this I realized there were a few challenges. First, I had to figure out how these images would render on different devices. Unfortunately I had to do this by trial and error since I was unable to find a developer guide that succinctly explained how MMS are rendered across different devices. So I borrowed friends devices, sent the MMS and iterated. The results are not perfect but at least convincing to the casual observer.

The next challenge is how do you decide which image to send? In other words, how do you know an iPhone user is receiving iOS looking branded SMS? There are few approaches to finding this information. Ideally you would have someone visiting your website or app on their mobile device before you initiate the branded SMS. In this case there are many ways to detect the device depending on whether it’s the web or a native app. In my demo I took a much less elegant approach and I simply asked the user. If you think of a super creative way around this problem feel free to share with me on twitter.

Luckily the fruit of my labor is available to you so that you don’t have to start from scratch. To help you get started I have included a few templates that have some SMS styles for iOS, Android and Windows.

sms-templates

Templates: illustrator, eps, pdf (download now)

Once you’ve created your own image be sure to export it as a jpg or png. Now all you need to do is host the image at a public url (dropbox, Amazon S3, etc) and you are ready to send your first branded SMS.

Sending an MMS with Twilio

We’ve been writing a lot about MMS so I’ll keep this short and sweet, but if you’d like a more in-depth look at how to get started using MMS definitely take a look at Kevin Whinnery’s post on the subject.

In the case of my demo, I wrote the server-side code in Ruby/Sinatra. The advantage of Sinatra is that I can write one little file and deploy to heroku. Here is the snippet that sends the MMS:

# Branded SMS Webhook: first asks for device -- then sends MMS
route :get, :post, '/branded-sms' do
  $DEVICES = {
    "iphone" => {
      "url" => 'https://s3-us-west-2.amazonaws.com/deved/branded-sms_ios7.png',
    },
    "android" => {
      "url" => 'https://s3-us-west-2.amazonaws.com/deved/branded-sms_android.png',
    },
    "windows" => {
      "url" => 'https://s3-us-west-2.amazonaws.com/deved/branded-sms_windows.png',
    }
  }

  @client = Twilio::REST::Client.new ENV['TWILIO_ACCOUNT_SID'], ENV['TWILIO_AUTH_TOKEN']
  @phone_number = Sanitize.clean(params[:From])
  @body = params[:Body].downcase

  deviceList = ($DEVICES.keys).join(',')

  if deviceList.include?(@body)
    pic = $DEVICES[@body]['url']
    puts pic
    message = @client.account.messages.create(
      :from => 9792726399,
      :to => @phone_number,
      :media_url => pic,
    )
    puts message.to
  else
    @msg = "What kind of device do you have? Reply: 'iphone', 'android', or 'windows' to receive a branded SMS"
    message = @client.account.messages.create(
      :from => 9792726399,
      :to => @phone_number,
      :body => @msg
    )
    puts message.to
  end
  halt 200
end

And with that, you have sent a super cool looking branded sms.

Wrapping Up

It may have been a total fluke that we ended up creating branded SMS over here at Twilio, but with the collective brilliance of all of you Twilio doers, I’m sure this concept could become a movement. What if you created an SMS with custom emoticons? Or how about leveraging the fact that you can send animated gifs using Twilio and create Messages that morph? The potential is pretty cool of hacking the SMS interface, and I look forward to seeing what you all create.

If you have ideas on hacking SMS or if you just need someone to hold the ladder while you graffiti fake logos on the sides of shopping malls, shoot me an email or find me on twitter.

Related Posts

Related Resources

A newspaper article

Twilio Docs

From APIs to SDKs to sample apps

API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
An Open book

Resource Center

The latest ebooks, industry reports, and webinars

Learn from customer engagement experts to improve your own communication.
User group reactions

Ahoy

Twilio's developer community hub

Best practices, code samples, and inspiration to build communications and digital engagement experiences.