How to show that banner with a dismiss (X) button to non logged in users only?

Product Support

AI-generated summary

The discussion revolves around showing a dismissible banner to non-logged-in users only. ckhawand initially asked if it’s possible, and HAWK provided a solution using cookies and customisable CSS/HTML. The solution involves adding a script to the Common </head> section, HTML to the After Header section, and CSS to the CSS section. This allows for two different banners to be displayed, one for logged-in users and one for non-logged-in users, both with a dismiss button. ckhawand confirmed that the solution worked. Additionally, nujabes expressed interest in the same functionality and asked for clarification on the banner implementation, sharing an image of their desired banner.

1

Is there any way to show that banner with a dismiss (X) button to non logged in users only.
The top banner is shown always, I would like to make it visible only if you are not logged in.

2

It is – you can do it with cookies.

Here is an example where I have one banner that displays for members and a different one for non-members. Both are dismissible and appear just below the top nav.

Go into your customisable CSS/HTML

Put this in the Common </head> section (you might want to play around with the timing etc)

<script>
$(document).ready(function(event) {
    if (Discourse.User.current() && !checkCookie("hideMemberBanner")) {
        $("#banner-container").show();
        $("#uxm-members-banner").show();
        $("#uxm-new-users-banner").hide();
    }
    else if (!Discourse.User.current() && !checkCookie("hideNewUserBanner")) {
        $("#banner-container").show();
        $("#uxm-members-banner").hide();
        $("#uxm-new-users-banner").show();
    }
})

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}

function checkCookie(cname) {
    return cval = getCookie(cname) || false;
}


function hideBanner() {
    if (Discourse.User.current() !== null){
        var cname = "hideMemberBanner";
        var cdays = 20;
    }
    else {
        var cname = "hideNewUserBanner";
        var cdays = 7;
    }
    $("#banner-container").hide();
    setCookie(cname, true, cdays);
}
</script>

Put this into the After Header section

  <div id="banner-container" class="show" scrolling="no">
    <button id="banner-close-button" onclick="hideBanner();"><i class="fa fa-times" aria-hidden="true"></i></button>
    <a id="uxm-members-banner" href="URL here">
        <img src="image URL here" alt="" onclick="toggle('banner-close-button', 'banner-container', 'banner');"/>
    </a>
    <a id="uxm-new-users-banner" href="URL here">
        <img src="image URL here" alt="" onclick="toggle('banner-close-button', 'banner-container', 'banner');"/>
    </a>
</div>

Put this in the CSS section

#banner-container img {
   width: 100%;
   height: auto;
   padding-bottom: 20px;
}
#banner-close-button {
    float: right;
    top: 5px;
    right: 5px;
    position: relative;
    margin-bottom: -30px;
    border-top: none;
    background: transparent;
    border: none;
    font-size: 10pt;
    color: lightgray;
}
#uxm-members-banner {
    display:none;
}

#uxm-new-users-banner {
    display:none;
}

#banner-container{
    display:none;
}
3

Thank you, that worked :slight_smile:

4

I am looking for the same function.
Is the banner you wanted to modify like the following #2?

banner
banner1641×766 335 KB

5

How the 3rd advertisement implemented?