In-apps Gallery

What format should I choose, when should I trigger the message to maximize the impact? In this page we refer to examples taken from the direct experience of WonderPush customers. You can easily take inspiration from them and adapt them to your own business. If you get new ideas, don't hesitate to submit them to us, we will include them in this gallery.

#1. Onboard new users with a 4-step card

Industries: medias - ecommerce - games
Platforms: iOS - Android - Websites

A user is visiting your website or app for the first time. After 10 seconds, make sure they are not missing out on your flagship feature and give them a good reason to stay.

Click "Create In-app" button
and start configuring First step

First step
============
Select "Card"

Create your message and upload your image

Primary button:
- Button text: Fill "See How it Works" 
- Action: Select "track event" and fill the name "Display-second-step"

Audience: Select your segment

Scheduling: 
-Trigger: Select the trigger of your choice to launch the sequence. For example "App Open". And fill a second trigger "Display-first-step"
-Delay in seconds: Fill 10 seconds (the delay between the event and the in-app display)

Save and create a Second in-app

Second step
============

Duplicate First step in-app

Create your second message and upload your image

Primary button:
- Button text: Fill "Next" 
- Action: Select "track event" and fill the name "Display-third-step"

Secondary button:
- Button text: Fill "Previous" 
- Action: Select "track event" and fill the name "Display-first-step"

Audience: Select all

Scheduling:
-Trigger: Select only the trigger "Display-second-step"

Save and create a Third in-app

Third step
============

Duplicate Second Step in-app

Create your third message and upload your image

Primary button:
- Button text: Fill "Next" 
- Action: Select "track event" and fill the name "Display-final-step"

Secondary button:
- Button text: Fill "Previous" 
- Action: Select "track event" and fill the name "Display-second-step"

Audience: Select all

Scheduling: 
-Trigger: Select only the trigger "Display-third-step"

Save and create a Final in-app

Final step
============

Duplicate Third Step in-app

Create your Final message and upload your image

Primary button:
- Button text: Fill "Try it Now" 
- Action: Select "Link" and fill the URI of the web page or app screen where the user should be redirected after the in-app

Secondary button:
- Button text: Fill "Previous" 
- Action: Select "track event" and fill the name "Display-third-step"

Audience: Select all

Scheduling: 
-Trigger: Select only the trigger "Display-final-step"

Save Final step in-app

Activate the four in-apps

#2. Increase push subscription rate

Industries: sports - medias - ecommerce - games
Platforms: Websites

Increase push subscription rate by prompting users to subscribe to push at the right moment in the customer lifecycle.
Has the user read several articles about soccer? Display an in-app that promotes subscribing to new soccer-related content and increase your push notification subscription rate.

Click "Create In-app" button
and start Setup

Setup
============
Select "Modal"

Create your message and upload your image

Button:
- Button text: Fill "Activate Web Push" 
- Action: Select "Subscribe to push"

Audience: 
Audience matching all of these criteria:
.Push token is not subscribed
.Push token is supported
.Device platform is one of « Web »
.Segment is "Football readers"

Scheduling: 
-Trigger: Select the trigger of your choice to launch the in-app. For example "App foreground & Page view". 
-Delay in seconds: Fill 5 seconds (the delay between the event and the in-app display)

Save and Activate

Discover variants:

#3. Catch them up on Exit page

Industries: ecommerce
Platforms: Websites

A new user has just landed on a product page on your site. Before they leave, show them an Exit intent in-app advertising with a discount to increase the chances of a purchase.

Click "Create In-app" button
and start Setup

Setup
============
Select "Image"

Upload your image

Action:
-Select "Link" and fill the URI of the destination

Animations:
-Entry: Slide from Top
-Exit: Fade out

Audience: 
Audience matching all of these criteria:
.Device platform is one of « Web »
.Segment is not "have made a purchase"

Scheduling: 
-Trigger: Exit Page. 
-Delay in seconds: 0

Save and Activate

Discover variants:

#4. Upsell and cross sell more effectively at key moments

Industries: games
Platforms: iOS - Android - Websites

Upselling is getting a customer to purchase more of an item they are already buying while cross selling is convincing them to purchase complimentary items.
Use an in-app to display power-ups available for purchase at the end of a particular level of your game.

Discover variants:

#5. Ask happy users to rate your app

Industries: All
Platforms: iOS - Android

Use in-app targeting to display your rating prompts at the right moment to satisfied users only.

#6. Convert web visitors to app downloads

Industries: All
Platforms: Web

Leverage your website to drive more users to your application.

#7. Cross-promote your applications

Industries: All
Platforms: iOS

Encourage users of one of your apps to download another of your apps.

Discover variants:

#8. Invite your users to join you on Instagram (or others social networks)

Industries: All
Platforms: Web

How to get more followers on Instagram? Just trigger an in-app that explain to your
loyal users the benefits to join your community on social networks.

#9. Go further: customize your in-apps with CSS

Industries: All
Platforms: Web

Whether for mobile or the web, you have complete freedom to customize the look and feel of your in-apps if the formats offered via the dashboard are not enough for you. Below we define an initial in-app for the web and give you some variations obtained by adding a few CSS classes.
So, let's take the #8 in-app (Invite your users to join you on Instagram (or others social networks)
and create various displays with css.

Change: Placement in the page

<style>
.wpiam-message#wpiam-message .wpiam-card.wpiam-landscape {
  position: fixed;
  right: 20px;
  top: 20px;
}
</style>