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.
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:
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.InlineInAppViewxmlns: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:
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 (...<InlineInAppViewidentifier = {'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}}/>...);}