Image generation via URL

Generate personalized images from any design using a simple URL with query parameters

The base URL of a dynamic image is: https://img.abyssale.com/{dynamicImageId}

Changes can be done just as you would normally do with the REST API except it is directly done in the URL with query strings.

All available properties are listed under the Element Properties pages.

How to construct the query strings?

Each query string is composed of a key and a value, such as key=value. The key corresponds to the layer property that needs to be customised and value to the property value.

key is of the following form: layer_name.property_name.

For instance if the design you would like to customise has a text_title element and you would like to change its color; the key will be text_title.color.

If you would like to change:

the property_name can be omitted, such as layer_name=value

Once all of your changes are defined, the final URL will look like:

https://img.abyssale.com/{dynamicImageId}?{changes}

For instance:

As changes are announced by URL, all values must be URL encoded beforehand.

https://img.abyssale.com/34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3?text_title=Welcome&text_title.color=#FFFFFF&text_title.background_color=#FF00000&company_logo=https%3A%2F%2Fuploads-ssl.webflow.com%2F6214efb2d4b5d94158f2ff03%2F6218f45ff39a58c8dbf7eb2c_abyssale-logo.svg

Simplified Query Parameters for Text and Image Elements

For elements of type text or image, you can use a simplified format for query parameters when updating their content dynamically.

Instead of specifying a full structured payload, you can directly assign the new content by using the element's layer name as the query parameter key, and the new value as its value.

  • For text elements, the value should be the updated text content.

  • For image elements, the value should be the new image URL (image_url).

Example:

If your dynamic image contains a text layer named title and an image layer named logo, you can update them like this:

?title=Hello%20World&logo=https://example.com/new-logo.png

This shorthand approach simplifies API requests by allowing you to just pass {layerName}={value} for text and image layers, instead of sending a complex JSON structure.

How to select a format ?

By default the first format of your design will be used.

The format can be specified in the URL using either its name or its UID (unique identifier). To use a particular format, include it in the base URL as follows:

For example, if your design ID is 34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3 and you want to generate the instagram-story format, the URL would be:

https://img.abyssale.com/34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3/instagram-story

Best Practice: It is recommended to use the UID of the format rather than the name to avoid issues if the format name changes in the future.

You can easily retrieve the UID of each format by referring to the Get Design Details endpoint in the API, which provides all available formats and their corresponding UIDs.

  • Using the format uuid will look like:

https://img.abyssale.com/34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3/74c5ee10-c9e8-4433-90e3-3320bab8dff0

Using text variables

As explained in the Text Layer documentation, text variables can be replaced dynamically. When using a dynamic image, you can update a variable by adding it to your query parameters in the format:

vars.{variableName}={variableValue}

Make sure to URL-encode the variable value to avoid issues with spaces or special characters.

Example:

https://img.abyssale.com/34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3/74c5ee10-c9e8-4433-90e3-3320bab8dff0?vars.username=Alice

If your text layer contains: {username} Smith

The {username} variable will be replaced with "Alice", resulting in: Alice Smith

PreviousOverview - Dynamic ImagesNextCreate a dynamic image by API

Last updated