Create Rich Pages

A rich page is a landing page or Message Center message in your app that can include HTML, video, etc.

Landing pages and Message Center messages can be visually identical, but there are a few differences. See the Rich Page Reference for detail.

Rich page editors

The first step in creating a landing page or Message Center message is choosing which editor to use:

  • Select the Interactive editor to do any of the following:
  • Select 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.

After you create the content in an editor you will return the the Content step in the composer and can continue configuring your message.

 Important

  • Uploaded rich pages are single-use. They are not saved in your account for reuse.
  • You cannot edit uploaded rich pages. We recommend sending a test message before you send to your live audience.
  • See: Custom HTML Templates for Rich Pages.

 Tip

Airship can create and add custom templates for you. Contact your Airship account manager if you are interested in adding custom rich page templates to your account.

Create a landing page

You can create a new landing page or select a landing page template in the Content step of the Message, Automation, Journey, and A/B Test composers. Landing pages can be used with push notifications and in-app messages. This tutorial covers the Content step only.

In the Content step of your message, automation, journey, or A/B test:

  1. Select Push Notification and/or In-App Message and click Add Content.

  2. Select the Landing Page action.

  3. Select the Interactive editor or the Visual editor.

  4. Add your message content:

    Interactive editor

    Use a blank or default template
    1. Click Add content.

    2. Click Edit.

    3. Click Add  .

    4. Select a default layout, or select Blank Template to design your own layout.

    5. Create your message body. See the WYSIWYG Editor Reference for details. The WYSIWYG editor supports merge fields using attributes, custom event properties, etc.

    6. Click Done to complete adding the message body.

    7. Click Done to exit the Interactive editor.

    Use a previously created template
    1. Click Select template.

    2. Select a template and click Continue with selected template.

    Upload HTML
    1. Click Add content.

    2. Click Edit.

    3. Click Add  .

    4. Click Paste HTML or Upload HTML file, and add your HTML.

    5. If your message 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. , click {+} Preview with sample values to test your message with JSON sample data.

    6. Click Done to complete adding your HTML.

    7. Click Done to exit the Interactive editor.

    Visual editor

    Use a legacy template
    1. Click Create.

    2. 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.
      • Templates added for you by Airship are listed under Custom Templates.
    3. Configure the fields for each page element. Elements are enabled by default. The ON/OFF toggle is in the upper right corner when configuring fields. You can click fields in the preview to configure them in the side menu or select directly from the side menu.

      Both custom and standard templates use the same field types, requirements, and configuration:

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

      The action that occurs when a user taps a button or image in the message. Select and configure an action.

      • Deep Link:

        Deep Link opens a screen in your app or website. Select a deep link from the list.

      • URL:

        A URL opens on top of the current page (in the same webkit view), not the mobile browser. Enter a URL.

      • Share:

        Share prompts the user to share your message with apps, social media accounts, and other services. Enter the text you want to accompany the share, including any promotional information, shortened links, hashtags, etc.

      You can also add or remove a tag when your audience taps the button or image.

      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.
       Note

      Tags will not appear in the type-ahead tag search until you send the message and the tag appears on at least one device. These tags are preserved in your draft but will not yet be visible to other aspects of the tag system, e.g., the Segment Builder.

       Important

      Images have the link action enabled by default. This makes the image perform as a button. If you don’t want the image to be clickable, disable the link action.

       Warning

      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.

      Onload

      Add or remove tags when the rich page loads. This tags every user who opens the rich page, whether they’ve reached it through a push, a badge, or by chance. Configure the tag action:

      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.
       Note

      Tags will not appear in the type-ahead tag search until you send the message and the tag appears on at least one device. These tags are preserved in your draft but will not yet be visible to other aspects of the tag system, e.g., the Segment Builder.

      Text Displayed in a headline, message body, button label, etc. Enter text.
      Video Displayed in the body of the message. Enter the URL for the video source.

    4. Click Save & Exit.

      • You cannot save until your page meets minimum configuration requirements.
      • Requirements are listed above Save & Exit.
    Upload HTML
    1. Click Create.

    2. Under Standard Templates click Select for Upload, and select your HTML file.

    3. Click Save & Exit.

Create a Message Center message

You can create a new Message Center message or select a Message Center template in the Content step of the Message, Automation, and Journey composers. This tutorial covers the Content step only.

In the Content step of your message, automation, or journey:

  1. Choose how you want to present the message, and choose an editor:

    • Add the message to the Message Center inbox only.
      1. Select Message Center and click Add Content.
      2. Select the Interactive editor or the Visual editor.
      OR
    • Add the message to the Message Center inbox AND link to the message from a push notification and/or in-app message.
      1. Select Message Center, combine with Push Notification and/or In-App Message, and click Add Content.
      2. Select the Interactive editor or the Visual editor in the Actions section. Message Center is automatically the selected action.
         Tip

        If you didn’t initially combine Message Center with another message type, you can do so by manually selecting Message Center from the Actions section.

  2. Add your message content:

    Interactive editor

    Use a blank or default template
    1. Click Add content.

    2. Click Edit.

    3. 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. , click {+} Preview with sample values to test your message with JSON sample data.
      4. Click Done.
    4. Add the Message body.

      1. Click Add  .
      2. Select a default layout, or select Blank Template to design your own layout.
      3. Create your message body. See the WYSIWYG Editor Reference for details. The WYSIWYG editor supports merge fields using attributes, custom event properties, etc.
      4. Click Done to complete adding the message body.
    5. Click Done to exit the Interactive editor.

    Use a previously created template
    1. Click Select template.

    2. Select a template and click Continue with selected template.

    Upload HTML
    1. Click Add content.

    2. Click Edit.

    3. 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. , click {+} Preview with sample values to test your message with JSON sample data.
      4. Click Done.
    4. Add the Message body.

      1. Click Add  .
      2. Click Paste HTML or Upload HTML file, and add your HTML.
      3. If your message 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. , click {+} Preview with sample values to test your message with JSON sample data.
      4. Click Done to complete adding your HTML.
    5. Click Done to exit the Interactive editor.

    Visual editor

    Use a legacy template
    1. Click Create.

    2. 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.
      • Templates added for you by Airship are listed under Custom Templates.
    3. 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 type under 512 KB.
      • Lines 1 and 2: These lines appear below the title. Enter text.
    4. Configure the Content tab fields for each page element. Elements are enabled by default. The ON/OFF toggle is in the upper right corner when configuring fields. You can click fields in the preview to configure them in the side menu or select directly from the side menu.

      Both custom and standard templates use the same field types, requirements, and configuration:

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

      The action that occurs when a user taps a button or image in the message. Select and configure an action.

      • Deep Link:

        Deep Link opens a screen in your app or website. Select a deep link from the list.

      • URL:

        A URL opens on top of the current page (in the same webkit view), not the mobile browser. Enter a URL.

      • Share:

        Share prompts the user to share your message with apps, social media accounts, and other services. Enter the text you want to accompany the share, including any promotional information, shortened links, hashtags, etc.

      You can also add or remove a tag when your audience taps the button or image.

      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.
       Note

      Tags will not appear in the type-ahead tag search until you send the message and the tag appears on at least one device. These tags are preserved in your draft but will not yet be visible to other aspects of the tag system, e.g., the Segment Builder.

       Important

      Images have the link action enabled by default. This makes the image perform as a button. If you don’t want the image to be clickable, disable the link action.

       Warning

      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.

      Onload

      Add or remove tags when the rich page loads. This tags every user who opens the rich page, whether they’ve reached it through a push, a badge, or by chance. Configure the tag action:

      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.
       Note

      Tags will not appear in the type-ahead tag search until you send the message and the tag appears on at least one device. These tags are preserved in your draft but will not yet be visible to other aspects of the tag system, e.g., the Segment Builder.

      Text Displayed in a headline, message body, button label, etc. Enter text.
      Video Displayed in the body of the message. Enter the URL for the video source.

    5. Configure expiration and 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. on the Options tab.

      • Remove from Message Center: By default, messages 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 Keys: Enter the key and value. Click   for additional keys.
    6. 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.
      • The Message Center tab requires a title.
    Upload HTML
    1. Click Create.

    2. Under Standard Templates click Select for Upload.

    3. 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.
    4. Upload your HTML file on the Content tab.

    5. Configure expiration and 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. on the Options tab.

      • Remove from Message Center: By default, messages 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 Keys: Enter the key and value. Click   for additional keys.
    6. Click Save & Exit.

      • You cannot save until your page meets minimum configuration requirements.
      • Requirements are listed above Save & Exit.
      • The Message Center tab requires a title.

Set Message Center 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. See the steps for Visual editor in Create a Message Center message.

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 Message Center 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 the steps for Visual editor in Create a Message Center message.

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 Message Center 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. See the steps for Visual editor in Create a Message Center message.

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 Message Center 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 the steps for Visual editor in Create a Message Center message.

For Message Center messages created with the Interactive 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.