Floating Banner Notification

Add a floating banner to your webstore, which can display information to your customers as a small notification in the bottom corner of the screen. This can be used to inform customers of key information or draw their attention without forcing them to interact with a full screen popup.

The notification has the option to include a "More Info" link which can be used if you have a dedicated page with further information for customers.

Please note that this banner may not be compatible with your store's customisations and/or third party widgets and may require custom web development work to adjust for existing customisations and/or widgets. If you are experienced with HTML and CSS, our developer docs provide details on the Neto specific parts of web development. If you are not comfortable editing the code, we recommend submitting a request to a Neto design partner.

The banner is designed not to display on mobile by default, if you would prefer the banner display on all screen sizes this can be achieved by removing some of the banners styling code (see step 3 below).

Initial Setup

Step 1. Create the banner notification content

In your control panel, go to Webstore > Content Zones and create a new Content Zone using the Zone Name / ID: floating-banner-content. In the Content section of the new Content Zone enter the content you wish to display in the banner notification. While the WYSIWYG Editor here can be used to display almost any content we suggest keeping the notification content to plain text and relatively short.

Need to display more information? set up a web page and link to it in the banner notification using the setup outlined in Step 3 of this guide.

Coding Instructions

Step 1. Open the custom scripts

In your control panel, go to Settings & Tools > All Settings & Tools > Custom Scripts.

Step 2. Create a new custom script

Create a new custom scripted named "Floating Banner Notification".

Copy the below code and paste it within the Page Footer tab (don't click save until the next step):

<div id="neto-floating-banner">
    <i id="neto-floating-banner-close" class="fa fa-times" aria-hidden="true"></i>
    [%content_zone id:'floating-banner-content' /%]
    [%if [@REFERRAL_KEY1@]%]
        <a href="[@REFERRAL_KEY1@]" class="btn btn-primary btn-sm mt-2" role="button" aria-disabled="true">More Info</a>
    [%/if%]
</div>

<script>
    $(document).ready(function(){
        if (!localStorage.getItem('closedNetoBannerPopup')) {
            $("#neto-floating-banner").show();
        }
        $("#neto-floating-banner-close").click(function() {
            $("#neto-floating-banner").hide();
            localStorage.setItem('closedNetoBannerPopup', true);
        });
    });
</script>

<style>
    #neto-floating-banner {
        display: none;
        position: fixed;
        left: 0;
        bottom: 20px;
        width: 326px;
        padding: 15px;
        background: #fff;
        border-radius: 0 5px 5px 0;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.30);
        text-align: center;
        z-index: 16000002;
    }
    #neto-floating-banner #neto-floating-banner-close {
        cursor: pointer;
        position: absolute;
        right: 8px;
        top: 8px;
    }
    /* code to hide banner on mobile */
    @media (max-width: 1024px) {
        #neto-floating-banner {
            display: none !important;
        }
    }
    /* end of code to hide banner on mobile */
</style>

Note: The banner notification will persist until a webstore user decides to close it. Once closed, the notification will not be shown again for that user. Even if they reloaded the page or navigate to a new page. This is achieved using the browsers local storage and does not track the user in any way.

Step 3. Customise your script

Before saving the custom script, you can enter a URL into the Key 1 referral field, this can either be a full URL e.g https://www.mywebsite.com.au/trading-hours/ (which can also be used to link to an external website) or a relative URL e.g /trading-hours/ which can be any page created in your control panel.

If you do not wish to show the More Info button simply leave the Key 1 field blank.

If you wish for the banner to show on mobile devices as well simply remove the following code from the Page Footer tab.

/* code to hide banner on mobile */
@media (max-width: 1024px) {
    #neto-floating-banner {
        display: none !important;
    }
}
/* end of code to hide banner on mobile */

Step 4. Save and verify the custom script

When complete, click the Save button.

Note: Changes to a custom script require you to authenticate your access. Click the "Send Token Now" button and an email will be sent to you with a security token. Copy the token and paste it into the verification field. Click the "Verify Token" button and your changes can be saved. The token will last two hours in case you need to change multiple scripts.

Final Result