---
title: "HTML5 banners"
slug: "html5-banners"
updated: 2026-03-26T14:38:24Z
published: 2026-03-26T14:38:24Z
canonical: "help.awin.com/html5-banners"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.awin.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML5 banners

HTML5 banners are a type of digital advertisement created using HTML5, CSS3, and JavaScript. They are a modern alternative to older, static image ads (like JPGs or PNGs) and animated GIF or Flash banners. They are versatile, interactive, and can be displayed on a wide range of devices, including desktops, tablets, and smartphones. They can be added using **My Creative** tool.

## Awin ClickTag / ClickTracker

It’s important that you declare a clickTag or click tracker URL to a string in the part of the source code which is hosted in our interface. You then use this string to prefix the final landing page with.

In the source code hosted in the Awin interface, you can use:

```plaintext
var awinClickTracker = 'https://www.awin1.com/awclick.php?mid=1001&id=!!!affid!!!&gid=!!!gid!!!&linkid=!!!linkid!!!&clickref=!!!clickref!!!&p=';
```

The awin clickTag should always be:

```plaintext
https://www.awin1.com/awclick.php?mid=XXXX&id=!!!affid!!!&gid=!!!gid!!!&linkid=!!!linkid!!!&clickref=!!!clickref!!!&p=
```

where the value in `mid=XXXX` needs to be replaced with your merchant Id.

Example in the externally hosted JS file:

```plaintext
var searchUrl = awinClickTracker + 'https://www.advertiser-domain.com/result.php?utm_source=awin';
searchUrl += '&search=' + document.productSearch.product.value;
window.open(searchUrl, '\_blank');
```

## How to add the HTML5 creatives

There are two main methods to add HTML5 creatives.

### Method 1: direct HTML embedding (no iframe)

This method is used when you paste the banner’s full HTML code. The ad is served directly on the partner’s page, so all external assets must be referenced with full, absolute URLs. The platform’s system will directly override the placeholders within the clickTag variable you define.

#### HTML code to paste

You will need to host your `styles.css` and `script.js` files, along with any images, on a public server or CDN. Then, you’ll copy and paste the following HTML snippet into Awin creative UI.

```plaintext
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Banner</title>
    <style>
        body { margin: 0; padding: 0; }
        #banner-container { 
            width: 300px; 
            height: 250px; 
            cursor: pointer; 
            position: relative; 
            overflow: hidden; 
        }
    </style>
</head>
<body>
    <div id="banner-container">
        <a href="javascript:void(0);" onclick="window.open(clickTag, '_blank')">
            <img src="https://my-cdn.com/my-banner-ad/images/ad.jpg" alt="advertisement" style="width:100%;height:100%;">
        </a>
    </div>
    <script type="text/javascript">
        // The affiliate platform will find and override this variable.
        var clickTag = "https://www.awin1.com/awclick.php?mid=1001&id=!!!affid!!!&gid=!!!gid!!!&linkid=!!!linkid!!!&clickref=!!!clickref!!!&p=https://my-website.com";
    </script>
    <script src="https://my-cdn.com/my-banner-ad/script.js"></script>
</body>
</html>
```

> [!NOTE]
> Note
> 
> If you use `&lt;a href=""&gt;&lt;/a&gt;` tag, the clicktag will be automatically added. This only demonstrates the use of clicktag.

### Method 2: iframe method

You host your entire banner package (including the `index.html` file) on an external server and pass the click-through URL as a URL parameter.

#### Step 1: the script in your banner

Your `script.js` file (which is also hosted externally) needs to be able to read the clickTag from the URL. The clickTag is not a variable you declare in your HTML; it’s a value passed to the iframe’s URL.

```plaintext
// Function to get a URL parameter by name
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

// Get the clickTag from the URL parameter.
var clickTag = getUrlParameter('clickTag');

// Add a click listener to the banner container
var banner = document.getElementById('banner-container');
banner.addEventListener('click', function() {
    if (clickTag) {
        window.open(clickTag, '_blank');
    }
});
```

#### Step 2: the HTML snippet for Awin

You’ll provide Awin with an iframe tag that points to your externally hosted `index.html` file. You will append the dynamic click-through URL as a GET parameter.

```plaintext
<iframe 
  src="https://my-cdn.com/my-banner-ad/index.html?clickTag=https%3A%2F%2Fwww.awin1.com%2Fawclick.php%3Fmid%3D1001%26id%3D!!!affid!!!%26gid%3D!!!gid!!!%26linkid%3D!!!linkid!!!%26clickref%3D!!!clickref!!!%26p%3D" 
  frameborder="0" 
  scrolling="no"
  width="300" 
  height="250">
</iframe>
```

The Awin platform processes this code and replaces the placeholders `(!!!affid!!!)`etc. in the `iframe src`. When the banner loads, the JavaScript inside it reads the clickTag value from its own URL and uses it to redirect the user upon a click.