Authoring Rich Push Messages

Rich Push Messaging

Transform your conversations through rich push messaging to provide greater levels of customer experience and stakeholder engagement.

What is a Rich Push Message?

Whispir's Rich Push Message (RPM) feature provides you with the capability to seamlessly 'push' HTML content to your audience. This can be in the form of a simple web page, to a mini web application with interactive widgets such as a video, visualisation, or map. The Personalisation API allows you to tailor the content for each person who receives an RPM. You can even solicit canned responses from your audience.

Requirements to use Rich Push

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

The target device:

  • Needs to be able to launch a web browser that is HTML5 compliant. Most mainstream smartphones and tablets include modern browsers.
  • Requires Javascript to be enabled on the target devices.
  • Have an active internet connection.

Guidelines for HTML authoring

Whispir allows you to control the entire content to be delivered to the end users 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. Ensure you test across these devices.
  • Whispir strips body and doctype tags, and replaces them with tags suitable to render on mobile devices. The final DOCTYPE is delivered as a HTML 5 doctype.
  • Use classes + style tags at the top of the HTML content (rather than inline styles). Custom javascript should be included at the bottom of the content if possible (speeds up viewing).

HTML resources

Any HTML resources (Images, videos and visual assets) must be hosted externally, and 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 here: https://developers.google.com/speed/libraries/. Javascript can also be coded inline if required.
  • As content is delivered over HTTPS, it is recommended that all external resources be accessible over HTTPS, as devices may refuse to load or display any mixed (HTTP and HTTPS) content.

Response rules

Response Rules allow you to define pre-canned responses to your message. Your stakeholders can review these responses and optional 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 60px at the bottom of the page content.

Personalisation API

Whispir provides a Javascript API that allows you to set and display information from the persons profile within the Rich Push Message

Retrieve a recipients name (must be registered in Whispir prior to sending)

The Whispir global object allows you to retrieve the persons details, such as first name and last name.

Given the following HTML, you could use JavaScript to populate this with the recipients name:

<div id="welcome"></div>

The following JavaScript should be called to populate this DIV with some information.

<script>
//Update the welcome div with the contact/users name
var firstName = "";
var lastName = "";

if(window.Whispir.data.profile) {
  firstName = window.Whispir.data.profile.firstname;
  lastName = window.Whispir.data.profile.lastname;
}

if (firstName && document.getElementById('welcome')) {
  document.getElementById('welcome').innerHTML = "<p>Hi " + firstName + "</p>";
}

</script>

If the recipient of the message is a current Active Contact or a User, this should yeild the following result:

<div id="welcome"><p>Hi Jordan,</p></div>

Update a person's profile with current location data

The Whispir global object allows you to set the persons details, such as retrieve and submit a persons geo-location.

/* -------------------------------------------------- */
/* Retrieve persons location based on their lat, lon  */
/* -------------------------------------------------- */ 

function sendLocation() {

  // Does this device support the standard WC3 location API?
  if(navigator && navigator.geolocation && 
      navigator.geolocation.getCurrentPosition) {

    // If so, request this persons Lat, Lon
    navigator.geolocation.getCurrentPosition(
      // Success? then submit location and display map
      // Parameter 1
      function success(pos) {
        //Update the Contact's location in Whispir
        window.Whispir && 
            window.Whispir.actions.updateProfile && 
                window.Whispir.actions.updateProfile({
          location: {
            latitude: pos.coords.latitude,
            longitude: pos.coords.longitude
          }
        }, function(err) {
          if (err) {
            console.log(err);
          } else {
            console.log("Location Updated..");
          }
        });
      }, 
    
      // Problem? then warn user
      // Parameter 2
      function error(err) {
        failedToLocate();
      }, 

      // Parameter 3
      {
        enableHighAccuracy: true
      }
    );

  } else {
     failedToLocate();
  }
}

// Perform the function
sendLocation();

Customise message responses

Responses are available as a resource to the RPM, and can be accessed through a global javascript object once the message has been sent. The Whispir global object allows you to set hooks for certain events. The "Whispir.hooks.appendedResponseContent" allows you to trigger an event when the person selects from a message response

// if the global "Whispir" object exists ..
if(window.Whispir && window.Whispir.hooks) {

  /* .. overwrite the Whispir event hook function 
   * called appendResponseContent()
   * This event will be triggered when the person 
   * selects a message response from within the RPM 
   **/
  
  window.Whispir.hooks.appendedResponseContent = function(response) {

    /* response.name contains the persons 
     * selected response.
     * If the person has selected "Unsatisfactory", then perform 
     * the following 
     **/
 
    if(response.name == "Unsatisfactory") {
      
      var contact = prompt("How should we contact you?",
                           "email or phone no. here");

      if (contact == null) {
        contact = "unknown";
      }

      alert("Thanks for your response.");

      // Any string returned will be appended to 
      // the response.name object
      // In this case, return this persons contact details
      
      return '- Contact: ' + contact;
            
    } else {
      alert("Thanks for your response.");
    }
  
  // In the event that we haven't selected an appropriate response 
  // (or clicked cancel) the function should return nothing. 
 
  return;
}

}