Messages

Rich messages

Whispir’s rich messages allows you to seamlessly ‘push’ HTML content to your audience. This content can range from a simple web page through to a mini web application with interactive widgets, such as video, a data visualisation or map. For example:



The inclusion of the @@web_link@@ tag anywhere in the body of the SMS message or email will automatically generate a URL and embed any content specified in the web body of the same message.

Requirements for using rich messaging

Rich push is used when delivered to a mobile device. The receiving device requires the following features to be enabled to ensure the experience is optimised:

  • Able to launch a web browser that is HTML5 compliant. Most mainstream smartphones and tablets include modern browsers.
  • Has JavaScript enabled.
  • Has an active internet connection.

Guidelines for authoring the rich message HTML

Whispir allows you to control the entire content to be delivered to an end user’s device. Therefore, it’s important that you build to a responsive design to display the content appropriately for every screen size.

  • Build to a responsive design that works across your target devices and test across these devices.
  • Whispir strips body and doctype tags, and replaces them with tags suitable for rendering on mobile devices. The final DOCTYPE is delivered as a HTML 5 doctype.
  • Use style tags at the bottom of the HTML content (rather than putting them in the head tag or using inline styles).
  • Include any custom JavaScript at the bottom of the content if possible as it speeds up viewing.

HTML resources

Any HTML resources (images, videos and visual assets) must be hosted externally and be referenced in the HTML. This allows you to control and link to resources using your existing CDN assets.

  • External hosting also applies to scripts such as JavaScript libraries. Google CDN has excellent resources that you can refer to. JavaScript can also be coded inline if required.
  • Because content is delivered over HTTPS, Whispir recommends that all external resources be accessible over HTTPS. Devices may refuse to load or display any mixed (HTTP and HTTPS) content.

Response rules

Response rules allow you to predefine the responses to your messages. Message recipients can review the possible responses and reply to your message by selecting one.

  • Response rules can be attached to a Whispir message template within the Whispir interface.
  • A message with response rules displays a response button at the bottom on the page. So ensure your message has at least 60 px at the bottom of the page content.

  • JSON
  • XML

Simple rich message using SMS with a web link:

{{codeStart}}

HTTP 1.1 POST https://api.<region>.whispir.com/messages?apikey=[your_api_key]

Authorization: Basic am9obi5zbWl0aDpteXBhc3N3b3Jk

x-api-key: your_api_key

Content-Type: application/vnd.whispir.message-v1+json

Accept: application/vnd.whispir.message-v1+json

{

"to" : "+1000000000",

"subject" : "Test Rich Message",

"body" : "This is some content followed by the rich message link @@web_link@@",

"web" : {

"type" : "text/html",

"body" : "<div class='content'>This is the body of my rich message</div>"

}

}

{{codeEnd}}

Whispir’s Javascript API

Users can use Whispir’s Javascript API to perform different functions from within rich messages. The following example uses JavaScript to personalise a rich message:

{{codeStart}}

HTTP 1.1 POST https://api.<region>.whispir.com/messages?apikey=[your_api_key]

Authorization: Basic am9obi5zbWl0aDpteXBhc3N3b3Jk

x-api-key: your_api_key

Content-Type: application/vnd.whispir.message-v1+json

Accept: application/vnd.whispir.message-v1+json

{

"to" : "+1000000000",

"subject" : "Test rich message",

"body" : "This is some content followed by the rich message link @@web_link@@",

"web" : {

"type" : "text/html",

"body" : "<div id='content'><p>Hi <span id='first_name'></span></p><p>This is the body of my rich message</p><script type='text/javascript'>document.getElementById('first_name').innerHTML = Whispir.data.profile.firstname;</script></div>"

}

}

  

# For ease of reading, the HTML above looks like this:

<div id='content'>

<p>Hi <span id='first_name'></span></p>

<p>This is the body of my rich message</p>

<script type='text/javascript'>

var firstName = Whispir.data.profile.firstname;

document.getElementById('first_name').innerHTML = firstName;

</script>

</div>

{{codeEnd}}