Custom Message (Beta version)

Custom Web Messages function as Beta version. Please accept and understand the Beta version terms and condition upon use. Contact a Customer Success Member for inquiries.

Note

• Not available for In-App messages.

Warning

• When using custom messages, make sure someone with extensive knowledge and experience with HTML/CSS/JavaScript is handling and editing.

• To prevent undesired dynamic scripts from occurring, malicious elements and attributes may be deleted from the message, or sanitized and invalidated. Also, this may occur without notice depending on bug repairs or function improvements.

• Unless using the template as is, CSS necessary for Responsive Web Design or CSS animation is not available on the custom message editing page. Please prepare accordingly.

Creating a Custom Message

There are two ways to create a Custom Message.

Use standard templates

1. Select a message you wish to use from the template list. Select a custom type from the web message editing screen.

2. 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 from the list of templates.

Edit Custom Message

Settings for where to locate Custom Message

When using the Original template, select the display type. See Display Position for more details.

Copy the pattern

1. Click copy pattern under ADD.

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

Duplicate a Custom Message

1. Select the Custom 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.

2. 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 message to not appear when clicking the element

1. Set the: code: data-repro--wrapper attribute on the outermost element of the message.

<div class="container" data-repro--wrapper> message </div>

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

1. Set the: code: data-repro--wrapper attribute on the outermost element of the message.

<div class="container" data-repro--wrapper> message </div>

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

Note

Only one independent element is allowed in one message of attributes beginning with data-repro. For example, even if you created multiple of the same elements with the attribute data-repro--close , not all elements will act in the same way.

Animation setting

By changing the opacity property to 0 and 1 , it allows the Custom Message to either appear or disappear within the Web SDK targeted element.

Setting the images for Custom Messages

1. To insert an image in a message, bring the curser 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 curser.

2. 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 curser 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 curser within the following tag <div class="repro-xxxx--container">. If you do not designate the curser 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.

• To use the preview function within the actual screen, please check How to use preview function within Web Message and utilize the service.

• Script tag is not applicable.

All other settings

For all other message settings including delivery, please refer to Web Message

• « Web Message
• Silver Egg Recommendation Message (Beta version) »