Create in-app messages in the built-in editor

Youtube Video: Create In-Apps without coding in our easy-to-use editor

Add a new template

To create an in-app template, go to Content → In-apps and click Add template:

Here, you have two ways to create a template:

1. Upload ZIP — upload a ZIP file with your HTML in-app message.
2. Create new template — build a template in the visual editor. After creating it, you can start from a pre-built template or a blank one.

In this article, we will look at creating a template from scratch. Follow the same steps to customize your existing template.

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

You can create a new in-app message page based on a default template or start from scratch by selecting a blank template.

General template settings

Before you add content blocks, configure the template on the Popup tab:

• Set the popup position on the screen.
• Change the popup width and height.
• Adjust border rounding.
• Configure content settings for the entire template: alignment, width, fonts, and colors.
• Set the background color or add a background image.
• Customize the position and appearance of the close button.

Full-screen and part-screen in-apps use the same editor. Choose a format below and set the popup width and height to match.

Full-screen in-app message

Use full-screen in-apps for onboarding, paywalls, and promotions such as offerwalls.

On the Popup tab, set width and height close to the target device screen size so the message covers most of the display.

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

Image and text	High resolution: 1200 x 1000 px Minimum size: 600 x 500 px Aspect ratio: 6:5
Image only	High resolution: 1200 x 2000 px Minimum size: 600 x 1000 px Aspect ratio: 3:5

Note

For native iOS and Android apps, open Settings → In-App Settings, and set message position to Fullscreen.

Part-screen in-app message

Part-screen in-apps are compact overlay messages that leave part of the app visible behind the popup. Use them for opt-in prompts, announcements, and promo content.

On the Popup tab, set a smaller width and height so the popup does not cover the full screen.

Note

For native iOS and Android apps, open Settings → In-App Settings, and choose Center, Top, or Bottom for message position.

Tip

To automate push permission opt-in and opt-out recovery popups in Customer Journey, see Create opt-in and opt-out popups.

Add content

Content blocks

Define the template layout by dragging and dropping the required content blocks into the template body. You can add headings, text, images, buttons, dividers, fillable forms, HTML blocks, menus, image carousels, countdown timers, and tables.

If you want to place more than one content element in a row, add the Columns element to the template. Select the required block type and add content to each column:

To change the background color of a layout, click on its outer margins. Make sure the entire layout is selected and choose the color:

If the entire layout is selected, you can also edit the padding settings and upload a background image.

Portrait and landscape orientation

Pushwoosh provides the flexibility to create in-app message content in both portrait and landscape orientations. This ensures that your campaigns are visually appealing and effective on all devices.

Portrait (Mobile tab)

To create in-app messages designed for portrait orientation, typically used on mobile devices, navigate to the Mobile tab in the editor. Here, you can design your content to fit a vertical layout suitable for smartphone screens.

Landscape (Desktop tab)

For landscape-oriented in-app messages, which is generally preferred for wider screens, navigate to the Desktop tab within the editor. Here, you can structure your in-app messages to take advantage of a broader horizontal space.

Columns in landscape layouts

If you need to add columns to your landscape in-app messages, first add the Column element. Define the number and the layout of columns you need.

After designing your landscape in-app messages with columns, switch to the Mobile tab. Scroll down to the RESPONSIVE DESIGN section, found at the bottom of the settings panel, and enable the Do Not Stack on Mobile option.

Note

This step is vital for maintaining the intended design of your landscape in-app messages when viewed on mobile devices. It ensures that the columns remain side by side, rather than stacking.

Pushwoosh also allows you to mix and match column layouts in your in-app messages. You can configure specific columns to stack vertically while keeping others horizontal. To do this, adjust each column block as needed.

Content elements

Heading

You can edit the font, color, text alignment, line height, and padding parameters for headings.

Note

If you want to personalize the heading for each user, add Tags to it.

You can also save time by letting AI generate the heading text for you. Click the button in the Smart Headings section, enter some keywords, and click Get Suggestions:

Text

Texts are customizable the same way as headings (in the editor, this block is labeled Paragraph). You can change the font, color, text alignment, line height, and padding parameters.

Note

If you want to personalize the text for each user, add Tags to it.

You can also enhance your text by using the Smart Text option:

Image

To add an image, click on the image block and drag your file to the editor panel:

Alternatively, you can specify the Image URL instead of uploading a file. You can also paste the URL of an image from your Media store into the Image URL field.

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

To place text directly on top of an image, select the image block and click Apply Effects. Click Text, insert your content, and adjust its parameters:

In the Action section, open the Action Type dropdown to set what happens when the image is clicked: URL or Deeplink (open a website or a deep link to a page within your app), Close Popup, or Custom Javascript (insert a custom JavaScript handler). If no action is required, leave Close Popup selected.

Note

If you want to open a page in your mobile app when the image is clicked, select the URL or Deeplink option and insert a deep link.

Button

Once a button is added to your template, you can customize its text, color, padding, and borders.

Note

If you want to personalize the button text for each user, add Tags to it.

AI can help you come up with button text. Just click on the button in the Smart Buttons section, enter keywords, and click Get Suggestions:

To specify the action that should be performed after clicking the button, go to the Action section and open the Action Type dropdown: URL or Deeplink (open a website or a deep link), Close Popup, or Custom Javascript (insert a custom JavaScript handler).

Note

If you want to open a page in your mobile app when the button is clicked, select the URL or Deeplink option and insert a deep link.

Divider

Dividers are lines you can place between content blocks. Use them to structure your template and emphasize the most important blocks. You can change the divider’s width, line type, alignment, and padding settings.

Form

Note

To configure this element, you will need the help of a developer.

Forms allow you to collect users’ emails, phone numbers, preferences, and other information that may be useful for future communications. This element is configured as a standard HTML form: data is sent in a GET or POST request to the address specified in the URL field.

Click on the field name to configure its parameters:

• Field Type: the type of data that should be transmitted in the field;
• Field Name: the name of the parameter in which the data from the field is passed;
• Field Label: text displayed above the field;
• Placeholder Text;
• Checkbox indicating whether the field is required to submit the form.

To add another field, click Add New Field and select the data type:

You can customize form parameters such as width, alignment, space between fields, button text, colors, and fonts.

HTML

The HTML block allows you to add your own custom HTML code to a template.

This can be especially useful for enhancing your in-app messages with interactive or visually engaging elements. For example, if you’re looking to create custom forms for surveys, you can use the HTML block to include your own designed forms.

After setting up the form, you can track the statistics directly within Pushwoosh, allowing for easy analysis of results and user interactions. To implement this, you’ll need assistance from your development team, please share this link with them.

There is a pre-designed in-app message template with a custom survey form in the Default templates. You can use this as a reference or starting point for your own survey forms.

Also, you can enhance your in-app messages by embedding videos for a more engaging user experience. Here’s an example of how to embed a YouTube video using HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Menu

The Menu element allows you to place several clickable items in a row or column. For example, you can add a navigation bar or company contacts.

To add a menu item, click Add New Item:

Add item text and set the action that should be performed when clicking on the item:

Choose the horizontal or vertical menu type and add a separator between items if necessary:

Image carousel

The Carousel element displays several images in a swipeable slider within a single in-app message. Use it to showcase multiple products, screenshots, or onboarding steps.

To set up the carousel:

1. With the Carousel block selected, switch between Mobile and Desktop at the top of the panel to configure each view.

2. In the Images section, use the Image 1, Image 2, Image 3, etc. tabs to select a slide. Click + to add another slide or the delete icon to remove the active one.

3. For the selected slide, click Upload Image or choose an option from More Images. You can also paste a hosted link into Image URL, including an image from your Media store.

4. Enter Alternate Text for the slide. To adjust the image itself, click Edit Image next to the thumbnail preview.

5. Click Show More Options at the bottom of the panel if you need additional slide settings.

Countdown timer

The Timer element adds a countdown to your in-app message. Use it for limited-time offers, flash sales, and event reminders. Set the target date and time, then customize the timer’s appearance.

To set up the timer:

1. With the Timer block selected, switch between Mobile and Desktop at the top of the panel to configure each view.

2. In the Countdown section, set End Time to the date and time when the countdown should reach zero. Choose the Timezone and Language for the timer labels.

3. Turn Labels on to show Days, Hours, Minutes, and Seconds under the digits, or off to display the countdown numbers only.

4. In the Styling section, set Background, Digits Color, and Labels Color. Choose Digits Font, Digits Font Size, Labels Font, and Labels Font Size.

5. Configure other options in Image, Action, and General as needed.

Table

The Table element lets you present structured content in rows and columns, such as plan comparisons, pricing, or feature lists. Add or remove rows and columns and customize borders, padding, and text styling.

To set up the table:

1. With the Table block selected, switch between Mobile and Desktop at the top of the panel to configure each view.

2. In the Layout section, set Columns and Rows with the + and - buttons.

3. Choose Background Color. Turn Border on to set the style, thickness, and color, or use More Options for advanced border settings. Turn Striped Rows on to alternate row backgrounds.

4. Click a cell in the preview to enter header or body text.

5. In Header and Content, customize fonts, colors, and text alignment for header and body cells.

6. Configure Links, General, and Responsive Design as needed.

Content personalization

Personalize the main text, the header, or the button text to make your content more relevant and engaging. For example, you can address users by name or mention their preferences.

First, you need to set up Tags and configure collecting data from users (for example, via a feedback form). When creating in-app messages, select the required content block, click Merge Tags, and select the Tag you want to use:

Multi-language templates

You can localize the texts of your in-app message template for each language your users speak. To do this, switch between languages in the Editable language list and edit the content in each language separately:

If the content is not localized, it will be displayed in the language specified as default in Language settings.

Note

Any element you add to the template appears with the same content for all languages. Remember to localize the added texts (including button texts) for all languages you use in your template.

Customize in-app message appearance and behavior (iOS and Android Native)

Use In-App Settings to control how your in-app messages look and behave on native iOS and Android apps. You can adjust the screen position, choose animations, and enable swipe-to-dismiss gestures.

To configure in-app settings:

1. Click Settings at the top of the screen.

2. In the settings window, choose how you want your in-app message to look and behave by adjusting the available options:

Set message position on screen

Choose where the message should appear.

Options include: Fullscreen, Top, Center, Bottom

Select entry animation

Pick how the message appears on the screen. In the settings, this is the Present Animation option.

Options include: Up, Down, Left, Right

Select exit animation

Pick how the message disappears. In the settings, this is the Close Animation option.

Options include: Up, Down, Left, Right

Enable swipe-to-close (optional)

Allow users to dismiss the message by swiping in one or more directions.

Options include: Left, Right, Up, Down

3. After selecting your preferences, click Apply to save the changes or Cancel to discard them.

Save and use the template

Click Save to apply changes.

Now you can use your in-app message template in one of the following ways:

• Show an in-app as part of a customer journey;
• Send a push that opens an in-app when clicked;
• Display a single in-app to your users.