Components

Here you can find all supported properties for default Template Editor components. to change in your template using API.

What is a component?

Component is an object which can be added to a template canvas in Template Editor. Every component can be modified using controls in the Inspector. Inspector is on the right side of the web designer UI. See Designer Editor basic

What are the component properties?

Property is a value which defines how the component looks like or how it behaves on the template. For example:

• opacity=0.2 - makes a component nearly visible,
• opacity=0.0 - makes a component invisible,
• rotation=45 - rotates component by 45 degrees (clock-wise),
• imageUrl=https://example.com/my-image.png - updates image link,
• text=Hello World - updates text,
• effectName=blur - sets blur on image.

How to change template using API?

You can modify properties using Template Editor or by using no-code automations or REST API.

Here is an example change entry:

[
    {
      "id": "image_wg",
      "x": 100,
      "y": 100,
      "rotation": 45
    },
    {
      "id": "text_2g",
      "rotation": 30,
      "text": "Hello World!"
    }
]

Notice that every change contains id property. It's required by Bannerly to find a proper component to which changes should be applied. List of all available properties which can be used you can find below. The list of supported properties grows constantly, so you can visit this page from time to time to see what are the new properties to update.

Common properties

• y - y position in pixels
• x - x position in pixels
• rotation - rotation in degrees 0 - 360
• opacity - opacity, eg: 1, 0, 0.5

Rectangle Component

• color - rectangle fill color (eg: rgba(255,255,255, 1) or #efefef)
• borderColor - rectangle stroke color (eg: rgba(255,255,255, 1) or #efefef)
• radius - rectangle radius of all corners

Circle Component

• color - circle fill color (eg: rgba(255,255,255, 1) or #efefef)
• borderColor - circle stroke color (eg: rgba(255,255,255, 1) or #efefef)
• borderWidth - circle stroke width (eg: 5)

Text Component

• text - text value
• color - text color (eg: rgba(255,255,255, 1) or #efefef)
• borderColor - text border color (eg: rgba(255,255,255, 1) or #efefef)
• borderWidth - text border width (eg: 5)
• textBackgroundColor - text background color

QR Code Component

• value - QR code text, URL or anything else to encode
• color - QR code color, eg: rgba(255,255,255, 1) or #efefef

Image Component

• imageUrl - image URL or base64,
• objectFit - cover or contain,
• effectName - kodachrome,
• borderColor - border color, eg: rgba(255,255,255, 1) or #efefef,
• borderWidth - border width in pixels (eg: 5)

SVG Component

No additional properties

How can I change other properties?

If you would like to change other property than listed above, then please contact me. I can add support for other properties with ease. The reason why I didn't list all possible properties here is that I would like to keep this simple and easy to use.