Creating your custom advertising by using "Custom HTML" through the Advertising application

Follow

How-To

This user guide is intended for expert users who are familiar with HTML / JS / CSS. It allows you to use advanced features of the Advertising application.
The article Advertising: set up and manage your advanced advertising campaign explains that by selecting "Custom" as Type of a banner, it is possible to submit a completely customized HTML file and use it to create engaging advertising messages.

Once the custom page is uploaded, it is validated and accepted by the application according to a few rules. This article specifically explains these rules, regarding mandatory tags to insert in the code, HTML tags, CSS and Javascript code blocks.

Please remember that your HTML advertising can be triggered on different events of the Splash Portal, including:

  • Authentication
  • Opening page
  • Logout
  • Registration

 

Constraints

It is mandatory for the submitted page to contain the following two tags:

  • {splashportal}
  • {link}

The {splashportal} tag represents the URL through which the user is able to come back to the Splash Portal.
The {link} tag represents the URL through which the user is able to go to the website specified for the advertising.

These tags can be contained in a button, image or link, as you prefer. The only requirement is that they should be included in the page.

CSS

This code be must added inside the page, possibly in the <style> tag:

<style type="text/css">
/*
...
*/
</style>

 

JS

You can include the JQuery library by using the <script> tag:

<script src="/js/jquery.js"></script>


Then, by using the same tag, you can also add you own JavaScript inline code.

<script type="text/javascript">
// <![CDATA[

// ]]>
</script> 

 

Images

You can insert any image using the <img> tag. You can store images anywhere but they must be accessible through the Internet.

<img src="http://mypersonalstorage.com/images/my_img.png" alt="" />

When you upload the HTML file on the application, Cloud4Wi automatically retrieves all images and stores them locally.
If you are going to include images on your custom HTML, please note that you may have problems if their size is greater than 500 KB.

Note:

  • The application only uploads images contained within the <img> tag. The images included in the CSS style (into the <style> code) are not uploaded.
    In order to view these images correctly, you must ensure that they are reachable by users in the pre-authentication mode. For this purpose, it may be necessary to change the "walled garden" settings for your access devices.

 

A practical example

As a practical example, a "Custom HTML" advertising can be configured as below. Here you can download the file that has been used.

And this is how the advertisement looks like in the Splash Portal.

Have more questions? Submit a request

Comments