# App channel content

Learn about App channel message types and how to configure their content.

<!-- PAGE: Push notification content, PATH: https://www.airship.com/docs/guides/messaging/messages/content/app/push-notifications/ -->

# Push notification content

> Send push notifications to your App channel.
See also the [Push notifications](https://www.airship.com/docs/guides/features/messaging/push-notifications/) feature guide.

## Creating content

<p>When creating messages, you configure its appearance in the Content step. In the Delivery step, you can configure content-related features that do not affect the appearance of the message.</p>

**Silent push notifications** do not have visual content. In the *Content* step, click **Silent Push Notification**, then click *Delivery* in the header and complete the remaining steps in the composer.

The remainder of this section applies to regular push notifications.

---

In the *Content* step, click **Push Notification** then **Add content**:
   ![Selecting Push Notification in the Content step](https://www.airship.com/docs/images/content-push_hu_8ed94982804cda87.webp)
   
   *Selecting Push Notification in the Content step*

Now you can configure the body of the message:
   ![Configuring push notification content](https://www.airship.com/docs/images/composer-content-app_hu_28a88387be2dfd33.webp)
   
   *Configuring push notification content*

1. <p>Enter the message text. If you are using [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars), you can test how the content will appear. See <a href="https://www.airship.com/docs/guides/personalization/previewing/">Previewing personalized content</a>.</p>

1. Select an [Action](https://www.airship.com/docs/reference/glossary/#action):
   * Home
   * Message Center
   * Landing Page
   * Deep Link
   * Adaptive Link
   * Web Page
   * Share

1. (Optional) Set and/or remove tags when the user interacts with your message.

   <ol>
   <li>Click <strong>Configure options</strong>.</li>
   <li>Select <em>Add tag</em> or <em>Remove tag</em>, then search for tags that exist in the system, or create a new tag.</li>
   <li>(Optional) Click <strong>Configure another option</strong> and repeat the previous step.</li>
   </ol>
   > **Tip:** Setting one or more tags when a user interacts with a message can help you track user interactions for follow-on retargeting campaigns. For example, if you set a tag `responded-campaign1`, you can target users bearing the `responded-campaign1` tag with another message at a later date, knowing that they are active users. Alternatively, you can re-engage users with this tag using an automated message if they are inactive for a period of time.

1. (Optional)(iOS SDK 20+) (Android SDK 20+) Emit a custom event when the user interacts with your message. You can select an existing event or name a new one.

   <p>You can also assign an event value and specify string, number, or boolean property values that you can use later when filtering Custom Events. If you want to use properties, you must define the event and its properties in your project in advance. See <a href="https://www.airship.com/docs/guides/audience/events/manage/">Manage Events</a>.</p>
   <ol>
   <li>Select <strong>Configure options</strong>.</li>
   <li>Under <strong>Options</strong>, select <strong>Emit custom event</strong> and search for an event. If no result is found, select <strong>Use &lt;event name&gt;</strong> to add the event to your project.</li>
   <li>(Optional) Set an event value and/or specify property values to filter by in segments and triggers:
   <ol>
   <li>Select <strong>Add event properties</strong>, then:
   <ul>
   <li>For a value, select <strong>Add event value</strong> and enter a numeric value for the event.</li>
   <li>For properties, select <strong>Add property</strong>, then <strong>Search for properties</strong>, and then search for a string, number, or boolean event property and enter or select a value.</li>
   </ul>
   </li>
   <li>Select <strong>Save</strong>.</li>
   </ol>
   </li>
   </ol>

1. Configure optional features:

   * [Buttons](https://www.airship.com/docs/guides/messaging/messages/buttons/#add-buttons-to-message-content)
   * [Media](#media)
   * [Summary](#summary)
   * [Title](#title)

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

### Media

<p>Enter a URL to add media to your notifications. See also <a href="https://www.airship.com/docs/reference/messages/media-guidelines/">Media guidelines</a>.</p>
<p>If using a <a href="https://www.airship.com/docs/guides/personalization/content/personalize-actions/#personalize-media-urls">personalized media URL</a> for an App push notification, you must specify the media type after entering the URL:</p>
![Specifying the media type for a personalized media URL](https://www.airship.com/docs/images/app-media_hu_13eb6dceaa95791a.webp)

*Specifying the media type for a personalized media URL*

> **Note:** When you enable both the iOS platform and one or more of Android and Fire OS, and you do not enter a static image in the initial URL field, a Static Image field is added to the media settings. Enter a URL, or use the Upload option.


<p>If your Airship plan includes CDN support, you can also upload media or select from previous uploads in your project&rsquo;s media library. See <a href="https://www.airship.com/docs/guides/messaging/features/media/#insert-media-in-message-content">Insert media in message content</a> in <em>Media library</em>.</p>

### Summary

Add a summary line as supplemental text displayed with the notification.

* **iOS:** The summary appears below the push notification title.
* **Android and Fire OS:** The summary appears below the main notification text
   in most cases. This is the only visible text other than the title when Android
   Picture is visible in expanded mode, as the main notification text is
   suppressed.

### Title

Enter a title to create a heading that appears above the notification text in:

* iOS Notification Center
* Apple Watch Looks
* Android and Fire OS Notification Area/Drawer


<!-- /PAGE: Push notification content -->

<!-- PAGE: In-app message content, PATH: https://www.airship.com/docs/guides/messaging/messages/content/app/in-app-messages/ -->

# In-app message content

> Send in-app messages to your App channel.
See also the [In-app messages](https://www.airship.com/docs/guides/features/messaging/in-app-messages/) feature guide.

## Setting design defaults

You can set the default colors, message position, and duration of your in-app messages:

1. Next to your project name, select the dropdown menu (▼), then **Settings**.
1. Under **App settings**, select **In-App Message Design**.
1. Configure the message design. Colors are hexadecimal color values.
   * **Primary Color** is the color of the button text and message background.
   * **Secondary Color** is the color of the message text, button background, and certain UI elements, e.g., the drawer pull on iOS.
   * **In-App Message Position** controls whether the in-app message displays at the top or bottom of the screen.
   * **In-App Message Duration** is the amount of time that the in-app message displays on the screen. The default is 15 seconds. Otherwise, select *Specify*, enter a numerical value, and select *Seconds* or *Minutes*.
1. Select **Save**.

Additional customization may be made via the SDK. See the [SDK integrations documentation](https://www.airship.com/docs/developer/sdk-integration/).

## Creating content

<p>When creating messages, you configure its appearance in the Content step. In the Delivery step, you can configure content-related features that do not affect the appearance of the message.</p>

In the *Content* step, click **In-App Message** then **Add content**:
   ![Selecting In-App Message in the Content step](https://www.airship.com/docs/images/content-push_hu_8ed94982804cda87.webp)
   
   *Selecting In-App Message in the Content step*

Now you can configure the body of the message:
   ![Configuring in-app message content](https://www.airship.com/docs/images/composer-content-in-app-message_hu_6792f5ba38d59067.webp)
   
   *Configuring in-app message content*

1. <p>Enter the message text. If you are using [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars), you can test how the content will appear. See <a href="https://www.airship.com/docs/guides/personalization/previewing/">Previewing personalized content</a>.</p>

1. Select an [Action](https://www.airship.com/docs/reference/glossary/#action):
   * Home
   * Message Center
   * Landing Page
   * Deep Link
   * Adaptive Link
   * Web Page
   * Share

1. (Optional) Set and/or remove tags when the user interacts with your message.

   <ol>
   <li>Click <strong>Configure options</strong>.</li>
   <li>Select <em>Add tag</em> or <em>Remove tag</em>, then search for tags that exist in the system, or create a new tag.</li>
   <li>(Optional) Click <strong>Configure another option</strong> and repeat the previous step.</li>
   </ol>
   > **Tip:** Setting one or more tags when a user interacts with a message can help you track user interactions for follow-on retargeting campaigns. For example, if you set a tag `responded-campaign1`, you can target users bearing the `responded-campaign1` tag with another message at a later date, knowing that they are active users. Alternatively, you can re-engage users with this tag using an automated message if they are inactive for a period of time.

1. (Optional)(iOS SDK 20+) (Android SDK 20+) Emit a custom event when the user interacts with your message. You can select an existing event or name a new one.

   <p>You can also assign an event value and specify string, number, or boolean property values that you can use later when filtering Custom Events. If you want to use properties, you must define the event and its properties in your project in advance. See <a href="https://www.airship.com/docs/guides/audience/events/manage/">Manage Events</a>.</p>
   <ol>
   <li>Select <strong>Configure options</strong>.</li>
   <li>Under <strong>Options</strong>, select <strong>Emit custom event</strong> and search for an event. If no result is found, select <strong>Use &lt;event name&gt;</strong> to add the event to your project.</li>
   <li>(Optional) Set an event value and/or specify property values to filter by in segments and triggers:
   <ol>
   <li>Select <strong>Add event properties</strong>, then:
   <ul>
   <li>For a value, select <strong>Add event value</strong> and enter a numeric value for the event.</li>
   <li>For properties, select <strong>Add property</strong>, then <strong>Search for properties</strong>, and then search for a string, number, or boolean event property and enter or select a value.</li>
   </ul>
   </li>
   <li>Select <strong>Save</strong>.</li>
   </ol>
   </li>
   </ol>

1. (Optional) [Add buttons](https://www.airship.com/docs/guides/messaging/messages/buttons/#add-buttons-to-message-content).

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

### Combining message types

When you combine a push notification and in-app message, the in-app message's alert text is the same as the push notification text by default. To use different messages, select *Write Alternative* for *In-App Message Text* and enter your text.

![Entering alternative text for an in-app message paired with a push notification](https://www.airship.com/docs/images/write-alternative_hu_3ba270cfce9c93b2.webp)

*Entering alternative text for an in-app message paired with a push notification*

When you combine an in-app message with Message Center, the Message Center [Action](https://www.airship.com/docs/reference/glossary/#action) is preselected.


<!-- /PAGE: In-app message content -->

<!-- PAGE: Message Center content, PATH: https://www.airship.com/docs/guides/messaging/messages/content/app/message-center/ -->

# Message Center content

> Create messages for your Message Center inbox.
See also the [Message Center](https://www.airship.com/docs/guides/features/messaging/message-center/) feature guide.

## Choosing an editor

The first step in adding content to a Message Center message is choosing an editor: Interactive or Visual. For information about each, see [Content editors](https://www.airship.com/docs/guides/messaging/editors/about/). See the sections below for access steps and links to configuration details: [Creating content: Interactive editor](#interactive-editor) or [Creating content: Visual editor](#visual-editor).

## Creating content: Interactive editor {#interactive-editor}

<p>When creating messages, you configure its appearance in the Content step. In the Delivery step, you can configure content-related features that do not affect the appearance of the message.</p>

In the *Content* step, click **Message Center** then **Add content**:
   ![Selecting Message Center in the Content step](https://www.airship.com/docs/images/content-push_hu_8ed94982804cda87.webp)
   
   *Selecting Message Center in the Content step*

Then click **Interactive editor » Add content » Edit**. Now you can configure the message content:
   ![Configuring Message Center content in the Interactive editor](https://www.airship.com/docs/images/content-mc_hu_2e6ddad08129dd58.webp)
   
   *Configuring Message Center content in the Interactive editor*

If your message includes [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars), you can preview how the content will appear. See [Previewing personalized content](https://www.airship.com/docs/guides/personalization/previewing/).

1. Add a *Title*.
   1. Click **Add +**.
   1. Enter a title.
   1. Click **Done**.

1. Add the *Message body*.
   1. Click **Add +**.
      <ul>
      <li>For <strong>HTML</strong>, select the paste or upload option and add your HTML.</li>
      <li>For <strong>drag-and-drop</strong>, select a default or <a href="https://www.airship.com/docs/guides/messaging/editors/interactive/saving-layouts/">saved layout</a>, or select <strong>Blank Layout</strong> to design your own. Then you can design your content. See <a href="https://www.airship.com/docs/guides/messaging/editors/interactive/styling-formatting/">Styling and formatting in the Interactive editor</a>. You can edit any layout after selecting.</li>
      </ul>
   1. Click **Done**.

1. Click **Done** to exit the editor.

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

### 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](https://www.airship.com/docs/guides/messaging/messages/content/app/message-center/#visual-editor).

For Message Center messages created with the *Interactive editor*, add the image while editing a layout:

<ol>
<li>
<p>Select <strong>Settings</strong> in the left sidebar.</p>
</li>
<li>
<p>Enter the HTTPS URL of an image. See <a href="https://www.airship.com/docs/reference/messages/media-guidelines/">Media guidelines</a>.</p>
<p>If your Airship plan includes CDN support, you can also upload media or select from previous uploads in your project&rsquo;s media library. See <a href="https://www.airship.com/docs/guides/messaging/features/media/#insert-media-in-message-content">Insert media in message content</a> in <em>Media library</em>.</p>
</li>
</ol>

## Creating content: Visual editor {#visual-editor}

<p>When creating messages, you configure its appearance in the Content step. In the Delivery step, you can configure content-related features that do not affect the appearance of the message.</p>

Do the following to add only a Message Center message:

1. In the Content step, select **Message Center**, then **Add content**.
1. Select **Visual editor**.
1. Under **Rich Page**, select **Create**.

Or you use the Visual editor in the Content step when configuring a push notification or in-app message:

1. Under **Actions**, select **Message Center**, then **Visual editor**.
1. Under **Rich Page**, select **Create**.

Now you can configure the message content. Follow the steps in [The Visual editor](https://www.airship.com/docs/guides/messaging/editors/visual/).

## Android app reinstallation

<p>Message Center inboxes are associated with channel IDs. On Android, reinstalling an app creates a new channel ID. Messages previously available in an Android user’s inbox will no longer be available after app reinstall.</p>

## Hosting and page size

<p>Content is hosted in a <a href="https://en.wikipedia.org/wiki/Content_delivery_network" target="_blank">CDN<span class="external-link-icon">&thinsp;<i class="ph ph-arrow-square-out"></i></span></a>, ensuring responsive load times for your users globally. Hosted content — including embedded CSS, images and JavaScript — is limited to 1.5 MB, 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 100 KB.</p>
<p>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. <a href="https://www.airship.com/contact-us/" target="_blank">Contact Airship Sales<span class="external-link-icon">&thinsp;<i class="ph ph-arrow-square-out"></i></span></a> for more information.</p>

## Welcome Message

You can create a default message that appears in every new user's Message Center inbox when they open your app for the first time:

1. Go to **Messages**, then **Welcome Message**.
1. Enter a message title.
1. Enter HTML for the message body.
1. Select **Save**.

After saving, you have the option to delete the message.


<!-- This is not yet true

### Set tags when users open a Message Center Message {#msg-tag}

You can insert scripts in custom HTML blocks into a message center message to take advantage of [Airship's JavaScript interface](https://www.airship.com/docs/reference/messages/custom-templates/).

<p>In addition to standard button actions, you can add a script to your message center message or template to set tags on your audience when they open your message.</p>
<p>Add a custom HTML block to the top of your message center template or message for scripts. While the block takes up space in the editor, users won&rsquo;t see a custom HTML block that only contains scripts in their message.</p>
<p>Use <code>add_tags_action</code> and <code>remove_tags_action</code> from the example below to add or remove tags from your audience when they open your message.</p>
<p>**Add or remove tags when users open your message:**

```html
<script type="text/javascript">
    function onLoad() {
        UAirship.runAction("add_tags_action", "tag-to-add", function() {})
        UAirship.runAction("remove_tags_action", "tag-to-remove", function() {})
    }
    // Check if the interface is fully loaded
    if(typeof UAirship === 'object' && UAirship.runAction) {
        onLoad()
    } else {
        document.addEventListener('ualibraryready', onLoad, false)
    }
</script>
```
</p>
-->

<!-- leftovers

Talk about the [Message Center Object](https://www.airship.com/docs/developer/rest-api/ua/schemas/push/#messageobject) and what you can do with it. Maybe provide an brief example but mostly get them
over to the API reference.


**Possible Example but needs to be better-formatted**:
```json
{
   "audience": "all",
   "notification": {
      "ios": {
         "badge": "+1"
      }
   },
   "message": {
      "title": "This week's offer",
      "body": "<html><body><h1>blah blah</h1> etc...</html>",
      "content_type": "text/html",
      "expiry": "2015-04-01T12:00:00",
      "extra": {
         "offer_id": "608f1f6c-8860-c617-a803-b187b491568e"
      },
      "icons": {
         "list_icon": "http://cdn.example.com/message.png"
      }
   }
}
```


Worth pointing out that the SDK does all of the heavy lifting for user management,
e.g., read/unread count, deletes, etc.
There is one available operation that deletes a message completely, from all
users' inboxes.

-->

## Remove a message from a Message Center

You can remove messages from the Message Center inbox from the dashboard.

> **Warning:** Removing a message from a Message Center is irreversible.


1. Go to **Messages**, then **Messages Overview**.
1. Select the report icon (
) for the message you want to remove.
1. Select **Remove from inbox** and confirm.

After removal, *Removed from inbox* and the removal date, time, and time zone appears in these locations:
   * [Messages Overview](https://www.airship.com/docs/reference/glossary/#messages_overview) — Message Details expanded view 
   * [Message report](https://www.airship.com/docs/guides/reports/message/) — Header

<!-- /PAGE: Message Center content -->

<!-- PAGE: Landing pages, PATH: https://www.airship.com/docs/guides/messaging/messages/content/app/landing-pages/ -->

# Landing pages

> Direct users to a landing page when they interact with your message.
See also the [Landing pages](https://www.airship.com/docs/guides/features/messaging/landing-pages/) feature guide.

## Choosing an editor

If your landing page content is hosted outside Airship, configure it using [Creating content: Custom URL](#creating-content-custom-url). You do not use the Interactive or Visual editors for that path.

When Airship hosts your landing page, choose an editor for creating content: Interactive or Visual. For information about each, see [Content editors](https://www.airship.com/docs/guides/messaging/editors/about/). See the sections below for access steps and links to configuration details: [Creating content: Interactive editor](#interactive-editor) or [Creating content: Visual editor](#visual-editor).

## Creating content: Custom URL

In the *Content* step for a push notification or in-app message, select *Landing Page* from the [Actions](https://www.airship.com/docs/reference/glossary/#action) menu, then click **Custom URL** and enter an HTTPS URL.

## Creating content: Interactive editor {#interactive-editor}

In the *Content* step for a push notification or in-app message, select *Landing Page* from the [Actions](https://www.airship.com/docs/reference/glossary/#action) menu, then click **Interactive editor » Add content » Edit**. Now you can configure the landing page:

![Configuring landing page content in the Interactive editor](https://www.airship.com/docs/images/content-lp_hu_afa917ef03e44649.webp)

*Configuring landing page content in the Interactive editor*

If your landing page includes [Handlebars](https://www.airship.com/docs/reference/glossary/#handlebars), you can preview how the content will appear. See [Previewing personalized content](https://www.airship.com/docs/guides/personalization/previewing/).

1. Click **Add +**.
   <ul>
   <li>For <strong>HTML</strong>, select the paste or upload option and add your HTML.</li>
   <li>For <strong>drag-and-drop</strong>, select a default or <a href="https://www.airship.com/docs/guides/messaging/editors/interactive/saving-layouts/">saved layout</a>, or select <strong>Blank Layout</strong> to design your own. Then you can design your content. See <a href="https://www.airship.com/docs/guides/messaging/editors/interactive/styling-formatting/">Styling and formatting in the Interactive editor</a>. You can edit any layout after selecting.</li>
   </ul>
1. Click **Done**.
1. Click **Done** to exit the editor.

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

## Creating content: Visual editor {#visual-editor}

You can access the Visual editor in the Content step when configuring a push notification or in-app message:

1. Under **Actions**, select **Landing page**, then **Visual editor**.
1. Under **Rich Page**, select **Create**.

Now you can configure the landing page. Follow the steps in [The Visual editor](https://www.airship.com/docs/guides/messaging/editors/visual/).

## Hosting and page size

*This information applies to content created using Airship. However, we suggest following these guidelines for your self-hosted content as well.*

<p>Content is hosted in a <a href="https://en.wikipedia.org/wiki/Content_delivery_network" target="_blank">CDN<span class="external-link-icon">&thinsp;<i class="ph ph-arrow-square-out"></i></span></a>, ensuring responsive load times for your users globally. Hosted content — including embedded CSS, images and JavaScript — is limited to 1.5 MB, 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 100 KB.</p>
<p>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. <a href="https://www.airship.com/contact-us/" target="_blank">Contact Airship Sales<span class="external-link-icon">&thinsp;<i class="ph ph-arrow-square-out"></i></span></a> for more information.</p>

## iOS developer notes

The default behavior in the iOS SDK is to *not display* the landing page when the corresponding push notification is received while the app is in the foreground state. The logic behind this behavior is that you may not wish to interrupt or distract a user who is currently occupied with the app, only to ask them to visit a different part of the app.

If you need to display a landing page while the app is in the foreground state, replace the registry predicate associated with that action with one that allows foreground execution.

In the Airship SDK, this relative state between *what the app is doing now* and *how the action was invoked* is known as a *situation*, or more properly, [ActionSituation](https://urbanairship.github.io/ios-library/v20/AirshipCore/documentation/airshipcore/actionsituation)
. Other examples of situations besides foreground state include background push and app launched from push notification.

See [ActionArguments](https://urbanairship.github.io/ios-library/v20/AirshipCore/documentation/airshipcore/actionarguments)
 for more detail on the methods involved with this display behavior.


<!-- /PAGE: Landing pages -->