Inline In-App Messages

This guide refers to displaying fully customizable In-App Messages within the mobile app content

Overview

Regular In-App Messages are displayed in the app’s web view, in the full-screen mode. When the in-app message is shown, it hides all the app content until the user closes the web view and returns to the app. To make user flow convenient and smooth, you can display Inline In-App Messages right within the app content. These are top and bottom banners anchored to the screen borders and inline in-apps fixed with some pieces of content on the app page.

Inline In-App Messages are an organic part of user experience allowing not to interrupt users with ads and behavior-triggered promos.

Integration

  1. Go to your Pushwoosh Control Panel and create an event with the following properties: Event name: inlineInApp, Attribute name: identifier, Attribute type: string.

Please note that event properties must be exactly the same as mentioned above.

To learn more about Events, please refer to our guide.

Create an In-App Message triggered by this event:

To show the in-app message in your app, prepare placeholders:

iOS

To implement Inline In-Apps in iOS SDK, use PWInlineInAppView instance with the identifier property.

Value of the identifier property must be equal to the identifier attribute value of the in-app message you created on step 2.

Add PWInlineInAppView instances to the places in your app where you’re going to display the in-app message. Set the identifier property for every PWInlineInAppView instance. You can do it both from code or using Attributes Inspector of Interface Builder.

If PWInlineInAppView does not have height constraint, the placeholder will be automatically collapsed until the Rich Media is loaded. After the successful load, the Rich Media is expanded.

Usage examples

With UITableView

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row == 15) {
InAppTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"InAppTableViewCell" forIndexPath:indexPath];
cell.inAppView.identifier = @"ad_banner";
return cell;
} else {
return [tableView dequeueReusableCellWithIdentifier:@"CommonTableViewCell" forIndexPath:indexPath];
}
}

With UIScrollView

Add PWInlineInAppView to the UIScrollView:

Set the identifier value in PWInlineInAppView Attributes Inspector as follows:

Set Autolayout constraints (in this example, height constraint is not set):

As a Top Banner

Set the identifier value in PWInlineInAppView Attributes Inspector as follows:

Set Autolayout constraints (in this example, height and bottom constraints are not set):

Android

To display Inline In-Apps in your Android app, add a Pushwoosh custom element com.pushwoosh.inapp.view.inline.InlineInAppView to your project's XML, and set the identifier as follows:

<com.pushwoosh.inapp.view.inline.InlineInAppView
xmlns:pushwoosh="http://schemas.android.com/apk/res-auto"
android:id="@+id/inlineInApp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
pushwoosh:identifier="banner_id_1" />

If InlineInAppView was created from code, add the identifier by setter:

InlineInAppView inlineInAppView = new InlineInAppView(context);
inlineInAppView.setIdentifier("banner_id_1");