HTML In-App Message¶

Warning

HTML In-App message is only available for Repro iOS SDK 4.7.1 or above and iOS 9 or above, or for Repro Android SDK 4.4.1 or above and Android 5 or above.If either of those versions is older than the ones described above, the message of the campaign won't be shown.
When using HTML In-App messages, make sure someone with extensive knowledge and experience with HTML/CSS is handling and editing.
Unless using the template as is, CSS necessary for Responsive Design or CSS animation is not prepared on the HTML In-App message editing page. Please prepare accordingly.
Script tag is not applicable.

Create HTML In-App Message¶

There are two ways to create a Html In-App Message.

Use standard templates¶

Select a message you wish to use from the template list. Select a custom type from the In-App message editing screen.

By clicking the custom button, the text editor will appear on the left of the screen. Your choice of HTML and CSS templates will be set in the editor. Please edit appropriately.

Note

All text and images created in the standard version will be passed onto the custom version.
Anything edited on the custom version will not be transferred to the standard version. Also, when transferring from custom to standard while in the process of editing, all content will be deleted.

Use the Original template¶

Select the Original template(ID1000) from the list of templates.

Edit HTML In-App Message¶

Copy the pattern¶

Click copy pattern under ADD.

A copied pattern will appear, and the message is ready to be edited. If you duplicated the HTML In-App Message pattern, you will not be able to change it to the standard version.

Duplicate a HTML In-App Message¶

Select the HTML In-App Message and click duplicate. You will not be able to change to a standard message if the original copied message is from the custom version.

Open the message editor and edit your message.

Edit the contents¶

Editing the contents. Please follow the below rules for HTML when editing.

State it so that the top level element will be singular.

<!-- Good -->
<div>
  <div>message1</div>
  <div>message2</div>
<div>

<!-- Bad -->
<div> message1</div>
<div> message2</div>

State it so that the top level element will be surrounded by a tag.

<!-- Good -->
<p>message</p>

<!-- Bad -->
message

Set the element which closes the message¶

Add the data-repro--close attribute to the target element.

<div class="btn" data-repro--close> ☓ </div>

Setting the action button for campaign measurement¶

By setting attributes for action buttons, it is possible to count clicks on any element as Button 1 Clicks and Button 2 Clicks displayed in the distribution result of effect measurement.

Add attributes data-repro--primary-btn and data-repro--secondary-btn to each element.

<div class="btn" data-repro--primary-btn>button_1</div>
<div class="btn" data-repro--secondary-btn>button_2</div>

In case of specifying the tracking event name when clicking the button1 and 2, set the attribute data-repro--primary-cta-event or data-repro--secondary-cta-event.

<div class="btn" data-repro--primary-btn data-repro--primary-cta-event="tap_button_1">button_1</div>
<div class="btn" data-repro--secondary-btn data-repro--secondary-cta-event="tap_button_2">button_2</div>

Note

data-repro--primary-cta-event and data-repro--secondary-cta-event can not be set more than twice in the same HTML.
In case that none of attribute data-repro--primary-cta-event or data-repro--secondary-cta-event is given, in_app_message will be set as the tracking event name.
If you write as data-repro--primary-cta-event="", in_app_message will be set as the tracking event name. If you write as data-repro--primary-secondary-event="", the tracking event name will not be set and no event will be fired even if the element is clicked.

Setting the images for HTML In-App Messages¶

To insert an image in a message, bring the cursor to the desired place in the HTML, and click the “add image” button in the text editor below.When you select the template with images, the image will be added automatically at the position of the image on the template without placing the cursor.

When you upload an image from a folder saved onto the computer,the following tag img src= and a URL for the image will appear where the cursor is, and you will be able to see the image in the preview.

Note

The maximum image size allowed to upload using the “add image” button is 1MB. There is no limit to the file size if you wish to not use the “add image” button, however our recommended image size will still be 1MB.
If you wish to use the “add image” button using a template without an image, designate the cursor within the following tag <div class="repro-xxxx--container">. If you do not designate the cursor within the tag, a URL for the image and the following tag img src= will be created at the end of the HTML, and the image will be uploaded outside of the message.
Please verify the actual image since the preview function is only within the operating screen.

All other settings¶

For all other message settings including delivery, please refer to In-App Message .