> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.icommkt.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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 1. Enter the **Notification HUB** module 2. Select the **Surface Web** tab 3. Select the **Banners** option ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/1_1sydvdm.jpg) || The initial screen shows a list of the different banners configured on the platform and some metrics. # Create Banner 1. Select the **Create New** button, within the initial screen ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/2_1lni3n0.jpg) _A new window will open to customize the banner._ ### Setting banner ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/3_1on4f8f.jpg) ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/4_4xzvi5.jpg) _In the left column are the configuration options. On the right, the preview of the banner._ 2. 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”. 3. 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? 1. To access this option, go to the banner settings section and look for the option **I'd rather upload HTML** ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/5_mnp8tv.jpg) 2. There you can paste the code you've created to load your own custom notification layout. ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/6_3iz7m2.jpg) 3. Set your preferences * **Date and time**: Day and time the notification is displayed * **You can visualize the widget in...** * **Days until next interaction** ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/7_ndslti.jpg) | 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: ```html
Ofertas de último momento
Ir a Ofertas
``` 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. ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/8_1jv66zv.jpg) # 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. ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/9_98aen6.jpg) ### 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. ![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/10_1cdvtjl.jpg) * **Views** * **CTR**: Shows the number of times the Banner is printed. * **Clicks**: Percentage of clicks in relation to the impressions of the Banner.