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");

React Native

To display Inline In-Apps in your React-Native app:

1. Install Pushwoosh plugin: https://docs.pushwoosh.com/platform-docs/pushwoosh-sdk/cross-platform-frameworks/react-native/integrating-react-native-plugin

2. Import the InlineInApp component (available starting plugin version 5.20.0):

import InlineInAppView from './node_modules/pushwoosh-react-native-plugin/InlineInApp.js'

3. Then, use it as follows:

render() {  
    return (      
    ...      
        <InlineInAppView         
          identifier = {'top_banner'}         
          onLoaded = {e => {          
              console.log('inline in-app loaded: ' + e.identifier);        
          }}        
          onClosed = {e => {          
              console.log('inline in-app closed: ' + e.identifier);        
          }}        
          onSizeChanged = {e => {          
              console.log('inline in-app size changed: ' + e.width + ',' + e.height);        
          }}        
          style = {{height: 100}}      
        />      
    ...  
    );
}