index.html

This file is a entry point of a template.

<script src="https://js.trustisto.com/socialproof_succker.js"></script>

When creating index.html you can use every HTML tag - but please check their support in older browsers. You can include custom Stylesheets and JavaScript. In case of Mail templates it is better to use some framework ex. MJML.

<link rel="stylesheet" href="/mystyle.css">
<link rel="stylesheet" href="//other.domain.com/external-style.css">

We recommend to save all 3rd party resources inside template folder and load them via relative path.

For external sources please use URL without protocol, so not http://somehost.com/file.png but use //somehost.com/file.png, so you template can work properly in HTTP and HTTPS environment (see samples on the right)

Parameters

<html>
<head>
  <style>
    h2 {
      background-color: {{bg-color}};
    }
  </style>
</head>
<body>
  <h2 ut:style="font-size: {{headerFontSize}}px;" data-html-friendly="true">{{header}}</h2>
  <form>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="submit" ut:text="{{submitText}}"/>
  </form>
  <script src="https://js.trustisto.com/socialproof_succker.js"></script>
</body>
</html>

In addition to static HTML and CSS you can include parameters using handlebars syntax {{parameter}}. In render time (see below), this parameter will be replaced by proper value.

You can also use parameters in tag attribute. To skip browser validation perpend attribute name with ut: ex. <img ut:src="{{imageURL}}" /> When value of a parameter will be known, name of the attribute would change.

You can add data-html-friendly="true" if you’d like to allow user to insert HTML code in that element. Information in manifest about HTML content is only for template editor. This attribute is mandatory to make it work.

You can also use parameters inside embedded Stylesheet <style></style>

Control Visibility

In addition, you can also control visibility of tags using this attributes:

• ut:hide-if="{{param}}" - if an value passed as argument doesn’t exist it will append display: none style into the element.
• ut:delete-if="{{param}}" - similar to ut:hide-if, but element will be just removed from DOM
• ut:show-when="{{otherParameterName, otherParameterValue, comparisonType}}" - to show or hide element based on some parameter value (look above in manifest section)

Loops

You can use ut:loop argument to build dynamically HTML elements based on array parameters. Please check section about products (below).

Redirects

<a ut:data-redirect="http://myshop.com/target-website">Click me</a>
<a ut:data-redirect="{{some-param}}">Click me</a>

If you want to redirect client to specific page, and that action need to be measured use ut:data-redirect attribute on <a> tag. Whenever user click on that element, he will be redirected to specific page and that click will be measured as engage from overlay.

CTA

<a ut:cta="{{param}}">Click me</a>

If you want to make Call To Action element, you can use ut:data-cta= attribute on a button or <a> tag. Each of CTA types will trigger an engage event.

Product & ProductArray

{
  "productName": "Product name",
  "productPrice": "50",
  "productCurrency": "USD",
  "productImage": "assets/img/shoe.jpeg",
  "productUrl": "http://shop.com/link-to-product"
}

<div ut:loop="{{products}}">
  <a ut:data-redirect="{{products[].productUrl}}" >
    <img src="{{products[].productImage}}" />
    <span>{{products[].productName}}</span>
  </a>
</div>

Our template can display products. There is a type of a parameter product and productArray. You can use ut:loop= to iterate over product and display them, or just display single product.

Reviews

{
  "userName": "John",
  "rate": "5",
  "timestamp": "",
  "description": "This store is gr8!",
  "permalink": "http://facebook.com/review/..."
}

Our template can also display users reviews, from Google, Facebook etc. There is a type of a parameter review and reviewArray. You can use ut:loop= to iterate over product and display them, or just display single product.

Forms

Your template can also have a form!

You can have only one form inside template and it should be described in manifest.json (see above)

• You should use <form> tag without action and method attributes
• Each input need to have name= attribute assigned to it
• For validating please use HTML required attribute
• You need to have default submit button

Consents

You can send two types of consent within the form. If form has an e-mail or phone filed, this consent will be attached to a specific user on channel used in that form. So if user will submit his e-mail, specific consent will be set for that user only for e-mail channel.

Those types are:

• general consent, to communicate using specific channel ex. e-mail or phone,
• marketing consent, to have ability to send marketing content to specific user using specific channel

To send consent insert checkbox or input type=hidden inside the form:

• general consent name="consent" and value true or false
• marketing consent name="marketing" and value true or false

Counters

"deadline": {
  "type": "date",
  "section": "countdown",
  "label": {
    "pl": "Termin wygaśnięcia licznika",
    "en": "Countdown final time"
  },
  "required": false,
  "default": "",
  "dateOptions": {
    "relative": true,
    "absolute": true
  }

<div class="countdown" ut:data-deadline="{{deadline}}" ut:data-timePassedMessage="{{tooLate}}">
  <span class="days"></span>
  <span class="hours"></span>
  <span class="minutes"></span>
  <span class="seconds"></span>
</div>

Our template have build-in counter feature. So you can easily display dynamic counters in your template.

You can use parameters with counters, so user can decide what is the deadline absolute or relative.

When defining countdown in HTML you must add countdown class to container and in that container you need to have containers with following class:

• days
• hours
• minutes
• seconds

Images

<img ut:src="{{imagePath}}" />

You can attach images to your template. Just add them to you template folder and use relative path.

You can also use image as parameters. Just use attribute evaluation ut:src={{imagePath}} and you are done.