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 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 Page, including:
- Login Attempt
- Sign In
- Connect
- Opening page
- Logout
- Sign-Up
Constraints
It is mandatory for the submitted page to contain a link with the TAG {splashportal}. The {splashportal} tag represents the URL through which the user is able to come back to the Splash Page.
If you have setup a link in the advertising campaign and you want it to publish in your custom add, you can use the tag {link}.
These tags can be contained in a button, image or link, as you prefer. The only requirement is that they should be included on the page.
CSS and JS
All the styling CSS must be included inline in the same HTML file, using the <style> tag:
<style type="text/css">
/*
...
*/
</style>
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 your own JavaScript inline code.
<script type="text/javascript">
// <![CDATA[
// ]]>
</script>
Images
You can insert your images by 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 Page.