Repro App

How to edit by applying templates

This page shows you how to customize messages by applying the HTML (Webview) template for in-app messages.

Customization method

set two or more buttons

Rounded button

Make the whole campaign rounded corners

Change the font size of the button.

Eliminate the top right button

Setting a GIF animation for the image

Set two or more buttons

1. 
   Select the template with thebutton
2. Pre-populate fields that can be filled in with a standard campaign type
3. Change from standard to custom
4. Copy and paste the repro--btn class code in the repro--dialog--btn-container class in the "HTML" tab
5. The href element in the pasted code will be the deeplink destination, so change it to the deeplink destination you want to transition to
6. Change the button wording in the pasted code

Cautions

• The CV event of the button press is not measured as a CV event when the button added by the above code is pressed.
  If you want to exclude a specific button, please change the data-repro--secondary-btn to data-repro--close attribute.
  If you want to add a measurement for a specific button:
  add data-repro--primary-btn data-repro--primary-cta-event or data-repro--secondary-btn data-repro to the class of the target button. --Add the secondary-cta-event.
• A button with no attributes ofdata-repro--primary-btn, data-repro--secondary-btn, or data-repro--close is called If there is, please note that tapping that button will not make the in-app disappear.

Make the button a rounded corner

1. Select the template with the button
2. Pre-populate items that can be entered with the campaign type as standard</span li>
3. Change from standard to custom
4. Add the following line to .repro--btn {} in theCSS tab and adjust the px
   The larger the number of pixels, the more rounded the corners of the button will be

CSS

Make the entire campaign rounded corners

1. Select a dialog type template
2. Pre-populate fields that can be filled in with a standard campaign type
3. Change from standard to custom
4. In "CSS" tab .repro--dialog--container {}, add the following line and adjust the px
   The larger the number of pixels, the more rounded the corners of the button will be

CSS

Change the font size of the button

1. 
   Select the template with thebutton
2. Pre-populate fields that can be filled in with a standard campaign type
3. Change from standard to custom
4. Change font-size to an arbitrary number in .repro--btn text {} in the CSS tab

Cautions

• repro--btn--text exists in two places.
  /* Button ======== */ is for the font size when displayed on a tablet or PC, and /* SP ====== */ is for the font size when displayed on a smartphone.
• If the text is too large, the design may be broken. Be sure to test the delivery on a real device.

Eliminate the top right button

1. Select a dialog type template
2. Pre-populate fields that can be filled in with a standard campaign type
3. Change from standard to custom
4. Delete the following section in the "HTML" tab

Set up a GIF animation for the image

1. Select a template with images
2. Pre-populate fields that can be filled in with a standard campaign type
3. Change from standard to custom
4. Uploading images in GIF format from "Add Image" at the bottom of the "HTML" tab