Generate HTML5 Banner Ads

This feature is available from the Prime plan.

Asynchronous Asset Generation Endpoint

POST /async/banner-builder/{design_id}/generate

Generation Characteristics

• Supported Design Type: Animated

• Response: Asynchronous

• Enables batch generation of multiple assets

• Required Parameter: image_file_type=html5

• Retrieval methods:

  • Webhooks

  • Polling

Output File Types

Supported formats:

• Zip file containing assets to display and html5 ads

Additional information

Output customisation

In addition to the supported image properties, an html5 property can be set to customise a valid HTML5 zip file. Here is the available option:

click_tag Settings

A string that will be used to redirect the user to a specific URL when clicking on the visual.

The click_tag parameter accepts either:

• Direct URL (e.g., "https://www.abyssale.com")
• URL with ad network macro (e.g., "[UNENCODED_CLICK_REDIRECT]https://developers.abyssale.com/")

Document Properties

• page_title: Sets the HTML document title

• repeat: Controls animation replay

  • -1: Infinite replay

  • 0: Play once (default)

  • Positive numbers: Specific replay count

• include_backup_image

  • default: false

  • true:an image file named backup_image.jpeg ll'be included in the HTML5 zip file

Ad Network Integration

The specified ad network determines how the HTML5 file is generated, applying platform-specific constraints including:

1. HTML5 folder structure requirements

2. Maximum file size limitations

3. GSAP animation library implementation (CDN or local ZIP inclusion)

These optimizations ensure compatibility with each ad platform's technical requirements and delivery standards.

The ad_network parameter optimizes output for specific platforms:

• default: No specific constraints

• google-ads

• google-marketing: Former DoubleClick requirements

• adform

• amazon-ads

• adroll

More information about ad networks

Videos are supported but are not designed to be published to ad networks.

Configuration Example:

  "image_file_type": "html5",
  "html5": {
    "click_tag": "{MY_CLICK_TAG}",
    "page_title": "Lorem ipsum",
    "ad_network": "default",
    "repeat": 0,
    "include_backup_image": false
  }

Sample request

​Do not forget to replace {YOUR-API-KEY} and {design_id}

cURL

curl -X POST -H "x-api-key:{YOUR-API-KEY}" -H "Content-Type: application/json"  \
-d '{
  "callback_url": "https://webhook.mycompany.com/images",
  "image_file_type": "html5",
  "html5": {
    "click_tag": "{MY_CLICK_TAG}",
    "page_title": "{MY_PAGE_TITLE}",
    "ad_network": "default",
    "repeat": 0,
    "include_backup_image": false
  },
  "template_format_names": ["facebook-feed", "instagram-post", "iab-medium"],
  "elements": {
    "primary_text": {
        "payload": "New branding available.",
        "color": "#FF0000"
    }
  }
}' \
https://api.abyssale.com/async/banner-builder/{design_id}/generate

Javascript

const axios = require('axios');

const payload = {
  "callback_url": "https://webhook.mycompany.com/images",
  "image_file_type": "html5",
  "html5": {
    "click_tag": "{MY_CLICK_TAG}",
    "page_title": "{MY_PAGE_TITLE}",
    "ad_network": "default",
    "repeat": 0,
    "include_backup_image": false
  },
  "template_format_names": ["facebook-feed", "instagram-post", "iab-medium"],
  "elements": {
    "primary_text": {
        "payload": "New branding available.",
        "color": "#FF0000"
    }
  }
}

// Replace {id} by your template ID
axios.post("https://api.abyssale.com/async/banner-builder/{design_id}/generate", payload, {
    headers: {"x-api-key": "{YOUR-API-KEY}", "Content-Type": "application/json", "timeout": 30000}
  }).then(response => {
    console.log(response.data)
}j

Python

import json
import requests

image_generation_payload = {
  "callback_url": "https://webhook.mycompany.com/images",
  "image_file_type": "html5",
  "html5": {
    "click_tag": "{MY_CLICK_TAG}",
    "page_title": "{MY_PAGE_TITLE}",
    "ad_network": "default",
    "repeat": 0,
    "include_backup_image": false
  },
  "template_format_names": ["facebook-feed", "instagram-post", "iab-medium"],
  "elements": {
    "primary_text": {
        "payload": "New branding available.",
        "color": "#FF0000"
    }
  }
}

# Do not forget to replace {YOUR-API-KEY} and {template_id}
r = requests.post("https://api.abyssale.com/async/banner-builder/{design_id}/generate",
  headers={"x-api-key": "YOUR-API-KEY", "Content-Type": "application/json"},
  data=json.dumps(image_generation_payload),
  timeout=30
)
r.json()

Sample response

{
  "generation_request_id": "df75afa8-5a77-4e03-aeef-6d1b6dd0580a"
}