Cookie policy banner

I need to create a cookie banner on my prototype. I have a master set up on all pages, with an “Accept” button to hide it when clicked. As cookie banners work in real life, the banner shows until the button is clicked and then it doesn’t show again on any pages. I can’t work out how to get the “OnClick set hidden” functionality to work across multiple pages. What’s the best way to get this to work?


The way to track data across pages in Axure is with global variables. You can use the default, OnLoadVariable or create a new one, like Cookies. Since you’ve set up your cookies banner as a Master, you can have it take care of itself, so that as each page loads, it will know whether to hide or show based on the value of the global variable. It’s important to realize that in your prototype, each page has a separate instance of the Master, and when the page loads the Master will be in it’s default/initial state, just as you’ve set it in the editor. So, clicking the “Accept” button on Page 1 and hiding the banner will only apply to Page 1. When Page 2 loads, that instance of the cookies banner master doesn’t know anything about what happened on Page 1 or any other page. However, global variables are shared and persistent across all pages in your prototype.

So, in your cookies banner master, when “Accept” is clicked, it should set the value of a global variable, say, “Set value of Cookies to true” and then hide the banner. It should also have an OnLoad event with a conditional case of, “IF Cookies equals “true” hide CookiesBanner.” In this way, as each page loads, it will test if cookies have “been accepted” or not and hide the banner if needed.

You may want to invert this logic and have your cookies banner master be hidden by default, and only show if the global variable, Cookies (or whatever you want to name it) is true. Otherwise, as each page loads, that banner will briefly show and then hide, which could be disconcerting.

If this doesn’t make sense, I can make a demo, or if you post an .rp file I can offer a solution.

I KNEW there’d be any easy way of doing this! Saying that …I can’t get it to work. I don’t doubt that it works, but I’m clearly not doing it right. I’m working on a company website so I can’t share the file, but would you mind awfully doing a demo? :worried:

Here is a demo:

auto master banner.rp (100.3 KB)

I created a new Global Variable named, “Cookies” and kept its default value as blank. To do this, I selected Project > Global Variables > Add.

I made the banner out of three widgets (a box, an “X” shape, and a button), then created a dynamic panel from these, then created that as a Master, then I chose to hide this dynamic panel by default. The dynamic panel has a Loaded event that tests the value of “Cookies” and if it does not equal “true” it shows itself (and some “set size” things which I’ll explain later.) The “X” shape simply hides the banner when clicked (as a “dismiss but don’t accept”) whereas the “Accept” button sets the value of “Cookies” to “true” when clicked, then fires the click of the “X” (which hides the banner in same manner as clicking “X”.) In this way, you can see the difference between simply hiding the Master on one page versus setting a global variable before hiding it, which can automatically keep the banner hidden on all pages.

OK, so the default condition is that “Cookies” has a blank (or null) value. When the “cookies banner” loads, it shows itself. If the “X” button is clicked, it hides “cookies banner” --but it only applies to that page “session”. If that page is reloaded or another page is loaded, the banner will still show itself. When the “Accept” button is clicked, “Cookies” is set to “true” and the banner is hidden. If the page reloads or any other page is loaded, the banner is loaded but its “Case 1” is not triggered because the global variable, “Cookies” has a value of “true”. This means that the “cookies banner” dynamic panel stays hidden.

Some extra things I did, more or less to show these possibilities…

The banner stays floating at the top of the window and in front with the option to Pin To Browser (right-click the banner or look at the STYLE panel.) The “pin to” effect is easily turned off if you don’t need it.

The fill for the banner background is set to 66% opacity and has a shadow set, to visually reinforce it is “floating in front”.

The banner’s Loaded event sets the width of the background to the value, ( [[Window.width]] , [[Target.height]] ) so it stretches to fill the full width of the browser window, but does not change its height. The double square brackets are used in Axure to indicate a variable, and there are many built-in variables you can discover in Axure (click the little fx button to right of input fields in the INTERACTIONS code, then click “Insert Variable or Function…”) It also moves the “X” and “Accept” buttons to the right, so they effectively will stay “pinned” to the right edge of the banner with a 10px margin.

I created another master for the page tabs. The page tabs set themselves to “Selected” if the page name contains their text, all in their own Loaded event, so they can take care of themselves in an object-oriented manner. Similarly, the page titles change their text to include the page name. All of this uses another built-in varlable of [[PageName]].

I used the “Fire Event” action on the “Accept” button to show how you can remotely trigger another widget’s actions. I could have simply copied the same “Hide” action and pasted it, but if I later needed to change it, I’d have to then do it in two places. So, let’s say you decide you don’t like the slide-up animation, or get a request to just remove it or change it to a fade-out. You can now do that once for the “X” button and it will work also for the “Accept” button.

1 Like

Perfect! That solved it. Thanks so much for helping and for teaching me more about Global Variables!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.