Abyssale Developer Hub
  • Getting Started
  • Rest API
    • Overview - Rest API
    • Authentication
    • Designs
      • Design Details
    • Generation
      • Design information
      • Synchronous generation
        • Generate single image
      • Asynchronous generation
        • Generate Multi-Format images
        • Generate Multi-Format PDFs for Printing
        • Generate Multi-Page PDF for Printing
        • Generate Multi-Format Videos
        • Generate Multi-Format Animated GIFs
        • Generate HTML5 Banner Ads
          • ad network
      • Element properties
        • Root
        • Text
        • Button
        • Image
        • Logo
        • Shape
        • Rating
        • Illustration
        • QR Code
        • Video
        • Audio
      • Errors
    • Image Export
    • Fonts
    • Annexes
    • API Reference
  • Dynamic Images
    • Overview - Dynamic Images
    • Dynamic Image generation with URL
  • Webhooks
    • Overview - Webhooks
    • Events
      • Design
      • Banner
      • Global events
Powered by GitBook
On this page
  • How to construct the query strings?
  • How to select a format ?
  1. Dynamic Images

Dynamic Image generation with URL

Discover how to create personalised images from links - Abyssale Dynamic Images

PreviousOverview - Dynamic ImagesNextOverview - Webhooks

Last updated 5 months ago

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

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 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 payload content of a or a ,

  • the image_url of an or a ,

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/{designId}?{changes}

For instance:

  • the designId is 34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3

  • the template contains 2 elements: a text element named text_title and an image element named company_logo.

    • The text_title content will be Welcome, will be white (#FFFFFF) and will have a red background color (#FF0000).

    • the company_logo should contain the following image:

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

How to select a format ?

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

To use a particular format, you have to specify it in the base url and looks like:

https://img.abyssale.com/{designId}/{formatName}

For instance, if your designId is 34j39c5e-31fa-4jdb-b6d4-0c97445fb9b3 and the format you would like to generate is instagram-story, the base URL will be:

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

Element Properties
text
button
image
logo
https://uploads-ssl.webflow.com/6214efb2d4b5d94158f2ff03/6218f45ff39a58c8dbf7eb2c_abyssale-logo.svg