manifest.json

Manifest is a file that describe your template and all parameters that final user can personalize.

{
  "version": 1,
  "name": "Template Name",
  "categories": ["collect", "increase", "guide", "connect"],
  "type": "popup",
  "origin": "URL address of origin template, if this was cloned",
  "description": {
    "pl": "Polish description",
    "en": "English description"
  },
  "width": 1200,
  "height": 630,
  "responsive": false,
  "form": {
    "fields": {
       "name": "string",
       "email": "string"
    },
    "options": {
      "closeOnSubmit": false
    }
  },
  "params-sections": {
    "general": {
      "title": {
        "pl": "Ustawienia",
        "en": "Settings"
      },
      "description": {
        "pl": "Główne ustawienia overlaya",
        "en": "Main overlay settings"
      }
    }
  },
  "params": {
    "header": {
      "type": "text",
      "section": "general",
      "label": "Headline", // without localization
      "required": false,
      "default": {
        "pl": "Cześć <b>Świecie</b>",
        "en": "Hello <b>World</b>"
      },
      "html-friendly": true
    },
    "headerFontSize": {
      "type": "number",
      "section": "general",
      "label": {
        "pl": "Rozmiar czcionki nagłówka",
        "en": "Header font size"
      },
      "required": false,
      "default": 24,
      "min": 12,
      "max": 36
    },
    "bgcolor": {
      "type": "color",
      "section": "general",
      "label": {
        "pl": "Kolor tła",
        "en": "Background color"
      },
      "required": false,
      "default": {
        "pl": "#ffffff",
        "en": "#ffffff"
      }
    }
  }
}

• name - internal name of the template, not visible in UI
• categories - category of the template, can be one or few, available categories:
  • For Overlays and Topbars:
    • collect - for collecting e-mail address
    • increase - for increasing sales
    • guide - for guiding visitors
    • connect - connecting with visitors
  • For Mails:
    • rescue - mail for abandon cart recovery
    • promo - promotion & offers
    • administrate - wiadomość administracyjna
    • special - wiadomość specjalna
• type - template type, one of popup (aka Overlay), topbar, mail
• origin - url of origin template, if you copy and change other template (optional)
• description - description of the template (localized), will be visible in UI
• width - optimal width of a template in pixels
• height - optimal height of a template in pixels
• responsive - is this template responsive (default: true)
• countdown - template use countdown feature (default: false)
  • set to true if template use countdown

Trust Bar only manifest fields:

• mobile-height - topbar height on mobile devices
• mobile-breakpoint - max width in pixel at witch mobile-height will be applied at

Form form

If template has a form that can be submitted you need to declare it in manifest in form node (look at example on the right). Inside this node there are two objects fields and options

In fields you declare names (name=) of the form fields alongside type which can be one of the following:

• string
• number
• date
• bool

In options whish is optional, you can include following parameters:

• closeOnSubmit - true/false

Parameter Sections params-sections

Parameter section groups parameters to single logic set. Parameter sections are stored in params-sections object, where keys are a sections individual IDs.

Single params-sections has following properties:

• title - name of the section, visible in template editor (localized)
• description - description of the section visible in template editor (localized)
• showWhen - you can display section in Template Editor based on other parameters value. See showWhen in Parameters section below.

Parameters params

Parameters makes template dynamic and personal. When final user choose your template he can change any of them. So make sure you add plenty of them to allow personalize your template.

You can group parameters into parameters sections. Parameters are stored in params object, where keys are parameter names.

Single param has following properties:

• type - type of parameter (see below)
• section - parameter section ID
• label - name of the parameter (localized)
• required - parameter is required or no? true / false
• default - default value of parameter (localized)
• html-friendly - set to true if parameter can receive HTML code (see below)
• showWhen - a way to show/hide parameter in Template Editor (see below)

Parameter property type:

"buttonHeight": {
  "type": "number",
  "min": 10,
  "max": 50,
  "section": "general",
  "label": {
    "pl": "Wysokość przycisku",
    "en": "Button height"
  },
  "required": false
},

"buttonAnimation": {
  "type": "select",
  "section": "general",
  "label": {
    "pl": "Animacja przycisku",
    "en": "Button animation"
  },
  "required": false,
  "selectOptions": [
    {
      "value": "appear",
      "labels": {
        "pl": "Pojawienie się",
        "en": "Button appear"
      }
    },
    {
      "value": "slide-in-left",
      "labels": {
        "pl": "Wjazd od lewej",
        "en": "Slide-in from left"
      }
    }
  ]
}

• text: ex. “sample text”
• textStyle: styling text: font, size, bold, italic etc.
• number: ex. 1, you can add also specify:
  • min: min value of input (optional)
  • max: max value of input (optional)
• color: ex. “#000000”
• bool: ex. true / false
• date: date & time
  • dateOptions date options
    • relative: can date be relative ex. 10 minutes
    • absolute: can date be absolute ex. 08-08-2021 12:00:00
• image: URL to image
• product: product object
• productArray: product array, you can also specify:
  • min: min amount of products (optional)
  • max: max amount of products (optional)
• review: review object
• reviewArray: review arrays, you can also specify
  • min: min amount of reviews (optional)
  • max: max amount of reviews (optional)
• cta: allow user to choose action from
  • redirect to specific address
  • copy text to clipboard
  • open other Trust Overlay, Bar etc.
• select: allow user to select value from the list
  • selectOptions array of options (see example on the right)
• array: array of any object (this property is not supported in UI Designer)

Parameter property html-friendly:

Sometimes we need to allow final user to insert raw HTML code inside our template. To make this work, mark parameter as HTML friendly with this attribute. This will give user hint in template editor.

To make this full work you need to also put data-html-friendly="true" attribute in parent tag, see below.

Parameter property showWhen:

"buttonColor": {
  "type": "color",
  "section": "general",
  "label": {
    "pl": "Kolor przycisku",
    "en": "Button color"
  },
  "required": false,
  "showWhen": {
    "otherParameterName": "isButtonVisible",
    "comparisonType": "equals",
    "otherParameterValue": "true"
  }
}

You can display certain parameters in Template Editor based on other parameters value. This is helpful if you have some conditions like “show/hide button” and then you can specify “buttonColor”.

comparisonType: includes|equals|greaterOrEqual|lessOrEqual