How to create Banners in HUB
Banners
The banner is a very useful tool when it comes to communicating or selling a particular event/product/event. The banners will be seen by any user who enters the site, without the need for a prior subscription.
STEP BY STEP
Enter the Notification HUB module
Select the Surface Web tab
Select the Banners option
The initial screen shows a list of the different banners configured on the platform and some metrics.
Create Banner
Select the Create New button, within the initial screen
A new window will open to customize the banner.
Setting banner
In the left column are the configuration options. On the right, the preview of the banner.
Set the banner
Name
It is for internal use of the platform
Position on site
Top
Bottom
Title
It is the title that will be displayed in the banner
Background color
It is the color that will have the background of the banner
Typography
Select one of the options offered by the platform
Button and color
Configure the legend and the colors of the button that will carry the banner
Destination url
It is the site to which the button will redirect when clicking on the banner. By pasting the destination url, a utm will be assigned to it to measure the performance of the tool. You can also configure the utm, from the Configure option (UTM Parameters for Google Analytics).
Date and Time
Select the days and hours in which the banner will be displayed (by default, it will be active all day).
With this configuration you can include more than one banner on the same page.
You can visualize the widget in...
Select the pages on which you will display the banner. You can choose all pages (default), some specific pages or all pages except some.
Days until next interaction
With this option, the banner will stop being displayed for the specified number of days to users who have already interacted with the piece.
I'd rather upload HTML
The HTML can include the content you want: from a simple image (which must be hosted on a server), to a complex structure.
There is no specific dimension, it depends exclusively on what you want to generate based on your strategy, and on your own site.
Use this reference HTML code to carry out your configuration: If you want to place the Banner in the bottom margin, modify the word “top” in the HTML for “bottom”. “bottom: 5px”, to “top: 5px”.
Click on the Save button to finish
The banners will be visible to 100% of the traffic, regardless of the browser or operating system used by the user.
How can I further customize my Banner?
To access this option, go to the banner settings section and look for the option I'd rather upload HTML
There you can paste the code you've created to load your own custom notification layout.
Set your preferences
Date and time: Day and time the notification is displayed
You can visualize the widget in...
Days until next interaction
We always recommend using the Icomm HTML template to work with the same structure. The Icomm template is already designed to fit the banner requirements, so you can be sure that your design will fit perfectly.
Copy this HTML Banner Template from Icomm and use it to create your custom designs:
<div class="wpn-banner wpn-banner-top" id="wpn-banner" style="box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
background-color: #0077ff !important;
color: #FFFFFF !important;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
position: fixed;
bottom: 5px;
width: 80%;
left: 10%;
z-index: 9999;
border-radius: 6px;
padding: 25px;
min-height: 60px;
font-size: 20px;
flex-direction: row;
align-items: center;
flex-wrap: wrap;">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
.wpn-banner-link:hover {
text-decoration: none;
color: #000b89 !important;
}
.wpn-banner-link {
color: #FFFFFF !important;
}
.wpn-banner-top .wpn-banner-link-container {
margin-left: 10px;
}
@media (max-width: 400px) {
.wpn-banner-top {
width: 90% !important;
left: 5% !important;
min-height: 160px !important;
}
.wpn-banner-top .wpn-banner-title,
.wpn-banner-top .wpn-banner-link-container {
width: 100% !important;
}
.wpn-banner-link {
padding: 5px 40px !important;
}
.wpn-banner-bottom {
min-height: 180px !important;
}
.wpn-banner-link-container {
padding: 5px 0 !important;
margin: 0 !important;
}
.wpn-banner-preview-powered svg {
height: 13px !important;
}
}
.wpn-close-container button.wpn-close-banner {
color: #FFFFFF !important;
border: none;
background-color: transparent !important;
position: absolute;
top: 0;
right: 7px;
font-size: 30px;
line-height: 30px;
opacity: .4;
text-shadow: 0 1px 0 #fff;
}
.wpn-close-container .wpn-close-banner:hover {
text-decoration: none;
}
</style>
<div class="wpn-close-container">
<button type="button" class="wpn-close-banner" aria-label="Close" id="wpn-close-btn">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="wpn-banner-title">
Ofertas de último momento </div>
<div class="wpn-banner-link-container">
<a href="#nicokrasny" class="wpn-banner-link" id="wpn-banner-link" rel="nofollow" 'target="_blank">
Ir a Ofertas
</a>
</div>As for the HTML code, you have complete freedom to include the content you want. From a simple image (which must be hosted on a server) to a complex structure, you can do whatever you want with your design. The specific dimension will depend exclusively on what you want to generate based on the strategy of your website.
Activate or deactivate the function
Activate or deactivate the switch that is in the upper right corner to turn the function on or off.
Metrics
The Icomm platform offers some interesting metrics for each banner campaign. They can be viewed from the login screen to the Notifications Hub or on the initial screen of each particular functionality.
In the case of Banners, the Impressions and Clicks metrics can be seen as a graph on the initial screen of the Hub. To do this, enter the Notifications Hub module and scroll down until you find the corresponding graph. In this case, the graph will show the general metrics of all the banner campaigns activated on the platform.
Metrics per campaign
It is also possible to view the metrics of each of the banner campaigns activated on the platform. To do this, enter the Hub Module, and scroll down until you find the corresponding graph and select the See all option. You will be redirected to the home screen of the Banners section, where you will be able to see the Impressions and Clicks of each of the campaigns.
Views
CTR: Shows the number of times the Banner is printed.
Clicks: Percentage of clicks in relation to the impressions of the Banner.
Updated on: 05/29/2023
Thank you!