Developers

Appearance

Image Generation via URL ​

INFO

{dynamicImageId} is the id returned by POST /dynamic-image/{designId} — not the design ID. The dynamic_image_url returned by that endpoint already includes the format slug; use only the {dynamicImageId} segment as the base when constructing URLs manually.

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 they are applied directly in the URL with query strings.

All available properties are listed under the Element Properties pages.

How to Construct Query Strings ​

Each query string is composed of a key and a value: key=value. The key corresponds to the layer property to customise and value is the property value.

The key format is: layer_name.property_name

For instance, if the design has a text_title element and you want to change its color, the key is text_title.color.

Shorthand for text and image content

For the main content of text/button elements (payload) and image/logo elements (image_url), you can omit the property_name and use just layer_name=value.

The final URL looks like:

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

Example:

Design ID: a1b2c3d4-e5f6-4789-abcd-ef1234567890 with:

  • text_title element: content Welcome, white color #FFFFFF, red background #FF0000
  • company_logo element: custom image URL

WARNING

All values must be URL-encoded in the query string.

https://img.abyssale.com/a1b2c3d4-e5f6-4789-abcd-ef1234567890?text_title=Welcome&text_title.color=%23FFFFFF&text_title.background_color=%23FF0000&company_logo=https%3A%2F%2Fuploads-ssl.webflow.com%2F6214efb2d4b5d94158f2ff03%2F6218f45ff39a58c8dbf7eb2c_abyssale-logo.svg

Simplified Parameters for Text and Image Elements ​

For text and image elements, you can use the layer name directly as the parameter key:

  • Text elements: value is the updated text content
  • Image elements: value is the new image_url
?title=Hello%20World&logo=https://example.com/new-logo.png

How to Select a Format ​

By default, the first format of the design is used.

Specify a format by including its name or UID in the base URL:

https://img.abyssale.com/{dynamicImageId}/{format-name-or-uid}

Example with format name:

https://img.abyssale.com/a1b2c3d4-e5f6-4789-abcd-ef1234567890/instagram-story

Example with format UID (recommended):

https://img.abyssale.com/a1b2c3d4-e5f6-4789-abcd-ef1234567890/74c5ee10-c9e8-4433-90e3-3320bab8dff0

Using the UID avoids issues if the format name changes. Retrieve format UIDs via the Get Design Details endpoint.

Using Text Variables ​

As explained in the Text Layer documentation, text variables can be replaced dynamically. Add them to your query parameters using:

vars.{variableName}={variableValue}

URL-encode the variable value to handle spaces or special characters.

Example:

https://img.abyssale.com/a1b2c3d4-e5f6-4789-abcd-ef1234567890/74c5ee10-c9e8-4433-90e3-3320bab8dff0?vars.username=Alice

If the text layer contains {username} Smith, the result will be Alice Smith.