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 eSputnik

Before publishing In-App messages, subscribe to a pricing plan.

📘

Note

• The number of contacts in a subscription is calculated based on deviceId.
• If the number of contacts in an In-App channel exceeds the plan’s limit, messages will not be displayed to contacts above the limit.

Creating a New Message

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

2. Select the message creation type.

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

Drag-and-Drop Editor

1. Drag the components into the editor field.

The available message components are:

• Text
• Container
• Image
• Floating image
• Button
• Slider

📘

Note

The floating image can overlay other components of the message.

2. 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

 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

Text

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

2. 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

Image

The following settings are available for the image:

• Action on click
• Size
• Image
• Round corners 
• Spacing inside component
• Spacing around component

📘

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.

📘

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.

Scaling options available for images:

• Fill
• Fit
• By content height

📘

Important

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

Button

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.

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

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

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

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.

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

Set the action on click:

Context Menu

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

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.

📘

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.

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

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

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.

HTML Settings

Open the 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.

📘

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.

2. 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:

  HTML

  - \<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:

  HTML

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

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.

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.

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

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.

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