Omnichannel

Security and Compliance

Creating In-App Message

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

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

  • Slider

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

  • Slider

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

The following settings are available for the image:

  • Action on click

  • Size

  • Image

  • Round corners

  • Spacing inside component

  • Spacing around component

Image settings

Note

If you don't need a fixed width for images, it's better to place them by the container width so that all elements are on the same level

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

Slider

Drag the slider from the left-side panel and drop it into the message template. Set up slider and Manage slides buttons will appear on the right-side panel.

Slider settings

  • In the slider setup window, you can set up navigation buttons, indications, slideshow animation, and the slider's general design.

Slider setup

  • Manage slides’ order, add, duplicate, or rename slides after clicking the Manage slides button.

Manage slides

Also, you can add a slide by clicking on the + sign.

Adding slide

To change or edit an image, click on it in the template, after which it will appear in the right settings panel. Clicking on the image from the slider in the settings panel opens the editing window.

Image settings

Use navigation buttons to switch between the slider’s images.

Navigation buttons

Set the action on click:

Action on click

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

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.

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