# HTML5 Templates

<p class="callout warning">It is not possible to use Adhese macros such as `[adheseReplace:xx]` or `<ADHESE_X>` from within an HTML5 template. Unlike regular (advar) templates, these macros will not work.</p>

An HTML5 template is a combination of a regular [advar template](https://documentation.adhese.org/books/templating/page/advar-templates) and a folder with HTML, CSS and JS files. It allows you to use the form functionality of an advar template while storing code and optional media in a folder structure.

In *Admin &gt; Formats and templates &gt; HTML5 templates,* you can find all previously created templates in zip format. When you click on the link, the following screen will appear:

[![formats_and_templates4.png](https://documentation.adhese.org/uploads/images/gallery/2024-06/scaled-1680-/YZrhoCWlIwULQhIU-formats-and-templates4.png)](https://documentation.adhese.org/uploads/images/gallery/2024-06/YZrhoCWlIwULQhIU-formats-and-templates4.png)

The following options are available:

- Upload a new file: *click* the *Upload a new HTML5 template file (ZIP)* and choose a file to upload.
- Delete a template: *select* the file and *click* the *delete button*.
- Filter the list by typing in the filter box.

### Using HTML5 templates

Previously created HTML5 templates can be used by clicking the '*Add advar'* option in the creative tab and selecting the correct template in the '*Add Advar Template'* dropdown list.

### Creating a new HTML5 template

<p class="callout warning">Ensure that the filenames only contain alphanumeric characters, dots, and underscores. Other characters may cause issues when Adhese processes the file!</p>

Steps for creating and uploading a new template:

1. Locally, create a new folder in which to store all files
2. Choose a name for the template: **\[name\].zip**
3. Create a **descr.json** file and store it in the main directory of your folder. The content has to be constructed in the same way you would create a regular advar template. (See step 6 of [creating a new advar](https://documentation.adhese.org/books/templating/page/advar-templates#bkmrk-create-a-new-advar-t))
4. Create an **index.html** file - which will be the starting point for the HTML5 ad - and store it in the main directory of your folder
5. Make sure to **incorporate** **clickthrough logic**. Adhese relies on it to track clicks correctly.  
    You can do this by adding the following line of code to your **index.html** file. Adhese will add its click tracking URL to this variable, after which you can use it in the rest of your clickthrough logic.
    
    ```javascript
     <script type="text/javascript">
       var clickTag = '';
     </script>
    
    ```
6. Optionally you can store CSS, JS and images in separate files &amp; folders within the main directory.
    
    <p class="callout warning">All links in the HTML5 creative, such as the link to an image within the ad, need to use a relative path, for example: /graphics/ad-image.png or &lt;img src="/graphics/ad-image.png"&gt;. This enables the ad to be self-contained and, therefore, to run independently or to render without a network connection. External libraries and web fonts can be an exception to this guideline.</p>
7. Zip the content of the folder (not the folder itself) and **change the name of the zip** to the name of the template
8. Upload the template in the Adhese UI under *Admin &gt; Formats and templates &gt; HTML5 templates,*
9. Test the template by creating a creative and checking the preview of the banner

### Troubleshooting HTML5 Templates

If an HTML5 template can't be uploaded for some reason, you'll get an error message:

[![Schermafdruk van 2025-02-21 12-58-35.png](https://documentation.adhese.org/uploads/images/gallery/2025-02/scaled-1680-/rDOAAqkvnajYN1V1-schermafdruk-van-2025-02-21-12-58-35.png)](https://documentation.adhese.org/uploads/images/gallery/2025-02/rDOAAqkvnajYN1V1-schermafdruk-van-2025-02-21-12-58-35.png)

In the case above, hidden files might block Adhese from properly unzipping the archive:

[![Schermafdruk van 2025-02-21 13-52-42.png](https://documentation.adhese.org/uploads/images/gallery/2025-02/scaled-1680-/xilX0LY8p1YT27pA-schermafdruk-van-2025-02-21-13-52-42.png)](https://documentation.adhese.org/uploads/images/gallery/2025-02/xilX0LY8p1YT27pA-schermafdruk-van-2025-02-21-13-52-42.png)

[![Schermafdruk van 2025-02-21 13-53-00.png](https://documentation.adhese.org/uploads/images/gallery/2025-02/scaled-1680-/ktFjHchQTyjTAd21-schermafdruk-van-2025-02-21-13-53-00.png)](https://documentation.adhese.org/uploads/images/gallery/2025-02/ktFjHchQTyjTAd21-schermafdruk-van-2025-02-21-13-53-00.png)

When creating an archive on Mac OS, a hidden \_\_MACOSX folder might be created. These files must be removed for the upload to succeed (you may need to unzip, delete and re-zip the files).

[![Schermafdruk van 2025-02-21 13-09-02.png](https://documentation.adhese.org/uploads/images/gallery/2025-02/scaled-1680-/fw10iRzfm81Wf1kg-schermafdruk-van-2025-02-21-13-09-02.png)](https://documentation.adhese.org/uploads/images/gallery/2025-02/fw10iRzfm81Wf1kg-schermafdruk-van-2025-02-21-13-09-02.png)

In the case above, the zip file has been renamed. If the zip file does not match the advar name in the descr.json file, rename the zip file to match the advar name in the descr.json file, and the archive can be uploaded.