Login

Security and Compliance

Creating In-App Message

In-App messages allow you to deliver personalized content to your users directly in your mobile app.

How In-App works

Important

Install SDK to send In-App messages through Yespo

Creating a New Message

  1. Go to Messages → Messages → In-App. Click the New In-app button.

Creating a new message

  1. Select the message creation type.

Message creation type

There are two types of creating In-App messages in Yespo: using drag-and-drop and HTML editors.

Drag-and-Drop Editor

  1. Drag the components into the editor field.

Drag the components

The available message components are:

  • Text

  • Container

  • Image

  • Floating image

  • Button

Message components

Note

The floating image can overlay other components of the message. 

Floating image

  1. Configure the general message settings.

When you don't have any message components selected, you will see settings on the right side of the screen:

  • Distance between elements

  • Background (color and image)

  • Spacing inside component

General message settings

 In-App Message Components Settings

Left-click on a specific message component to edit it.

Container

The container can contain one or several components:

  • Image

  • Text

  • Button

The following parameters are available for the container:

  • Action on click

  • Align inner elements

  • Size

  • Background

  • Stroke

  • Shadow

  • Round corners

  • Spacing inside component

  • Spacing around component

Сontainer parameters

Text
  1. The text-decoration panel, text-align panel, and link parameters are at the editor's top.

 Еext-decoration panel, text-align panel, and link parameters

  1. The main text settings panel is located on the right side of the editor, with the following parameters:

  • Size

  • Background

  • Spacing inside component

  • Spacing around component

Main text settings

Image

Image settings

The following settings are available for the image:

  • Action on click

  • Size

  • Image

  • Round corners 

  • Spacing inside component

  • Spacing around component

You can customize the positioning for the floating image.

Position

Note

The position of the floating image is calculated from the top-left corner of the message.

Left-click on the message to replace it, or use the Change button on the settings panel. You can upload your own image, choose it from the Image library, or specify an external link.

Image library

Scaling options available for images:

  • Fill

  • Fit

  • By content height

Scaling options

Important

Upload PNG, JPEG, SVG, GIF, WebP, and AVIF files up to 3 MB.

Button

Button settings

The following parameters are available to configure the button:

  • Action on click,

  • Size

  • Background

  • Icon

  • Text

  • Stroke

  • Shadow

  • Round corners

  • Hover effects

  • Loop animation

  • Spacing inside component

  • Spacing around component

Context Menu

A Context menu becomes available upon right-clicking on the message component with the following actions:

Context menu

  1. Copy

  2. Duplicate

  3. Cut

  4. Delete

  5. Put behind all floating images

  6. Put in front all floating images

  7. To container

Close Icon

The Close icon allows the user to close the message.

You can use standard and custom icons with settings for color, size, and positioning on the screen.

Close icon

Note

The position of the Close icon is calculated from the top-right corner of the message.

Message Orientation

The message can be displayed in Portrait or Landscape mode, depending on how the user holds the device (vertically or horizontally).

To see how the message will display on the device, click the Orientation icon at the editor's top.

Message orientation

 Press the Save button on the top panel of the editor to apply the changes after configuring the In-App message.

Save button

Fill in the New Message field. This field is available for searching messages in the general list; users will not see it.

New Message field

HTML Editor

This method of creating In-App messages is more labor-intensive and requires specific technical skills in working with HTML and CSS; however, it provides a more flexible approach to customizing message content.

Fill in the In-app name field.

In-app name field

HTML Settings

Open the HTML tab.

HTML tab

You can put your HTML code or use our base code.

Using base code

Copy and paste the base HTML into the code window. Insert your code instead of Your code goes here text.

Copy and paste the base HTML

Important

You can use personalization by merge tags and Velocity features in the HTML code of In-App messages.

Custom HTML markup rules
  1. Use buttons instead of anchors

Attention

Usage of Anchor HTML elements is forbidden.

  1. Set data attributes for the clickable element

Each clickable element must have the required data attributes.

  • Code of the button that should open the URL:

<button 
                data-target-component-id="1c92f19e-c994-11ed-afa1-0242ac120002"
                data-sys-action-type="OPEN_URL"
                data-sys-action-params="{"url":"https://google.com"}"
                class="button">
</button>
  • Code of the button that should close a widget:

<button
                data-target-component-id="c740db99-cfbb-4857-b790-cb5631c33255"
                data-sys-action-type="CLOSE_WIDGET"
                class="close-button">
</button>

Attribute name

Attribute value

data-sys-action-type

One of action:

  • CLOSE_WIDGET
  • CLICK
  • OPEN_URL

CLICK and OPEN_URL are counted in the statistics as clicks, CLOSE_WIDGET — no.

data-target-component-id


Generate a unique element’s UUID (e.g., using Online UUID Generator)

  1. Use Margin Top 50 px (approx) so the content does not overflow the iOS devices panel.

CSS Settings

Open the CSS tab and add CSS rules in the code window.

CSS tab

Adding CSS code is optional, but custom HTML is usually displayed incorrectly without CSS.

After adding the code, press the Save and exit button on the top panel of the editor to apply the changes.

Save and exit

Messages created using the HTML editor are marked with the corresponding icon.

Messages created using the HTML editor

Editing and Deleting Messages

Click on the three dots icon in the message field and select the Delete option to delete a message.

Deleting messages

Click on the message, and then click the Edit button to edit it.

Editing messages

Multilingual Version (optional)

You can create multiple language message if this option is available in your pricing plan. Click the globe icon in the editor's top panel, specify the default language, and add language versions.

Multilingual version

Fill each version with the content in the corresponding language. You can switch between versions within one template in one click.

Note

The language is determined by the device language, and not by the one written in the contact card.

Linking In-App with Mobile Push

Create or open a mobile push notification, activate the Open in-app by clicking switcher, and select In-App message.

Open in-app by clicking

Note

The link and buttons are unavailable for mobile pushes with linked In-App messages.

Mobile pushes with linked In-App messages marked with the chain icon in the system. Hover over the icon to see the name of the linked message.

Testing In-App Message

  1. Open the mobile push message with the linked In-App.

  2. Click the Test button on the top panel of the mobile push.

Testing In-App

  1. Select the application in the Send Test Message window, to which the push notification will be sent. If you have only one application, it will be automatically chosen by default.

  2. Enter the email, contact ID, or phone number into the Search field to specify the contact for the push notification.

Send Test Message

If the contact is an app user, you will see the such status:

Status

It means the provided contact data has a matching mobile token. You can send a test notification to this contact. 

Otherwise, you will receive the following notification: The contact does not have an application token.

When you receive the test mobile push, click on it to see the linked In-App message.

Analytics

See reports on In-App campaigns in mobile push analytics (messages with the chain icon).

The number of clicked messages refers to In-App messages.

Analytics

Any Questions?
We’re always happy to help!
Discount services
Schedule a Call
Fill in the form, and our specialists will call you back as soon as possible.
Discount services
Chat Support
We’re waiting for your questions!
Discount services
Email
Contact the support team