# 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](https://developers.abyssale.com/rest-api/generation/asynchronous-generation/..#webhook-configuration)
  * [Polling](https://developers.abyssale.com/rest-api/generation/asynchronous-generation/..#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](https://developers.abyssale.com/rest-api/generation/asynchronous-generation/generate-html5-banner-ads/ad-network)

{% 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"
}
```