Inline In-App Messages
This guide refers to displaying fully customizable In-App Messages within the mobile app content
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.
- 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 show the in-app message in your app, prepare placeholders:
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.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):
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");
To display Inline In-Apps in your React-Native app:
- 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}}
/>
...
);
}
Last modified 2yr ago