Create Rich Pages

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

When you create a rich page, you can either select a template and edit the message content, or upload your own HTML. Landing pages and Message Center messages can be visually identical, but there are a few differences. See the Rich Page Reference for detail.

 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 Message Center Message

You can create a 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:

    • Add the message to the Message Center inbox only.
      1. Select Message Center and click Add Content.
      2. Click Create.
      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. Click Create 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. Select the Interactive Editor to use or create a new message or take advantage of Airship’s templates with personalization features. Select the Visual Editor if you have legacy message center templates.

     Note

    When you use the Interactive Editor, you can set an independent expiration for your Message Center message. This may be helpful if your Message Center message represents a coupon, sale, or specific event and needs to expire on a specific date.

  3. Click Add New to create a new message, or Select Template to select an existing message center template. The rest of this tutorial explains how to create a new message.

    If you Select Template:

    1. Select the template that you want to use.
    2. Click Continue with selected template.
    3. Finish composing your message.
  4. Click add   to add a Title. Enter your title and click Done.

  5. Click add   to add your message’s HTML Body.

  6. Add your HTML message. You can upload your own HTML or create a message using our WYSWYG editor.

    • Click Paste HTML or Upload HTML File to use your own HTML.
      1. Paste or upload your HTML.
      2. (Optional) 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.
      3. Click Done.
    • Select a Blank Template to create a new message. The WYSIWYG editor supports merge fields, so you can personalize your message for your audience.
      1. Select a default layout, or select Blank Template to design your own layout.

      2. (Optional) Style the message Body — the width, font, and background color — of your message.

      3. Click and drag Content or Block elements into your template. Click elements in your template to style them. See the WYSIWYG Editor Reference for details. Click   to duplicate an element or   to delete it.

        • Blocks: Blocks are single- or multi-column rows, synonymous with content columns. You might use blocks to organize the message layout before inserting content elements.
        • Content: Add columns, buttons, dividers, HTML, images, and text to a row in the layout.
      4. Style the elements in your message, then click Done.

       Tip

      When you add a Button to your message, you can set message actions based on the button.

  7. Click Delivery in the header to move on.

Message Actions in the Interactive Editor

When creating a message center message or template, the button content pane also includes message actions. Pick an action to determine what happens when a user taps or clicks the button.

You can use 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. to personalize message center actions.

Adaptive Link

Adaptive Link opens a mobile wallet pass. Select an Adaptive LinkA mobile wallet pass link that supports templates for both Google Pay and Apple Wallet. When a user taps the link, Airship determines the user’s platform and generates the right pass for the user. from the list.

  • Adaptive links must be configured before they will appear in the actions list. See: Adaptive Links Tutorial.
  • Only adaptive links created in the dashboard will appear in the actions list.
Deep Link

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

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.
Web Page Web Page opens a web page or any valid-device level URL such as App Store or app protocol links. The web page opens in the device’s default browser. Enter a URL.
App Rating Open the system prompt for an App rating.

Click Set a Tag to add or remove tags to your audience when they use the button.

Add Message Center Preview Lines

Message Center messages support a preview. In our legacy editor, these were supported by the Line 1 and Line 2 fields. Now you can add these lines as Custom Keys when preparing to send your message.

 Note

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

In the Delivery step, before sending your message, use Custom Keys under Message Center options to add your two lines of preview text.

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

Create a Landing Page

You can create a landing page in the Content step of the Message, Automation, Journey, and A/B Test composers. This tutorial only covers the Content creation step. See the tutorials below for information about selecting an audience and scheduling your message.

On the Content step, when creating a Push Notification or In-App Message:

  1. Select the Landing Page action.

  2. Select the Interactive Editor to use or create a new landing page or take advantage of Airship’s templates. Do not use the Visual Editor unless you have templates that you (or Airship created for you) in our legacy editor.

  3. Click Add content to create a new landing page, or Select Template to select an existing template. The rest of this tutorial explains how to create a new message.

    If you Select Template:

    1. Select the template that you want to use.
    2. Click Continue with selected template.
    3. Finish composing your message.
     Note

    The template selector shows all templates with the Message Center type. You may want to name your landing page and message center templates to differentiate between the two.

  4. Click Edit and click Add   to add your landing page body content.

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

    2. (Optional) Style the message Body — the width, font, and background color — of your message.

    3. Click and drag Content or Block elements into your template. Click elements in your template to style them. See the WYSIWYG Editor Reference for details. Click   to duplicate an element or   to delete it.

      • Blocks: Blocks are single- or multi-column rows, synonymous with content columns. You might use blocks to organize the message layout before inserting content elements.
      • Content: Add columns, buttons, dividers, HTML, images, and text to a row in the layout.
    4. Style the elements in your message, then click Done.

  5. Finish creating your message.

Use the Visual Editor for Legacy Templates

If you have templates that predate our Interactive editor, you can still use the Visual Editor option to set up or edit your message center message.

  1. Choose how you want to present the message:

    • Add the message to the Message Center inbox only.
      1. Select Message Center and click Add Content.
      2. Click Create.
      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. Click Create 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. Click Select for the template you want to use, or upload your own HTML.
    • Templates: Click Preview for a template in the side menu 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.
    • Upload: Under Standard Templates click Select for Upload. Then click Upload and select your HTML file.

     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.

  3. Go to the Message Center tab to configure the preview that appears in the Message Center inbox.
    • Message Center Title is required.
    • Thumbnail image must be a .jpg, .gif or .png file type under 512 KB.
    • Lines 1 and 2 for text that appears below the title.
  4. Configure the fields for each page element on the Content tab. Skip this step if you uploaded your own HTML.
    • You can click fields in the preview to configure them in the side menu, or select directly from the side menu.
    • Elements are enabled by default. The ON/OFF toggle is in the upper right corner when configuring fields.
    • See Template Fields on this page for use and configuration information.
  5. Configure expiration and custom keys 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 disappear from users’ Message Centers.
    • 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.
  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.
    • Message Center tab requires a title.

You can now complete the remaining steps in the composer.

Rich Page Template Fields

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.

Use the Visual Editor for Legacy Landing Pages

If you have landing page templates that predate our Interactive editor, or you need image and video features not yet supported by the Interactive editor, you can still use the Visual Editor option to set up or edit your message center message.

You can create a landing page in the Content step of the Message, Automation, Journey, and A/B Test composers. See the composer tutorials for more information about sending a message:

On the Content step of your message:

  1. Select Push Notification and/or In-App Message and click Add Content.
  2. Select Landing page in the Actions section, then click Create.
  3. Click Select for the template you want to use, or upload your own HTML.
    • Templates: Click Preview for a template in the side menu 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.
    • Upload: Under Standard Templates click Select for Upload, then click Upload and select your HTML file.

     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.

  4. Configure the fields for each page element. Skip this step if you uploaded your own HTML.
    • You can click fields in the preview to configure them in the side menu, or select directly from the side menu.
    • Elements are enabled by default. The ON/OFF toggle is in the upper right corner when configuring fields.
    • See Template Fields on this page for configuration information.
  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.

You can now complete the remaining steps in the composer.