# Generate HTML5 Banner Ads

{% hint style="info" %}
This feature is available from the [**Suite**](https://www.abyssale.com/pricing) plan.
{% endhint %}

### 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](/rest-api/generation/asynchronous-generation.md#webhook-configuration)
  * [Polling](/rest-api/generation/asynchronous-generation.md#endpoint)

### 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](/rest-api/generation/asynchronous-generation/generate-html5-banner-ads/ad-network.md)

{% hint style="danger" %}
**Videos are supported  but are not designed to be published to ad networks.**
{% endhint %}

Configuration Example:

```json
  "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 <a href="#sample-request" id="sample-request"></a>

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

{% tabs %}
{% tab title="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
```

{% endtab %}

{% tab title="Javascript" %}

```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
```

{% endtab %}

{% tab title="Python" %}

```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()
```

{% endtab %}
{% endtabs %}

### Sample response <a href="#sample-response" id="sample-response"></a>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.abyssale.com/rest-api/generation/asynchronous-generation/generate-html5-banner-ads.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.