How to make sidedoor ads
In online advertising, a sidedoor ad is an interactive pop up. It consists of a thumbnail that, when clicked, opens a second pop up that in turn contains a video player. You can easily create this in AdButler using native ad templates and native ad items.
In this guide, we're going to create a simple sidedoor ad. You can customize the sample HTML code to fit your needs.
How to create a sidedoor native ad template
This template will require the user to provide the URLs to where the thumbnail and video creatives are hosted when creating the sidedoor ad item.
- Click Native Ad Templates on the left navigation menu to go to the Templates section.
- Click Add Native Ad Template in the Native Ad Templates table. The New Native Template window will appear.
- Select the type of native template that you want to create. The New Native Ad Template page will appear.
Templates for native (custom rendering/API) ad items are not compatible with native (styled) ad items, and vice-versa.
- Name the template, then add a raw URL variable for the link to the video and an image URL variable for the link to the thumbnail. In our sample code, we named these variables VideoURL and ImageURL, respectively.
- Enter the code in the HTML/Script field, then click Save template.
Here's the code we used in our example:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<style>
#ab-bottom-wrapper {
display: block;
z-index: 1999;
position: fixed;
bottom: 1vh;
right: 0;
width: 360px;
height: 205px;
}
#ab-bottom-image-wrapper {
margin-left: auto;
margin-right: auto;
max-width: 768px;
width: 100%;
height: 100%;
display: block;
position: relative;
box-sizing: border-box;
}
#ab-bottom-icon {
position: absolute;
right: 4px;
top: 4px;
margin-bottom: 0;
overflow: hidden;
width: 20px;
height: 20px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 2000;
color: #000000;
border-radius: 50%;
background-color: white;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
#ab-icon-close {
margin: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
user-select: none;
max-width: none;
line-height: 0;
font-size: 20px;
}
#VideoPlay {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 26px;
color: #fff;
background-color: transparent;
}
.modal-backdrop.in {
opacity: 0 !important;
}
.modal-backdrop {
background-color: #ffffff;
}
.modal-dialog {
position: fixed !important;
right: 390px;
bottom: 0;
}
</style>
<script>
$(function () {
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "";
$(theModal + ' source').attr('src', videoSRCauto);
$(theModal + ' video').load();
$(theModal + ' button.close').click(function () {
$(theModal + ' source').attr('src', videoSRC);
});
});
});
function abHandleClose() {
document.getElementById('ab-bottom-wrapper').style.display = "none";
document.getElementById('videoModalPlay').pause();
}
</script>
<div id="ab-bottom-wrapper">
<div id="ab-bottom-image-wrapper">
<div id="ab-bottom-icon">
<a id="ab-icon-close" onclick="abHandleClose()">
×
</a>
</div>
<div style="width: 100%; height: 100%;">
<a class="btn btn-lg video" id="VideoPlay" data-video="[%VideoURL%]" data-toggle="modal" data-target="#videoModal"
href="[TRACKING_LINK]">
►
</a>
<img src="[%ImageURL%]" style="max-width: 100%; max-height: 100%;">
</div>
</div>
</div>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" style="background-color: white !important;" data-dismiss="modal" aria-label="Close"
onclick="document.getElementById('videoModalPlay').pause();"><span
aria-hidden="true">×</span></button>
<video id="videoModalPlay" controls width="100%">
<source src="" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
How to create a sidedoor native ad item
- Go to the section of the relevant zone (Your AdButler > Publishers > Your Publisher > Your Zone) or campaign (Your AdButler > Advertisers > Your Advertiser > Your Campaign).
We recommend assigning native ad items to dynamic zones.
- Click Add Ad Item in the Ad Items table. The Add Ad Item window will appear.
- Click Native. The New Ad Item page will appear.
- Select your sidedoor native ad template in the Template dropdown menu.
- Fill in the rest of the fields as needed, including the thumbnail and video links. If you entered a destination URL, you can test it by clicking Open Destination URL to the right of the field.
- Click Save Ad Item.
Read About ad items for more on AdButler's ad item types and their parameters.
