---
updatedAt: 2025-11-11T02:43:21.000Z
agentTools:
  projectIndex: https://docs.webengage.com/llms.txt
---

# In-app

Step-by-step guide to configuring In-app as a channel

*In-app Notifications* are sent by your app to engage active users with contextual messages. At WebEngage, as soon as you integrate your apps with your dashboard, you can start sending *In-app Messages.*

> 🚧 Please Ensure That Your Apps are Integrated with WebEngage Before Proceeding
>
> * [Android app](android-getting-started)
>
> * [iOS app](ios-getting-started)
>
> * [React Native apps](react-native)
>
> * [Flutter apps](flutter)
>
> * [Cordova/ PhoneGap/ Ionic apps](cordova)
>
> * [Xamarin.Android app](xamarin-android)
>
> * [Xamarin.iOS app](xamarin-ios)
>
> * [Unity.Android app](unityandroid)
>
> * [Unity.iOS app](unityios)
>
> * [Segment.com for Android & iOS](segment)
>
> * [GTM for Android & iOS](gtm)

## Step 1: Enable Channel in Dashboard

As shown below, head over to **Data Platform> Integrations > In-app Setup (Configure)** in your dashboard and click the toggle button to start sending *In-app Campaigns.*

<Image title="in-app-channel-enable.gif" alt={1425} src="https://files.readme.io/1da93d2-in-app-channel-enable.gif">
  Click to enlarge
</Image>

You can also choose to implement a few additional configurations to:

* Show the *In-app Notifications* in specific sections of your app. *([How it works](in-app#section-step-2-set-up-in-app-message-targeting))*
* Customize the font style of your message and CTAs as per your brand guidelines. *([How it works](in-app#section-step-3-upload-brand-fonts))*

## Step 2: Set up In-app Message Targeting

By default, all *In-app Notifications* are shown as soon as a user launches their app or performs a specific *[Event](https://knowledgebase.webengage.com/docs/events-and-event-attributes#section-what-is-an-event-)* while interacting with your app. You can choose to specify exactly where the In-app message must be shown by:

* [Tagging app screens with a *Screen Name*](in-app#section-tagging-app-screens-with-screen-name)
* [Tracking app-user interactions through *Screen Data Attributes*](in-app#section-tracking-screen-data) to display the message in the context of their actions.

<Image title="In-app-Message-Targeting.png" alt={4568} src="https://files.readme.io/0f4d047-In-app-Message-Targeting.png">
  How In-app Message Targeting Works
</Image>

### Tagging App Screens with Screen Name

Just like a website has several web pages associated with it, an app can lead users to several sections or ‘screens’ that facilitate varied user-app interactions.

For example, users of an e-commerce app will see the homepage or home screen on launching the app. The home screen enables them to search and navigate to various sections like *a curated collection, product category, personal Wishlist/ Cart, profile, order tracking section and so on.*

Thus, using the *WebEngage SDK,* you can tag each screen with a *Screen Name.* Doing so enables you to pinpoint *Screens* in your app where you can render *In-app messages.*

For example, marketers of the e-commerce app can engage users with contextual *In-app Notifications* whenever they view their *Shopping Cart,* extending personalized offers on purchase. This can easily be done by adding the *Screen Name, cart* under the field, *[Where to Show at Step 2: When](https://knowledgebase.webengage.com/docs/creating-in-app-campaigns#section-2-specify-where-when-to-show)* while creating the campaign.

> 👍 Pro Tip
>
> Tag all app screens with a *Screen Name* to ensure that we are abe to track the exact screen a user is viewing, in real-time. Doing so helps ensure that the *In-app Notification* is shown on the correct screens (as specified while creating the campaign).

**Here’s a sample to help you get started:**

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>
        App Section
      </th>

      <th>
        Screen Name
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        Home Screen
      </td>

      <td>
        `home`
      </td>
    </tr>

    <tr>
      <td>
        Order History Screen
      </td>

      <td>
        `orders`
      </td>
    </tr>

    <tr>
      <td>
        Live Delivery Tracking Screen
      </td>

      <td>
        `del-tracking`
      </td>
    </tr>

    <tr>
      <td>
        Wishlist
      </td>

      <td>
        `wishlist`
      </td>
    </tr>

    <tr>
      <td>
        Shopping Cart
      </td>

      <td>
        `cart`
      </td>
    </tr>

    <tr>
      <td>
        Checkout Payment Screen
      </td>

      <td>
        `checkout-payment`
      </td>
    </tr>

    <tr>
      <td>
        Checkout Confirmation Screen
      </td>

      <td>
        `checkout-details`
      </td>
    </tr>

    <tr>
      <td>
        User’s Profile
      </td>

      <td>
        `profile`
      </td>
    </tr>

    <tr>
      <td>
        Loyalty Reward Points Screen
      </td>

      <td>
        `reward-points`
      </td>
    </tr>

    <tr>
      <td>
        Collection Listing Screen *(Spring/Summer Collection, Festive Collection, Formal Wear Collection etc.)*
      </td>

      <td>
        `name-collection`\
        *(replace name with the collection's actual name)*
      </td>
    </tr>
  </tbody>
</Table>

> 🚧 How to Tag App Screen with a ‘Screens Name’
>
> * [Android apps](https://docs.webengage.com/docs/android-in-app-messaging)
>
> * [iOS apps](https://docs.webengage.com/docs/ios-in-app-messaging)
>
> * [React Native apps](https://docs.webengage.com/docs/react-native-in-app-messaging)
>
> * [Cordova/ PhoneGap/ Ionic apps](https://docs.webengage.com/docs/cordova-in-app-messaging)
>
> * [Xamarin.Android apps](https://docs.webengage.com/docs/xamarin-android-in-app-messaging)
>
> * [Xamarin.iOS apps](https://docs.webengage.com/docs/xamarin-ios-in-app-messaging)
>
> * [Unity.Android apps](https://docs.webengage.com/docs/unity-android-in-app-messaging)
>
> * [Unity.iOS apps](https://docs.webengage.com/docs/unity-ios-in-app-messaging)

### Tracking Screen Data

Each *Screen* in your app can be associated with contextual *Screen Data* which could be anything like, *the product category a user is viewing, the number of products a user sees in a session, the search filters added by a user, the sort applied while browsing through an app screen* and so on.

Thus, tracking app-user interactions as *Screen Data Attributes* enables you to engage only those users who interact with your app in a specific manner, no matter which *Screen* they're on.

For example, marketers of an e-commerce app can specifically engage users who view more than 50 products in any section of their app, highlighting the most popular styles of the season. This can be done by adding the *Screen Data Attribute, prod-count* greater than *50*\
under the field, *[Where to Show at Step 2: When](https://knowledgebase.webengage.com/docs/creating-in-app-campaigns#section-2-specify-where-when-to-show).*

**Here’s a sample to help you get started:**

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        App Screens
      </th>

      <th>
        Screen Data Attribute
      </th>

      <th>
        What it Tracks
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        Product Category Listing,
        Collection Listing, Brand Listing, Sale Listing
      </td>

      <td>
        `prod-count`
      </td>

      <td>
        No. of products that a user has viewed on the screen or scrolled through
      </td>
    </tr>

    <tr>
      <td>
        Home screen, Collection Listing, Brand Listing, Sale Listing
      </td>

      <td>
        `prod-category`
      </td>

      <td>
        Name of the product category selected/ searched by a user
      </td>
    </tr>

    <tr>
      <td>
        Product Category Listing,\
        Collection Listing, Brand Listing, Sale Listing
      </td>

      <td>
        `sort-applied`
      </td>

      <td>
        The option selected to sort the products listed in any section of your app like *Price (descending/ ascending), Gender (Female/ Male/ Unisex), Color (Black/ Blue/ Orange)* and so on.
      </td>
    </tr>
  </tbody>
</Table>

> 🚧 How to Track 'Screen Data' for your App
>
> * [Android apps](https://docs.webengage.com/docs/android-in-app-messaging)
>
> * [iOS apps](https://docs.webengage.com/docs/ios-in-app-messaging)
>
> * [React Native apps](https://docs.webengage.com/docs/react-native-in-app-messaging)
>
> * [Cordova/ PhoneGap/ Ionic apps](https://docs.webengage.com/docs/cordova-in-app-messaging)
>
> * [Xamarin.Android apps](https://docs.webengage.com/docs/xamarin-android-in-app-messaging)
>
> * [Xamarin.iOS apps](https://docs.webengage.com/docs/xamarin-ios-in-app-messaging)
>
> * [Unity.Android apps](https://docs.webengage.com/docs/unity-android-in-app-messaging)
>
> * [Unity.iOS apps](https://docs.webengage.com/docs/unity-ios-in-app-messaging)

## Step 3: Upload Brand Fonts

You can easily upload all your brand fonts to your dashboard to ensure that your *In-app Messages* convey the same look and feel as your app. Here’s how you can go about it:

<Image title="in-app-custom-font-upload.gif" alt={1425} src="https://files.readme.io/91b71d9-in-app-custom-font-upload.gif">
  Click to enlarge
</Image>

**Step 1:** As shown above, go to the *Data Platform> Integrations > In-app Setup (Configure)* in your dashboard.

**Step 2:** Click on the *Upload Custom Font button / Plus Icon* (placed on top left) to add a font file. Please ensure that:

* The file size does not exceed 1MB.
* The file is in .ttf / .otf / .woff / .woff2 format.

Once added, you will be able to select separate fonts for the *In-app Notification’s Message* and *Button Label (CTA)* through the [*Themes section* nested under *Step 2: Message*](https://knowledgebase.webengage.com/docs/creating-in-app-campaigns#section-configuring-text-fonts) while creating the campaign.

## Creating Custom HTML Templates

*(Applicable only to* Classic Modal *and*Full Screen Modal\* Layouts)

> 📘 Please Note
>
> * This is an access controlled feature. Kindly contact your CSM or reach out to <support@webengage.com> to get this feature enabled.
>
> * Recommended Android core SDK v3.20.5 and iOS core SDK v5.2.11

![2878](https://files.readme.io/f687ccf-Screenshot_2022-08-11_at_8.58.47_PM.png "Screenshot 2022-08-11 at 8.58.47 PM.png")

To create a campaign with custom template:

* Create a in-app notification campaign
* On Message tab, Select the layout type as *Classic* or *Full screen*
* Select the Template as 'Custom HTML'  and add the content body in Raw HTML format.

> 👍 Congratulations!
>
> You're now ready to engage users with *In-app Notifications.*

Please feel free to drop in a few lines at *<support@webengage.com>* in case you have any queries or feedback. We're always just an email away!