URL is a feature in Duply where you can dynamically serve images.

There are 2 types of Dynamic URL

- Query String: It's a URL format that passes value directly into the URL. It uses a question mark (?) in the URL to tell if it's a query string, each value is separated by "&". More details on https://en.wikipedia.org/wiki/Query_string

- Signed URL: It's a more secured version of query string where in this case with Duply you need to generate a key to identify the query string value you passed

To start generating you need to create a base URL first

Query String

The format of query string will be: https://render.duply.co/query/{{ base URL }}/image.jpg?{{ query string values }}

How to use

Eg: if you have elements named text-1 (text) and img-1 (image). You can modify it by passing the value directly in the URL and using the element title as the variable.
?text-1=my text value&img-1=https://duply.co/image.jpg

How to modify the data, background

You can modify the data for text and image. by passing the value directly.
In which, for the text you can modify the text value and image you can modify the image URL.

For other types such as shapes, rating, progress, qrcode you need an advanced format to modify it. By using a triple colon (:::) you can modify a nested object. Why is it important? because the format data of each element is different.

These are some of the advanced formats for the elements:

- background & border (accept for all element types)

{
background: { color: "color value" },

border: { type: "solid or dashed or dotted", width: "number of pixel", color: "color value" }
}

- data > value (progress, rating and qrcode)

{
data: { value: "for progress or rating value / 100 and for qr code the value of the qr code itself" }
}

Note: color value can use hex color but remove the # sign

As we mentioned, to modify a nested object you need to add a triple colon (:::). Meaning if you want to modify the background color of an element named "rectangle-1" the URL format will be ?rectangle-1:::background:::color=fff

Another example, to change the progress if you have a progress element named "progress-1" and you want to modify the data value to be 80%, the URL format will be ?progress-1:::data:::value=80