Linking to "Send SMS" from a person profile

  • By Michael Garrison

Although Rock links the email address on a person profile page to the Compose Email page (and by the way, you do know that you can change the block settings from the Simple Communication to the Wizard-based communication page, right?), it does not do the same thing for phone numbers. Most mobile phones recognize phone numbers on a web page and turn them into links which will call the number when tapped. However, that doesn't do much good when you're at your desktop and want to send the person a text message.

Never fear!

With a bit of JavaScript wizardry, we can turn that little messaging icon to the right of sms-enabled phone numbers into a link to the page you want.

You'll need to have a Twilio number already configured in Rock, in order to do this

Create the Compose SMS page

First, we'll start by creating a page that will let your users compose an SMS message (and only an SMS message). I recommend starting at your internal homepage, then using "Child Pages" on the admin toolbar, navigate from "Person" to "Communications", and then create a new page called "Send SMS". If you do this, it will also put this page on your sidebar menu, giving your users easy access to an SMS-specific page. Or you can place it elsewhere (consider Internal Homepage -> Support Pages) or change the page settings to "Never" display.

OK, now that you've got your page, add a Communication Entry block to the main zone of the page. Then change the block settings and check only the box next to SMS, leaving the Email box unchecked. Now when you refresh the page, you'll see it goes straight to the SMS compose mode, rather than the usual behavior of defaulting to Email.

Now, take note of the PageId in the URL of this page- you're about to need it. Congratulations, you're halfway done!

Create the link

Now for the easy part. Go to a person profile page (any person profile page will do, but you'll be able to see the effect if you make sure it's someone with the messaging icon that shows up when they have a phone number with messaging enabled on it.

Get into the block settings for the bio block, and on the "Advanced" tab, scroll down to Post-HTML. Now paste this in:

$('<a href="/Page/123?person={{ Context.Person.Id }}"><i class="fa fa-comments"></i></a>').replaceAll('ul.phonenumbers li i.fa-comments')

Replace /Page/123 with the actual address of the Compose SMS page we just created and ... well, that's it. Refresh the page and you should see the messaging icon is now a link. Click on that, and you'll be taken to your SMS page with the person already pre-selected and ready to receive a message.

The reason we're making just the icon a link rather than the whole phone number is twofold: First, it doesn't interfere with your phone helpfully offering to let you dial the number with a single click. Second, since the icon only shows up when someone has messaging enabled on a number, your staff won't accidentally be able to send an SMS message to someone who has opted out of receiving SMS messages from the church.

So now, when you click on this:


you'll be taken straight to a page like this, with the person already selected and ready to receive your scintillating message! Well, without the warning about not having an SMS transport enabled, hopefully 😉


Spark Development Network
Flagstaff, AZ

Michael Garrison recently left his job in Architecture to become one of the "new guys" at Spark (the "Core Team"), but he's still helping out Christ's Church of Flagstaff and other non-profits with tech needs in his off-hours, trying to make computers do what computers do best, so that people are freed to do what we do best: relate with people!