Build the future of communications.
Start building for free

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

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

 

 

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.

Authors
Sign up and start building
Not ready yet? Talk to an expert.