Inline In-App Messages

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
1
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
2
    if (indexPath.row == 15) {
3
        InAppTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"InAppTableViewCell" forIndexPath:indexPath];
4
        cell.inAppView.identifier = @"ad_banner";
5
        return cell;
6
    } else {
7
        return [tableView dequeueReusableCellWithIdentifier:@"CommonTableViewCell" forIndexPath:indexPath];
8
    }
9
}
Copied!
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:
1
<com.pushwoosh.inapp.view.inline.InlineInAppView
2
    xmlns:pushwoosh="http://schemas.android.com/apk/res-auto"
3
    android:id="@+id/inlineInApp"
4
    android:layout_width="match_parent"
5
    android:layout_height="wrap_content"
6
    pushwoosh:identifier="banner_id_1" />
Copied!
If InlineInAppView was created from code, add the identifier by setter:
1
InlineInAppView inlineInAppView = new InlineInAppView(context);
2
inlineInAppView.setIdentifier("banner_id_1");
Copied!
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):
1
import InlineInAppView from './node_modules/pushwoosh-react-native-plugin/InlineInApp.js'
Copied!
3. Then, use it as follows:
1
render() {  
2
    return (      
3
    ...      
4
        <InlineInAppView         
5
          identifier = {'top_banner'}         
6
          onLoaded = {e => {          
7
              console.log('inline in-app loaded: ' + e.identifier);        
8
          }}        
9
          onClosed = {e => {          
10
              console.log('inline in-app closed: ' + e.identifier);        
11
          }}        
12
          onSizeChanged = {e => {          
13
              console.log('inline in-app size changed: ' + e.width + ',' + e.height);        
14
          }}        
15
          style = {{height: 100}}      
16
        />      
17
    ...  
18
    );
19
}
Copied!

Customizing In-App Business Solutions

Net Promoter Score In-App Message

Last modified 7mo ago

Copy link

Contents