First steps
User Data
- Responsive Email Editor Review
- Designing your email
- Creating Synchronized Modules
- Setting Up Responsive Email Design
- Setting Up Smart Containers
- Creating a Gmail Promotions Annotation
- Adding The Rollover Effect
- Adding Anchor Links
- Module Library
- Adding a Table to an Email
- Adding Custom Fonts
- Creating CTA Button
- Working with Images
- Creating Timer
- Using AI in the Email Editor
Omnichannel
- Setting Up Widgets for Your Site
- Widget Calling
- Setting Up Locations for the Widget Calling Rules
- Storing data from widgets to contact fields
- Using Annoyance Safeguard
- Actions After Form Submission
- Replacing Double Opt-In System Workflow
- Using Yespo Extension for Google Chrome
- Creating Pop-ups via Google Tag Manager or WordPress
- Sending Yespo Widget Events to Google Analytics
- Using A/B Tests for Widgets
Automation
- Building and Editing Workflows
- Configuring Workflow Start/Stop Conditions
- Start Block
- Popular Blocks
- Message Blocks
- Contact Blocks
- Conditions Blocks
- Other Blocks
- Message to Segment Blocks
- Time Blocks
- Setting Up Allowed Send Time
- Using Workflow Launch History
- Webhook Workflows
- Workflow Troubleshooting
- Double Opt-In
- Welcome Сampaign
- Welcome Series Segmented by Category
- Launching a Workflow After a Contact Import
- Regular Workflow for a Segment
- Birthday Campaign
- Linking Workflow to the Button
- Using Variables from Order in Workflow
- Collecting Order Feedback
- Customer Reactivation
- Sending Extra Campaigns
- Sending Campaign to Those Who Did Not Open the Previous One
Personalization
Analytics
- Email Campaign Report
- Web Push Campaign Report
- Viber Campaign Report
- Mobile Push Campaign Report
- App Inbox Campaign Report
- Widget Report
- Triggered Campaign Report
- AMP Campaign Report
- SMS Campaign Report
- Multilingual Campaign Report
- Setting up UTM Tags
- Revenue from Campaigns
- Tracking Campaign Performance in Google Analytics 4
Multilanguage Campaigns
Events and Behaviour Tracking
Recommendations
API
Security and Compliance
Integration
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
-
Go to Messages → Messages → In-App. Click the New In-app button.
-
Select the 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
-
Drag the components into the editor field.
The available message components are:
-
Text
-
Container
-
Image
-
Floating image
-
Button
Note
The floating image can overlay other components of the message.
-
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
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
-
The text-decoration panel, text-align panel, and link parameters are at the editor's top.
-
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
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
Context Menu
A Context menu becomes available upon right-clicking on the message component with the following actions:
-
Copy
-
Duplicate
-
Cut
-
Delete
-
Put behind all floating images
-
Put in front all floating images
-
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
-
Use buttons instead of anchors
Attention
Usage of Anchor HTML elements is forbidden.
-
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:
CLICK and OPEN_URL are counted in the statistics as clicks, CLOSE_WIDGET — no. |
data-target-component-id |
|
-
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.
Editing and Deleting Messages
Click on the three dots icon in the message field and select the Delete option to delete a message.
Click on the message, and then click the Edit button to edit it.
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.
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.
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
-
Open the mobile push message with the linked In-App.
-
Click the Test button on the top panel of the mobile push.
-
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.
-
Enter the email, contact ID, or phone number into the Search field to specify the contact for the push notification.
If the contact is an app user, you will see the such 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.