Message Center content

Send Message Center messages to your App channel.

About Message Center

Message Center is both a place in your app where you can display persistent rich messages, including HTML, video, etc., and a message type. Similar to email, Message Center represents both the medium (the in-app inbox) and the message type (the messages you send to the inbox). In reporting and other areas of Airship, a Message Center message may be referred to as a rich page.

You can combine a Message Center message with a Push NotificationA message that can appear on any screen on a mobile device. Push notifications appear as banners. and/or In-App MessageA message that appears inside of your app. You can send in-app messages to your entire app audience, not just users who have opted-in to push notifications. message.

Appearance and behavior

Message Center messages are fullscreen, with navigation back to the inbox at the top of the screen. The messages are accessed from the Message Center inbox in your app, and you can configure a push notification or in-app message to open a Message Center message.

  • Inboxes are limited to 250 messages. Exceeding the limit deletes the oldest messages first.
  • Messages remain in the inbox until expired or deleted.
  • Messages expire after 1 year or per message expiration setting.

To create the message content, you can either upload your own HTML, or design using our WYSIWYG editor. Airship supplies several default layouts, and you can save the layouts you create.

  • Inbox preview — The inbox supports a message preview of a thumbnail image and 1 or 2 lines of text

  • Expiration and you can specify an expiration date, when the message is removed from the inbox.

  • Custom templates — Airship can create and add custom message templates for you. Contact your Airship account manager if you are interested in adding custom templates to your project.

Theming your Message Center requires changes to the configuration file in your iOS or Android/Amazon project. See: Styling the iOS Message Center and Styling the Android Message Center.

Hosting and page size

Content is hosted in a CDN, ensuring responsive load times for your users globally. Hosted content — including embedded CSS, images and JavaScript — is limited to 1536K, however the ideal page size is much smaller, given the potential for degraded download speeds on cellular networks. We recommend that you optimize your images and HTML to keep total page sizes under 100K.

If you have additional assets to load, you can host them in another location and link to them. Airship offers additional asset hosting options as a Professional Service. Contact Airship Sales for more information.

Choosing an editor

The first step in adding content to a landing page or Message Center message is choosing an editor.

Use the Interactive editor to do any of the following:

Use the Visual editor to do any of the following:

  • Upload your own HTML.
  • Select a legacy custom or default template. This editor has fewer default templates than the Interactive editor and with simple layouts.
  • Design using our legacy editor, which has fewer design features than the Interactive editor.
 Important

  • Uploaded HTML is single-use. It is not saved in your project for reuse on other messages.
  • You cannot edit uploaded HTML. We recommend sending a test message before you send to your live audience.
  • See: Custom HTML Templates for Rich Pages.

Creating content: Interactive editor

You configure the appearance of the message in the Content step of a composer; in the Delivery step you can configure content-related features that do not affect the appearance of the message.

In the Content step, click Message Center then Add content:

Then click Interactive editor » Add content » Edit. Now you can configure the message content:

  1. Add a Title.

    1. Click Add  .
    2. Enter a title.
    3. If your title includes HandlebarsAirship’s message personalization syntax using double curly braces, more commonly known as {{handlebars}}. Use handlebars to insert variables and conditional logic in messages and templates. , enable the Sample data option, and enter sample JSON to test your message.
    4. Click Done.
  2. Add the Message body.

    1. Click Add  .
      • For HTML, click Paste HTML or Upload HTML file, and add your HTML.
      • For the WYSIWYG editor, select a default or saved layout, or select Blank Layout to design your own; you can edit any layout after selecting. Then design your message. See the WYSIWYG Editor for details.
    2. Click Done.
  3. Click Done to exit the editor.

Now you are ready to complete the remaining steps in the composer.

Set expiration

The Expiration for Message Center removes the message from users' inboxes. This may be helpful if the message represents a coupon, sale, or specific event and needs to expire on a specific date and time, or after a period of time has elapsed (duration).

If you created your Message Center message using the Visual editor, you can specify a duration on the editor’s Options tab. Creating content: Visual editor.

For Message Center messages created with the Interactive editor (or created using a template that was created using the Interactive editor), set expiration in the Message Center Options section in a composer’s Delivery step. Select one of:

  • Duration: Enter the number of minutes, hours, or days past your defined send time to remove the message.
  • Date & Time: Select the date, time, and time zone when the message should be removed.

Add custom keys

You can set Custom KeysAdditional key-value pairs in your push notification payload for use by custom code in your app. You can use custom keys to pass additional campaign identifiers for analytics, pass user information to the device, control the look and feel of the app, provide image links, etc. that apply specifically to a Message Center message.

If you created your Message Center message using the Visual editor, you can add custom keys on the editor’s Options tab. See: Creating content: Visual editor.

For Message Center messages created with the Interactive editor (or created using a template that was created using the Interactive editor), set custom keys in the Message Center Options section in a composer’s Delivery step.

Add a key and value. Click Add Another for additional keys.

Add preview lines

Message Center supports a message preview, which is how the message appears as listed in the inbox. In the Visual editor you enter preview Lines 1 and 2 on the Message Center tab. Creating content: Visual editor.

For Message Center messages created with the Interactive editor, you can add preview lines via Custom Keys in the Message Center Options in a composer’s Delivery step.

 Note

You must perform some development work before your app can display preview lines in the inbox.

Use com.urbanairship.listing.field1 and com.urbanairship.listing.field2 as keys representing preview lines 1 and 2. In the Value field for each key, enter the text that you want to show on each line of the preview.

Add thumbnail image

Message Center supports a message preview, which is how the message appears as listed in the inbox. In the Visual editor you enter a thumbnail image for the preview on the Message Center tab. See: Creating content: Visual editor.

For Message Center messages created with the Interactive editor, add the image while in the WYSIWG editor:

  1. Click Settings in the left sidebar.

  2. Enter the HTTPS URL of an image.

    • URL-referenced media must use HTTPS and be accessible by your audience.
    • Supported file types: JPEG, JPG, GIF, PNG
    • Airship recommends a maximum file size of 512KB for thumbnail images.

    If your Airship plan includes CDN support, you can also upload an image or select from previous uploads.
    1. Select Upload and click Upload File.

      1. Click Choose file and select a file to upload, or select from previous uploads.

        • The default sort order is most recent upload first.
        • You can search by file name or keyword.
        • A file preview appears after upload or selection. Click   to preview audio and video files.
      2. (Optional) Add or edit keywords for the file to help organize your uploads.

        • Enter a term in the search field below the preview and select from results, or click Add keyword: [term].
        • Click   to remove a keyword.
      3. Click Insert selected media.

    Creating content: Visual editor

    You configure the appearance of the message in the Content step of a composer; in the Delivery step you can configure content-related features that do not affect the appearance of the message.

    In the Content step, click Message Center then Add content:

    Then click Visual editor » Create. Now you can configure the message content:

    1. Select a template or the upload option.

      • For HTML, click Select for Upload under Standard Templates.
      • For templates, click Preview for a template and select devices at the top of the screen to see how it will appear, then click Select for the template you want to use.
        • Standard Templates are Text, Image, and Video. See: Standard templates.
        • Templates added for you by Airship are listed under Custom Templates.
    2. Configure the Message Center tab to determine the message preview that appears in the Message Center inbox.

      • Message Center Title — Required. Enter text.
      • Thumbnail — Upload a .jpg, .gif or .png file under 512 KB.
      • Lines 1 and 2 — These lines appear below the title. Enter text.
    3. Configure the Content tab to create the message body.

      • For HTML, upload your HTML file.
      • For templates, configure the fields for each page element. See: Field configuration. You can click to select fields in the preview or select directly from the side menu. Use the ON/OFF toggle in the upper right corner to enable/disable an element.
    4. Configure the Options tab.

      • Remove from Message Center — By default, messages are set to Never expire. To set expiration, select Specify and enter the number of minutes, hours, or days after send time when the page will expire. Expired messages are removed from users' inboxes.
      • Custom KeysAdditional key-value pairs in your push notification payload for use by custom code in your app. You can use custom keys to pass additional campaign identifiers for analytics, pass user information to the device, control the look and feel of the app, provide image links, etc. — Enter the key and value. Click   for additional keys.
    5. Click Save & Exit.

      • You cannot save until your page meets minimum configuration requirements. Requirements are listed above Save & Exit.
      • If your template includes a button or image, you must configure or disable its Action Link before you can save.

    Now you are ready to complete the remaining steps in the composer.

    Standard templates and fields

    Airship provides three default (labeled “Standard”) templates: Text, Image, and Video.

    • Each template contains various default elements.
    • Each element requires configuring one or more field. See: Field configuration.
    ElementFieldsText templateImage templateVideo template
    PageOnload
    HeadlineText1
    ContentText
    ButtonText, Link
    ImageImage, Link
    VideoVideo

    1. Labeled “Heading” in the Image template.

    Field configuration

    Elements in a template are controlled by various fields. Both custom and standard templates use the same field types, requirements, and configuration:

    • Text — Displayed in a headline, message body, button label, etc. Enter text.

    • Image — Displayed in the body of the message. Upload a .jpg, .gif or .png file under 512 KB.

    • Video — Displayed in the body of the message. Enter the URL for the video source.

    • Onload — Add or remove tags when the content loads.

      1. Click Add Tags or Remove Tags.
      2. Click Select Tag.
      3. Enter the tag in the search field.
        • Matches are listed below the Create Tag button. Click to select.
        • If the tag is not found, click Create Tag to add it.
        • Remove a selected tag by clicking   at the end of its row.
      4. (Optional) Repeat for additional tag actions.
    • Link — The action that occurs when a user taps a button or image in the message. Select and configure an ActionA configurable behavior that occurs when a user interacts with your message, e.g., opening a web page. : Deep Link, URL, or Share.

      You can also add or remove a tag when your audience taps the button or image. Follow the process as described for Onload above.

       Important

      • Images have Action Link enabled by default. This makes the image perform as a button. If you don’t want the image to be clickable, disable Action Link for the image.
      • While you can disable the Action Link for buttons, doing so does not remove the button itself. Because you must configure or disable the Action Link to save a template, you can disable it if you want to edit the message later.