Design popular in-app formats in Pushwoosh In-App Editor

Create in-apps for your use case quickly and easily

Overview

Pushwoosh In-App Editor streamlines the process of creating in-app messages of any format and for any business goals. As you get the job done faster, you can run quick experiments and achieve desired results in a shorter time.

To create an in-app from scratch, you only need to design a message layout using drag-and-drop blocks and customize each element to suit your app style and business goals. You don't need coding or design experience to create engaging, high-converting in-apps — just a couple of tips on how to best use Pushwoosh In-App Editor.

Below, we will describe how to create:

Full-screen in-apps — most commonly, offerwalls and paywalls come in this form;
Part-screen in-apps — you may use them for opt-in and opt-out recovery requests, product promo, and features announcements.

Full-screen in-app message

Let’s create a promotional in-app message for a fitness industry as an example:

1. In your Pushwoosh account, go to Content → Rich Media and click Add template:

Enter a template name, select Create new template, and click Add template:

We'll create an in-app from scratch using a blank template in our example. You can also choose one of the default templates and modify it according to your needs.

2. First, set the desired popup size on the Popup tab:

3. Now, let’s add an image to our in-app message. Go to the Content tab and drag the image block onto the canvas. Click on the block and upload your file. You can also select a free stock photo right in the editor interface by clicking More Images → Stock Photos:

You can also experiment with AI image generation. To do this, click Generate Images in the Magic Image section and describe the image you want to create.

Image recommendations for full-screen in-apps (portrait orientation)

4. Set the background color of the in-app message: go to the Popup tab and select the desired color.

5. Now, you can add the text of your in-app message. In our example, we will place the text on top of the image. To do this, select the image and click Apply Effects. Click on the Text button, insert your content, and adjust its parameters:

6. Let’s also add some text below the image. Go to the Content tab and drag the text block onto the canvas. Insert your text and customize its parameters if necessary.

Let AI improve the quality of your text: select the text block and click on the Smart Text button.

7. Finally, add the button and set up its color, size, and other parameters:

In the Action section, you can specify the action to perform after clicking the button. We’ll select the URL or Deeplink option:

8. Click Save to apply changes.

You can now use your promo in-app message in one of these ways:

Part-screen in-app message

As an example of a part-screen in-app message, we’ll create a popup to obtain user consent to send push notifications. This message can also help recover those who unsubscribed from notifications.

1. Go to your Pushwoosh account, open the Content → Rich Media section, and click Add template:

Enter a template name, choose Create new template, and click Add template:

We’ll create an in-app from scratch using a blank template. Alternatively, you can select one of the default templates and tailor it to suit your needs.

2. Let’s add a background image for our popup. Open the Popup tab, click Show More Options in the Content section, and upload the image:

Adding a background image is just an option. You can simply choose a background color instead.

3. Add the content blocks onto the canvas. Each block will represent a separate content element, such as a header, text, etc.

4. Let’s add an image to the first content block and adjust its appearance:

If you want to use a stock photo, you can select it right in the editor interface by clicking More Images → Stock Photos.
You can also experiment with AI image generation. To do this, click Generate Images in the Magic Image section and describe the image you want to create.

5. Add a heading to the second block. Set the desired font, color, and other text parameters.

6. Now, add the text of your in-app message to the third content block. You can experiment with the font, color, text alignment, line height, and padding parameters.

Let AI improve the quality of your text: select the text block and click on the Smart Text button.

7. Finally, let’s add a button to our popup. Customize the button color, rounding, and other parameters if necessary.

In the Action section, you can specify the action to perform after clicking the button: close the popup, open the link, or trigger some custom behavior using the JavaScript code.

8. Click Save to apply all changes.

You can use your new in-app message template in one of these ways: