HTML banners allow you to fully customize the look of your banners and give you unlimited formatting options from defining forms, tables, and graphs to selecting multiple images as one banner.
These banners are often seen used for menus or search boxes allowing users interaction before they reach the destination site. This interactivity helps to boost responses, click-through rate as well as visibility of banner in general. HTML banners can even convince users who usually do not click on banners.
In order to create an HTML banner, navigate to Banners > Banner manager > Add banner > HTML Banner.
Wysiwyg vs HTML editor
The WYSIWYG editor (What You See Is What You Get) gives you the ability to enter and format your content while viewing it in real-time. By using the implemented WYSIWYG editor, you can easily edit and style the content of your HTML banner without having any coding experience. This editor enables you to format and stylize text by bolding out or italicizing words, creating numbered lists, adding images, pasting tables, or embedding links.
The primary advantage of the HTML editor (manual coding) is that the user has complete control over the design of his HTML banner. However, the primary disadvantage of manual coding is that the designer must save the banner and load it in a web browser or preview it to see any changes. Many HTML designers keep the text editor and a web browser open at all times to reduce the time required to save and view the altered documents.
You can easily toggle between Wysiwyg and HTML editor in the "HTML code" fieldset
Build an affiliate link within your HTML banner
The simplest way how to include an affiliate link in your HTML banner is by including the {$targeturl} variable. This variable will be replaced with the URL you've defined in the "Destination URL" field. In addition to that, every mandatory parameter such as the Referral ID and Banner ID will be added as well.
If you want to include more links in your banner with different destinations, you have to type them out manually. To track these links properly, you need to also add the Referral ID and Banner ID variables (including URL parameters). If you've chosen the "Anchor links" as your preferred linking method in Configuration > Tracking settings, then add the URL parameters like this (with an anchor):
- https://www.postaffiliatepro.com/features/#a_aid={$refid}&a_bid={$bannerid}
If you're using the "New style links" linking method, use the URL parameters like this (with a question mark):
- https://www.postaffiliatepro.com/features/?a_aid={$refid}&a_bid={$bannerid}
Check out the example below:
for tracking affiliate
programs & networks
Get Started
Post Affiliate Pro Features
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;800&display=swap" rel="stylesheet">
</head>
<body>
<div style="font-family: 'Poppins', sans-serif;font-weight:300;width:400px;border-radius:8px;
background-color:#133f7b;color:white;padding:70px 20px;
padding-bottom:40px;font-size:30px;line-height:36px;" align="center">
<font style="font-weight:800">Affiliate software</font>
<br>for tracking affiliate
<br>programs & networks<br>
<br><br>
<a style="color:#133f7b;background-color:white;padding:10px 60px;font-size:20px;
text-decoration:none;font-weight:800;border-radius:10px;"
target="_blank"
href="{$targeturl}">Get Started
</a><br><br>
<a style="font-size:16px;color:white"
target="_blank"
href="https://postaffiliatepro.com/features/#a_aid={$refid}&a_bid={$bannerid}">
<strong>Post Affiliate Pro Features</strong>
</a>
</div>
</body>
Every variable you will include in the banner will be automatically replaced once an affiliate takes the banner from their Affiliate panel by navigating to Promotions > Banners & Links. Most variables represent affiliate details that can be customized by the merchant by navigating to Affiliates > Affiliate manager > Edit any affiliates; or, by an affiliate in their Affiliate panel by navigating to My profile > Personal details.
Initially, these details are provided when an affiliate signs up for your program, and are based on the fields you've enabled/defined in Configuration > Affiliate signup > Fields. For more details, please, check out the following article.
Available variables
While you are building affiliate links in your HTML banner, you can also use the following variables (most of them represent affiliate details):
{$firstname} - First Name
{$lastname} - Last Name
{$username} - Username
{$password} - Password
{$ip} - IP
{$data1} - Affiliate profile field defined under Configuration->Affiliate signup->Fields
{$data2} - Affiliate profile field defined under Configuration->Affiliate signup->Fields
{$data3} - Affiliate profile field defined under Configuration->Affiliate signup->Fields
{$data4} - Affiliate profile field defined under Configuration->Affiliate signup->Fields
{$data5} - Affiliate profile field defined under Configuration->Affiliate signup->Fields
.
.
.
{$data25} - Affiliate profile field defined under Configuration->Affiliate signup->Fields
{$parentuserid} - Parent affiliate
{$refid} - Referral ID
{$notificationemail} - Notification email
{$bannerid} - Banner Id
{$channelid} - Channel Id
{$targeturl} - Target URL
{$targeturl_encoded} - Encoded target URL
{$impression_track} - Impression track
These variables are listed in the "HTML code" fieldset of the banner customization section.
For more promoting options, check out also Promo e-mails.