Rich Messaging

Use Rich Messaging to amaze your guests with vibrant colors, images videos, and call-to-action links for notification messages sent to the user's News/Alerts section of their mobile app. These messages can be configured for most campaigns and stand-alone announcements. You can add rich messaging to any of your Notification Templates as well.

There are two types of rich message announcements:

  • User Specific
    Triggered from campaigns and notification templates.
  • Business Wide Messages
    Standalone announcements are the simplest way to reach out to all signed-up guests without having to create a campaign. Whenever you create a new announcement and activate it, it starts appearing in the notifications section of the app.

Create a New Rich Message Notification

Rich messaging can be added to most of your campaigns, as long as they have a messaging component. While creating a new campaign, you can configure your rich message by toggling a switch at the bottom of your messaging section.

  1. Navigate to Marketing Automation > Campaign Management in your left toolbar andcreate a new campaign that utilizes messaging.
  2. At the end of the messaging section in Step 2 - Whom, toggle the Configure Rich Message toggle to the "on" position. Your rich messaging fields will expand below.
  3. Choose a Name for your rich message. This is internal only to identify your messages.
  4. If using a CSS Stylesheet, click the Style drop-down and select the one you want to use.

CSS Stylesheet If Punchh is developing your mobile app, there is a standard format stylesheet we provide, available on the developer portal here. Otherwise, if your business is taking care of your app development, you'll likely want to use your own. Contact your Punchh representative to add an new style for your brand.

  1. Configure the look and content of your rich message using the fields described in the "Message Content" section below.

Hero Content

This is where the main visual component(s) of your rich message will appear. You'll choose an image or video to serve as the focal point of your message.

  • Type - Select Image or Video as your desired media type.

  • URL - The main visual content of the rich message, provides a URL for an image or video file to be used as the Hero content. You must provide a URL that ends in a video format, such as MP4. Note: Web-based videos, such as YouTube videos, are not supported.
    Examples:
    Supported Video Link: https://video.mp4
    Non-Supported Video Link: https://www.youtube.com/
    Image Specs will vary slightly according to the style selected. The most commonly used resolution is w:1280px by h:720px.

    - or -

    Browse (Upload) - Upload an image for the Hero Content.
    Your image file must be a .jpg, .gif, or .png and less than 5 MB. We currently only support uploading for image files; to use a video as the Hero Content please use a URL in the field above.
    See more about Image Size Specifications below.

  • Alternate Text - If the background image or video doesn't load, this alternate text will appear, alerting the user that there was supposed to be something there.
    Alternate text is particularly useful for people with a visual disability.

Text Content

Add a title, subtitle, and body text to your message.

  • Title - This title text will appear as the message header.
  • Subtitle - Subordinate title that appears below the title message header.
  • Body - The body text of the rich message, follows below the Title and Subtitle.

Background Content

Commonly skipped given that the app has a style added already, but you could add an image if desired. (Test it out first though!)

  • Type - Select Image or Video as your desired media type.

  • URL - Provide a URL for an image or video file to be used as the background content.
    Image Specs will vary slightly according to the style selected. The most commonly used size is 1125px by 633px.

    - or -

    Browse (Upload) - Upload an image to be used as the background content.
    Your image file must be a .jpg or .png and less than 5 MB in size. We currently only support uploading for image files; to use a video as the background content please use a URL in the field above.

  • Alternate Text - In the event that the background image or video doesn't load, this alternate text will appear, alerting the user that there was supposed to be something there.
    Alternate text is particularly useful for people with a visual disability.

Call to Action

Call to Action rich text generates a tappable/clickable button and/or text in the message that links to an external/internal URL or to another screen within the mobile app.

  • Type - You can have up to two links per message (primary and secondary). Choose from the following link options:
    • External Web Link - Opens outside of the app
    • Internal Web Link - Opens within the app. The URL must begin with "https://" (secure).
    • Deep Link - Opens a different section within the app. You'll need to use Deep Link Helper message tags for these links.
    • Drill Down - Used with additional body copy added and will render a new screen in the app, similar to the reward detail screen.
  • Link - Enter the URL you want your call-to-action button to lead to.
    The example below is using a Deep Link Helper tag to navigate the user to the online ordering section of the app.
  • Label - This is the text that will appear on your call-to-action button.
    In the example below, our text is "Order Now". For this button to lead to online ordering, we'll have to use the Deep Link tag, as shown in the fields above.
  • Secondary - If inserting two call-to-action URLs, repeat the settings as you did for your primary link above. The secondary link will appear as text only, not as a button like the primary.
    Typically, a secondary link is useful for linking to the terms and conditions for your promotion.

Meta

The Meta section of your rich message settings includes some nuts and bolts configuration such as rank/priority in the user's inbox and metadata tags.

  • Rank - Rank marks the priority of a message. The higher the number, the higher the priority.
  • Tags List - Tags can be used to add Metadata. This needs to be configured within the app framework first in order for the tag to know what it is looking for. Type out the name of a tag and press return on your keyboard to add it.
  • Dismissable - Toggle on/off a text link to dismiss the message from the user's News section. (Recommended for every message)

In addition to the dismissable toggle, your campaign setup also includes the Push/Rich Notification Retention Days field. This applies to Rich Messages only. Enter a length of time (in days) for this notification to remain in the News & Offers (Inbox) section of a guest's mobile app. If the field is left blank, the platform will default to your brand's business settings. Contact your Punchh representative to set up or edit your business's overall Push/Rich Notification Retention Days setting.

Image Size Specifications

Images may be no larger than 5 MB, although for practicality, the smaller the file size, the faster and smoother it will load in the app.

For image resolution, we recommend using an image size with the highest resolution that safely covers the screen resolution ratios for the maximum amount of devices. This works out to an image size of h:1280px by w:800px. On devices with a higher resolution, the image will be upscaled to fill the screen.

Additionally, some phones you encounter may crop portions of the image on the top/bottom and/or sides. You can account for this by including gutters around your image that don't contain text or any important graphics. The following image can serve as a template when creating Rich Messaging images. It includes a "Safe" area where your important information will go and a gutter (buffer area) around it to prevent any possible cropping.